Ottrelite: Tracing Framework for React Native

Artur describes tracing a slow component hook to find which function or operation is taking the most time. Useful targets include asynchronous work, module loading, React Native internals, component renders, networking, and navigation. Enabling built-in tracing can require rebuilding React Native from source, adding instrumentation, and using platform-specific visualization tools.

Artur introduces Ottrelite as a library with a common tracing API for React components and React Native, without requiring a source build. It supports JavaScript, Kotlin, Java, C++, and Swift interfaces that connect to a shared C and C++ implementation. Developers can choose or implement a backend for development traces or production telemetry.

The demos show manual traces, metadata, stack traces, call hierarchies, and numeric values over time. Ottrelite connects to Tracy, Android ATrace for Android Studio Profiler or Perfetto, and iOS Signpost for Xcode Instruments. A Babel plugin can instrument function and class components, while a hook records JavaScript logic duration and native render time.

Artur explains how an Android Gradle plugin uses ASM to modify compiled bytecode, enabling tracing and inserting calls without editing React Native source. The example replaces a method in React Native’s SysTrace implementation with an AutoTrace Android method. The team says that if internal code changes, instrumentation may stop triggering, but should not cause crashes.

The OpenTelemetry integration lets developers send traces to tools such as Jaeger, Grafana, and Prometheus while also viewing them in development backends. The demo shows device and custom tags, plus JavaScript logic duration and native render time. Artur says setup uses Ottrelite’s tracer and meter providers and a span processor interceptor; Java, Kotlin, and Swift SDK integration is planned.