Ottrelite is a performance debugging and tracing toolkit for React Native applications. It helps you visualize and analyze the performance of any code in your app - from screen renders and animations to business logic and data processing.
When building React Native apps, you often run into performance issues that are hard to debug:
React Native's cross-platform nature creates unique debugging opportunities that require specialized tools.
Performance issues in React Native apps often span JavaScript, native modules, and platform-specific code. While Chrome DevTools, Xcode Instruments, and Android Studio Profiler are excellent tools for their respective platforms, React Native developers need a solution that bridges these domains.
Ottrelite provides a unified tracing API that works across all React Native languages and platforms, with flexible visualization backends that give you a complete picture of your app's performance.
Ottrelite has a two-part architecture: choose your tracing API and choose your visualization backend.
The Tracing API provides a lightweight interface for React Native development that focuses on fast iteration during development. It supports both synchronous and asynchronous traces, counter events for monitoring metrics, and works across JavaScript, C++, Swift, and Java.
Below is an example of how to use the Tracing API in different languages to synchronous trace an event named generateImage.
The API also allows you to trace asynchronous events as well as counter events. For details, see the Tracing API documentation.
Already using OpenTelemetry?
Your existing OTEL spans can automatically work with Ottrelite's visualization backends while maintaining your production monitoring setup. You can preview OTEL traces locally during development without needing a dedicated collector service. See the OpenTelemetry Integration guide for setup details.
The Tracing API is automatically disabled in production builds, ensuring zero overhead in released apps.
Visualization backends transform your trace data into actionable insights. Think of them as the "display layer" that takes your raw performance data and presents it in a way that helps you quickly identify bottlenecks and optimization opportunities.
Available Backends:
| Backend | Best For | What It Does |
|---|---|---|
| Tracy | Real-time development profiling | Frame-by-frame analysis with live trace visualization, memory tracking, and cross-platform support |
| Platform | System-level analysis | Integrates with Android Studio Profiler, Xcode Instruments, and Perfetto |
Each backend is designed for different development workflows - you can even use multiple backends simultaneously to get different perspectives on your app's performance.
Ottrelite shines during the development and optimization phases of React Native app development. It's specifically designed for scenarios where you need to understand exactly what's happening inside your code, rather than just monitoring high-level system metrics.
Ottrelite is perfect for:
Performance audits and optimization - When you need to identify which specific functions or components are causing performance issues. Unlike general profiling tools, Ottrelite lets you trace your exact business logic and see precisely where time is being spent.
Debugging complex React Native logic - Whether it's investigating why a screen loads slowly, understanding render performance, or tracking down issues in data processing pipelines. The cross-platform nature means you can trace performance issues that span JavaScript, native modules, and platform-specific code.
React Native internals exploration - Ottrelite can automatically instrument React Native's internal operations, giving you visibility into framework-level performance without modifying React Native source code.
Ottrelite is designed for rich, detailed analysis during development, not lightweight production telemetry. For production monitoring, consider using OpenTelemetry instead.
You can still visualize your production data with Ottrelite's OpenTelemetry integration, which gives you both development-time visualization and production monitoring capabilities.
While Ottrelite provides a unified tracing solution across React Native platforms, there are other tools you might consider depending on your specific needs:
Use the standard Performance API (performance.mark(), performance.measure()) to instrument your React Native code, with results visible in React Native DevTools' Performance panel.
Use React Performance Tracks to visualize React work with four priority tracks: blocking (synchronous updates from user interactions), transition (background work initiated via startTransition), suspense (content revealing and fallback displays), and idle (lowest priority work that executes when no higher priority tasks exist).
This feature was recently announced and is currently available as a canary in the upcoming version of React Native. For more details, see the Global Performance documentation.
For React Native versions that don't yet support performance out of the box, you can use the react-native-performance package to preview your traces with Rozenite. This package also provides Objective-C and Java APIs for native-side tracing, though it's limited to a single backend visualization.
Best for: React component performance analysis and standard web performance profiling workflows in React Native using familiar Chrome DevTools.
Android Studio Profiler and Xcode Instruments are powerful native profiling tools that come with your development environment:
Best for: Platform-specific analysis, system-level debugging, and when you need deep native performance insights.