Need React or React Native expertise you can count on?
@ottrelite/backend-wrapper-tracy
This plugin is a wrapper around the open-source Tracy profiler client, which brings tracing using Tracy to Ottrelite.
When to use this backend?
The Tracy backend is designed for real-time development profiling and provides immediate visual feedback as your React Native app runs. Unlike the Platform backend which requires recording sessions and post-analysis, Tracy gives you live insights into your app's performance.
Use Tracy when you want:
- Real-time feedback - See performance data as it happens, perfect for iterative optimization
- Frame-by-frame analysis - Detailed timing information for each frame of your app
- Cross-platform consistency - Same profiling experience across iOS and Android
- Memory tracking - Visual representation of memory usage patterns
- Interactive exploration - Zoom, filter, and analyze traces dynamically
This backend is not designed for production use cases and should not be installed in production builds. See the backends introduction for guidance on excluding backends from production builds.
Supported features
| Feature | Support level |
|---|---|
synchronous traces ({begin,end}Event) | Supported |
asynchronous traces ({begin,end}AsyncEvent) | Unsupported (see tracy#149) |
counter events (counterEvent) | Supported |
Installation
To use this package, you need to install it in your React Native project:
And register the backend with Ottrelite Core in your entrypoint file (e.g. index.js):
Remember to give attribution to the Tracy Profiler in your application, as in the last section.
Recording the trace
To record the trace, you must use the Tracy Profiler tool. For Windows, there are releases containg .7z archives with prebuilt binaries, for other platforms you must follow the documentation to build it yourself.
In short, the instructions to build the Tracy Profiler tool locally are as follows:
In case of Android, simply forward the port used by Tracy (default is 8086) to your device/emulator, e.g. using adb for Android:
Limitations
The tracy::Profiler::PlotData function that handles counter events assumes that the counter's name is persisted (it does not copy the string data, just a pointer to it). This is valid for C++ usage where the data is hardcoded in the code (static), yet here (e.g. from JS) it is dynamic. Therefore, this backend keeps the strings passed to the counterEvent function in an std::unordered_set to ensure that the strings are not deallocated whenever Tracy would try to access them. This means that the counter names will be kept in memory for the lifetime of the backend instance, so be careful with the number of unique counter names you use - using an enormous number of unique counter names (or of enormous lengths) may lead to increased memory usage.
Since Tracy does not support async events, OTEL APIs data will not be visible here. This is because the closest equivalent of OTEL's Spans are async events, which are not supported by this backend.
Additional information
This package utilizes the Tracy Profiler client API under the hood. Please remember to give proper attribution to the Tracy Profiler in your application, as per the Tracy Profiler license.
Many thanks to the author & contributors of the Tracy Profiler.