Vegaアプリでのトレースの検査

トレースによりコードの実行時間を測定し、パフォーマンスのボトルネックを特定できます。アプリの応答が遅い場合や遅延が発生する場合にトレースを取得すると、特に頻繁に呼び出される関数や負荷の高い操作の実行中に、コードのどの部分に時間がかかっているかを明らかにすることができます。 Vegaには、アプリのパフォーマンスを分析するためのトレースシステムであるPerfetto（英語のみ）のサポートが組み込まれています。コードの特定の領域を追跡するには、Systrace（英語のみ）を使用してトレースポイントを追加できます。これは、JavaScriptからトレースを出力できるようにするReact Native APIです。このページでは、以下の手順について説明します。

アプリへのトレースの追加
実行中のトレースデータの記録
Perfettoの視覚化ツールを使用した実行時間の分析.

ビデオによる概要説明

Perfettoの使い方の概要については、こちらのビデオを参照してください。

アプリへのトレースの追加

Systraceを使用して、コードの次の領域にトレースポイントを追加することを検討してください。

頻繁に実行される関数
実行に時間がかかる操作
ユーザー操作に対応するイベントハンドラー
パフォーマンスの問題が疑われる領域

フォーカスのパフォーマンスのトレース TouchableOpacityコンポーネントを含むFlatListのスクロール中にフォーカスが遅くなる動作を調査するときは、onFocusコールバック関数の前後にトレースを追加します。例：

// VegaVideoAppでのSystraceコードの例
	 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"); // ---> トレース開始
	     setIsFocused(true);
	     getFocusState?.(true);
	     onFocus?.();
	     Systrace.endEvent(); // ---> トレース終了
	   };
	   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>
	   );
	 };

アプリのトレースを記録する

必要なトレースをアプリのJSコードに追加したら、アプリを再ビルドし、Vegaデバイスで実行して、トレースを記録します。

手順1：アプリを再ビルドする

アプリを再ビルドして、パフォーマンストレースをアプリバンドルに取り込みます。トレースを正確に測定するために、必ずReleaseビルド構成を使用してください。ビルド手順については、アプリのビルドを参照してください。

手順2：アプリをインストールして実行する

再ビルドしたバージョンのアプリをインストールして実行し、トレースデータの収集を開始します。トレースを正確に測定するために、必ずVega対応デバイスでアプリを実行してください。Vegaデバイスでアプリを実行する手順については、Fire TV Stickでアプリを実行するを参照してください。

手順3：アプリのトレースを記録する

次の手順を使用して、パフォーマンスの問題のトレースを記録します。

オプション1：Vega StudioのActivity Monitor
オプション2：コマンドラインインターフェイス a. kepler exec perf record —app-name <<対話型コンポーネントのID>>コマンドを実行して、トレースを記録します。 b. 記録コマンドが機能しない場合は、kepler exec perf activity-monitor —app-name <<対話型コンポーネントのID>>を実行します。たとえば、スクロールの問題に関するトレースを記録するには、次の手順に従います。

アプリを起動します。
Activity Monitorを実行します。
記録を開始します。
アプリ内でスクロールを実行します。
記録を停止します。

記録が完了すると、Activity Monitorによってプロジェクトのgeneratedディレクトリに出力ファイルが作成されます。ディレクトリの名前は記録のタイムスタンプを示します。 Activity Monitorは、プロジェクトディレクトリに以下のトレースファイルを生成します。

ファイル名	説明
iter_trace_-converted.json	Vega Studioと互換性のあるTrace Event Format（英語のみ）のJS CPUプロファイラートレースファイル。
iter_trace_-original.json	Chrome DevToolsと互換性のあるTrace Event Format（英語のみ）のJS CPUプロファイラートレースファイル。
iter*_vs_trace	Perfettoトレースファイル。
*trace-recorder.json	Activity Monitorによって記録されたトレースファイル。このファイルをRecording Viewで開くと、Activity Monitorで収集されたデータを検査することができます。

Perfetto UIでのアプリのトレースの分析

トレースを収集したら、Perfetto UI（英語のみ）を使用してカスタムトレースの継続時間と呼び出しパターンを分析します。

Perfetto UIでトレースファイルを開きます。
[Open trace file] をクリックします。
generatedディレクトリからiter*_vs_traceファイルを選択します。
generatedディレクトリからiter*_vs_traceファイルをPerfetto UIウェブページにドラッグします。
トレースが読み込まれるまで待ちます。
上部の検索バーにトレース名を入力して、追加したトレースを検索します。次の画像は、onFocusハンドラーに追加されたVegaVideoApp:FocusedElement:onFocusトレースを示しています。 Vega Studio拡張機能がインストールされている場合は、VS Codeでトレースファイルを直接開くことができます。
1. VS Codeのプロジェクトで生成されたディレクトリに移動します。
2. 表示するトレースファイルをクリックします。ファイルはVS Code内のPerfetto UIで開きます。
各トレースについて、次の操作を行います。
- すべての記録箇所で継続時間を分析して、想定された動作を検証します。
- すべてのスタックトレースを調べて、想定された呼び出しパターンを確認します。

Vegaアプリの開発

Vegaアプリでのトレースの検査

ビデオによる概要説明

アプリへのトレースの追加