Inspect Traces in Vega Apps - Amazon Vega Docs

Tracing measures code execution time to identify performance bottlenecks. When your app has slow responses or delays, tracing reveals where your code spends time 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.

Video overview

Watch this video for an overview of using Perfetto.

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 on Fire TV Stick.

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 command to record a trace. b. Run the if the record command fails to work. For example, to record traces for a scrolling issue, follow these steps:

Launch the app.
Run Activity Monitor.
Start recording.
Perform scrolling within the app.
Stop recording.

When recording is complete, Activity Monitor creates output files in your project’s generated directory. The name of the directory shows 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.

Open your trace file in Perfetto UI.
Click Open trace file.
Select the iter*\vs\trace file from the generated directory.
Drag the iter*\vs\trace file from the generated directory onto the Perfetto UI webpage.
Wait for the trace to load.
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 to confirm the expected call pattern.

​Video overview

​Add traces in your app

​Record app traces

​Step 1: Rebuild your app

​Step 2: Install and run your app

​Step 3: Record app traces

​Analyze app traces in Perfetto UI

​Related topics