Inspect Traces in Vega Apps

Tracing helps you identify performance bottlenecks in your Vega app by measuring execution time between specific points in your code. When your app has slow responses or delays, tracing reveals where time is spent during execution, especially in frequently called functions or intensive operations.

Vega has built-in support for Perfetto, a tracing system for analyzing app performance. To track specific areas of your code, you can add trace points using Systrace, a React Native API that lets you emit traces from JavaScript.

This page provides steps to:

• Add traces in your app.
• Record tracing data during execution.
• Analyze execution times using Perfetto's visualization tools.

Add traces in your app

Using Systrace, consider adding trace point in the following areas of your code:

• Functions that run frequently
• Operations that take long to execute
• Event handlers for user interactions
• Areas where you suspect performance issues

Tracing focus performance

When investigating slow focus behavior while scrolling a FlatList with TouchableOpacity components, add traces around the onFocus callback function.

Example:

//Example Systrace code in VegaVideoApp
	 import { Systrace } from "react-native";
	 const FocusableElement = ({
	   focusableElementRef,
	   children,
	   onPress,
	   onBlur,
	   onFocus,
	   getFocusState,
	   onFocusOverrideStyle,
	   style,
	   hasTVPreferredFocus,
	   ...otherProps
	 }: FocusableElementProps) => {
	   const [isFocused, setIsFocused] = useState(false);
	   const focusHandler = () => {
	     Systrace.beginEvent("VegaVideoApp:FocusedElement:onFocus"); // ---> Begin Trace
	     setIsFocused(true);
	     getFocusState?.(true);
	     onFocus?.();
	     Systrace.endEvent(); // ---> End Trace
	   };
	   const blurHandler = () => {
	     setIsFocused(false);
	     getFocusState?.(false);
	     onBlur?.();
	   };

	   return (
	     <TouchableOpacity
	       ref={focusableElementRef}
	       activeOpacity={1}
	       hasTVPreferredFocus={hasTVPreferredFocus}
	       onFocus={focusHandler}
	       onBlur={blurHandler}
	       onPress={onPress}
	       style={[style, isFocused ? onFocusOverrideStyle : undefined]}
	       testID={otherProps.testID}
	       {...otherProps}
	     >
	       {children}
	     </TouchableOpacity>
	   );
	 };

Record app traces

After adding the necessary traces in the app JS code, rebuild your app, run it on a Vega device, and record the traces.

Step 1: Rebuild your app

Rebuild your app to incorporate the performance traces into the app bundle. Make sure you use a Release build configuration for accurate trace measurement. For build instructions, see Build Your App.

Step 2: Install and run your app

Install and run the rebuilt version of your app to begin collecting trace data. Make sure to run your app on a Vega-supported device for accurate trace measurement. For instructions on running your app on a Vega device, see Run Your App.

Step 3: Record app traces

Record traces of the performance issue using:

• Option 1: Vega Studio's Activity Monitor

• Option 2: Command Line Interface

  a. Run the kepler exec perf record --app-name <<interactive-component-id>> command to record a trace.

  b. Run the kepler exec perf activity-monitor --app-name <<interactive-component-id>> if the record command fails to work.

  For example, to record traces for a scrolling issue, follow these steps:

  1. Launch the app.
  2. Run Activity Monitor.
  3. Start recording.
  4. Perform scrolling within the app.
  5. Stop recording.

  

  When recording is complete, Activity Monitor creates output files in your project's generated directory. The name of the directory indicates the recording timestamp.

  Activity Monitor generates the following trace files in your project directory:

  FileName	Description
  iter*_trace*_-converted.json	JS CPU Profiler trace file in Trace Event Format compatible with Vega Studio.
  iter*_trace*_-original.json	JS CPU Profiler trace file in Trace Event Format compatible with Chrome DevTools.
  iter*_vs_trace	Perfetto Trace File
  *trace-recorder.json	Trace file recorded by Activity Monitor. You can open this file using Recording View to inspect data collected by Activity Monitor.

Analyze app traces in Perfetto UI

After collecting traces, use Perfetto UI to analyze the duration and call patterns of your custom traces.

1. Open your trace file in Perfetto UI.

   

2. Click Open trace file.
3. Select the iter*_vs_trace file from the generated directory.
4. Drag the iter*_vs_trace file from the generated directory onto the Perfetto UI webpage.
5. Wait for the trace to load.

6. Enter the trace name in the top search bar to find your added traces.

   The following image shows a VegaVideoApp:FocusedElement:onFocus trace added in the onFocus handler.

   

   If you have the Vega Studio extension installed, you can open trace files directly in VS Code:

   1. Go to your project's generated directory in VS Code.
   2. Click the trace file you want to view. The file opens in the Perfetto UI within VS Code.

   For each trace:

   • Analyze the duration across all occurrences to verify expected behavior.
   • Check any stacked traces below to confirm the expected call pattern.

Troubleshooting

Traces don't end

If traces appear incomplete in Perfetto UI, verify the Systrace.endEvent() API calls are executed in your code.

For example:

A trace appears incomplete when Systrace.endEvent() is placed after an early return statement in a function, preventing its execution.

Related topics

• App Performance Best Practices
• Measure App KPIs
• Identify UI Rendering Issues
• Detect Overdraw
• Investigate Component Re-rendering Issues

Last updated: Sep 30, 2025