CPU使用率のモニタリング

• Activity Monitor - リアルタイムのCPU指標と記録機能を提供します（Fire TV Stickのみ）。
• Recording View - フィルタリングに対応したデータ分析とライフサイクルイベントの追跡を行うことができます。

​

前提条件

1. 動作中のアプリがある。アプリを作成する手順については、アプリの作成を参照してください。
2. アプリがデバイスに接続している。

​

Activity Monitorの起動

1. 接続されたデバイスでアプリを起動します。
2. Visual Studio（VS）Codeでコマンドパレットを開きます。 Mac：Shift+Command ⌘+P Linux：Ctrl+Shift+P
3. 「Vega: Start Activity Monitor」と入力し、Macの場合はReturnキー、Linuxの場合はEnterキーを押します。 [App Performance Tools] から [Activity Monitor] を選択することもできます。 進行状況バーが表示された後、Activity Monitorが新しいウィンドウで開きます。
4. 進行状況バーが表示されない場合は、ウィンドウを閉じてActivity Monitorを再起動してください。
5. エラーが発生すると、次のメッセージが表示されます。
6. メッセージを閉じ、Activity Monitorを再起動してください。 Activity Monitorには、次の2つの時系列グラフが表示されます。
   • CPU使用率
   • メモリ使用量
   どちらのグラフでも、X軸は連続した時間帯を表しており、データストリーム全体のアクティビティを相関させることができます。 CPU使用率グラフのY軸は、デバイス上のすべてのコアにおける時間経過に伴うリアルタイムのCPU使用率を示します。 メモリグラフのY軸は、時間経過に伴う現在のメモリ消費量をメビバイト（MiB）単位で示します。 パフォーマンスグラフの点線は、クラッシュから再起動までの間にアプリがダウンしていた期間を表します。これは、データがアプリの実行中にのみ記録されたということを意味します。アプリがクラッシュすると、Activity Monitorはデータの収集を停止します。モニタリングを再開するには、アプリを再起動します。
7. コマンドパレットで「Vega App: Run」と入力します。 [Vega Studio] > [Projects] セクションに移動することもできます。ここにはアプリ名と、ビルド、上向き矢印、再生の各アイコンが表示されます。
8. [Play] アイコンをクリックします。

​

記録の開始

1. Activity Monitorで、[⏹️ Start Recording] を選択します。
2. プロンプトが表示されたら、記録セッションの名前を入力します。
3. プロンプトが表示されたら、記録時間（タイムアウト）を入力します。デフォルトでは、録音タイムアウトは120秒です。
4. Fire TV Stickで、アプリをリリースモードで実行します。
5. セッションを終了するには、[⏹️ Stop Recording] を選択します。 別のウィンドウでRecording Viewが開きます。

​

起動モードの記録の実行

module.exports = {
   project: {
      kepler: {
      }
   },
};

1. Vegaデバイスを開発用コンピューターに接続します。
2. Vegaデバイスでアプリを実行します。 Fire TV Stickでアプリを実行するの手順に従ってください。
3. [Vega Studio] パネルで、次の操作を行います。
   • [Build Modes] から [Release] を選択します。
   • [Devices] から接続するデバイスを選択します。
4. コマンドパレットを開きます。 Mac：Shift+Command ⌘+P Linux：Ctrl+Shift+P
5. 「Vega: Run CPU Profiler on App Launch」と入力し、Macの場合はReturnキー、Linuxの場合はEnterキーを押します。 構成、ビルド、インストール、記録、アプリ起動の実行中は、画面に進行状況を示す通知が表示されます。 プロセスが完了すると、Vegaが起動モードのプロファイリング構成を使用して、アプリのvpkg（アプリ配布用のVegaのパッケージ形式）を生成します。次に、このパッケージがデバイスにインストールされます。インストール後、Activity Monitorが新しいウィンドウで開き、プロファイリングデータの記録が開始されます。

​

記録セッションの終了

​

起動モードの記録の再実行

1. 「Vega: Start Activity Recording and Launch App」と入力します。
2. アプリコードを変更した場合は、起動モードの記録を再実行します。コマンドパレットに「Vega: Run CPU Profiler on App Launch」と入力します。

​

記録されたデータの分析

​

タイムライン

• 時間帯を選択するには、マウスを使用して緑色のタイムラインバーをドラッグします。
• 個々のグラフ（プロファイラーグラフ、CPUグラフなど）をフィルタリングします。各グラフで選択した時間帯は、そのグラフにのみ適用されます。

​

トレース

​

アプリのライフサイクルイベント

• Launch - アプリが起動し、画面に表示され、フォアグラウンドに移動します。
• Foreground - アプリは画面に表示されています。
• Background - アプリは画面に表示されていませんが、バックグラウンドで実行されています。
• Crash - このイベントはアプリのクラッシュを示します。

• クラッシュしたアプリに対応する集約クラッシュレポート（ACR）をダウンロードします。ACRにはクラッシュに関する詳細情報が含まれており、問題の診断と修正に役立ちます。
• VS Codeワークスペースに通知を送信します。これはVS Codeウィンドウの右下隅に表示されます。通知には、[Symbolicate an ACR] と [View and Copy Logs] の2つのアクションボタンが含まれます。

​

スレッド状態の情報

• 100ミリ秒間隔ごとの主要なスレッドの状態。
• 記録セッション全体で、スレッドが最も多くの時間を費やした場所。

​

スレッドのタイプ

• JSスレッド - すべてのJavaScriptロジック、イベントハンドラー、スクリプトを単一スレッドで実行します。長時間実行される操作はUIとレンダリングタスクをブロックし、次のようなパフォーマンス上の問題を引き起こします。UIの応答不能、アニメーションの遅延、高レイテンシ。
• UIスレッド - インターフェイス要素を更新し、クリックやキー押下などのユーザー操作を処理します。この重要なスレッドがブロックされると、アプリが応答しなくなります。
• レンダリングスレッド - すべてのビジュアル要素を作成して管理し、UIスレッドと連携してグラフィカルな出力を提供します。 スレッド状態の情報は、JavaScriptアプリのパフォーマンスボトルネックを見つけるために使用します。JavaScriptスレッドのパフォーマンスの調査で代表的なシナリオを参照してください。

​

スレッドの状態

• Running - スレッドはCPUコアで命令をアクティブに実行中です。
• Runnable - スレッドは実行可能な状態であり、CPUコアの空きを待機しています。
• Runnable (Preempted) - スケジューラによってスレッドがプリエンプトされ別のスレッドが実行中のため、CPUの競合が起こっている状態です。
• Sleeping - スレッドが自発的に制御を停止し、他のスレッドがCPUを使用してリソースを管理できる状態です。
• Uninterruptible Sleep - スレッドがカーネルのシステムコールを実行中で、プリエンプションを受け入れられない状態です。
• Stopped - スレッドは一時停止しており（多くの場合、デバッグまたは同期のため）、後で再開できる状態です。
• Idle - スレッドは作業割り当てを待機しており、タスクを実行していない状態です。
• Exit - スレッドは実行を完了して終了し、再開はできない状態です。

​

ホット関数

• Hot Functions - 関数名とソースの位置。Hot Functionsのリンクをクリックすると、関数のソースコードに移動します。
• Total CPU Time - 記録セッション全体で関数の実行に費やされた合計包括時間（ミリ秒）。
• Self CPU Time - 記録セッション全体で関数の実行に費やされた排他的合計時間（ミリ秒）。
• Total % - 合計包括CPU時間のうち、この関数に費やされた時間の割合。

1. 記録中にアプリに接続する。
2. パフォーマンスデータを分析する。
3. 次の2つのファイルを作成する。
   • ホット関数の概要を含むJSONファイル
   • Chrome DevToolsのTrace Event Formatのトレースイベントを含むCPUプロファイラー（traceEventsFilePath）
   プロファイリングにより、以下が可能になります。
   • コードベースで最もCPU使用率の高い領域を特定する
   • 最適化する必要がある機能に優先順位を付ける

​

ホット関数とフレームグラフの表示

​

パフォーマンスコマンドラインインターフェイス（CLI）でのVega CPUプロファイラーの使用

vega exec perf activity-monitor
            --record-cpu-profiling
            --app-name=com.amazondeveloper.keplervideoapp
            --sourcemap-file-path=<kepler-buildディレクトリ内のJSソースマップファイルのパス>

{
   "traceRecords": [
      {
         "startTs": 1687263185520361000,
         "endTs": 1687263201482227000,
         "traceName": "FOREGROUND",
         "pid": 2838,
         "timestamp": null,
         "processName": "com.amazondeveloper.keplervideoapp"
      },
      {
         "startTs": 1687263201482227000,
         "endTs": 1687263215311317000,
         "traceName": "BACKGROUND",
         "pid": 2838,
         "timestamp": null,
         "processName": "com.amazondeveloper.keplervideoapp"
      }
   ],
   "activityRecords": [
      {
         "timestamp": 1687263185024674256,
         "system": {
            "cpu": {
               "numCores": 4,
               "aggregated": {
                  "user": 147.6,
                  "sys": 114.8
               },
               "cores": []
            },
            "memory": {
               "total": 1807052.8,
               "free": 667648.0,
               "used": 502784.0,
               "available": 1252147.2
            }
         },
         "process": [
            {
               "pid": 2838,
               "name": "com.amazondeveloper.keplervideoapp",
               "cpuPercentage": 130.0,
               "memPercentage": 3.8,
               "memRES": 68456.0
            }
         ]
      }
   ],
   "cpuRecords": [{
        "hotFunctions": [{
                "function_name": "GradientOverlay",
                "file_path": "/VegaVideoApp/src/components/miniDetails/Preview.tsx",
                "line_number": 28,
                "column_number": 7,
                "begin_timestamp": 8407098854,
                "end_timestamp": 8408235415,
                "duration": 1136561,
                "percent_of_total": 16.08
            },
         ],
         "traceEventsFilePath": "/VegaVideoApp/generated/2024-01-10_09-52-13/trace1704909179877459917-converted.json"
   }]
}

traceRecords

• startTs（開始タイムスタンプ）
• endTs（終了タイムスタンプ）
• pid（プロセスID）
• processName（アプリ名）

activityRecords

• system：
  • CPU使用率（sysおよびuser、各値の最大値はnumCores x 100）
  • メモリ使用量
• process：
  • cpuPercentage（最大値はnumCores×100）
  • memPercentage（メモリパーセンテージ、最大100%）
  • memRes（共有メモリでアプリが使用するメモリの合計）
  • pidとアプリのapp name（プロセスIDと名前）

cpuRecords

​

フレームグラフ

• 記録中にアクティブになる関数
• 各関数のコールスタックの順序
• 各関数のおおよその実行時間

​

関数ソースの色分けガイド

• Name - 関数名。
• Category - 関数が属するカテゴリー。
• Duration - アプリがこの関数とこの関数が呼び出したすべての子関数の実行に費やしたおおよその時間（ミリ秒）。
• SelfDuration - アプリがこの関数の実行に費やしたおおよその時間（ミリ秒）。ただし、子関数に費やした時間を除きます。
• Start - 関数の開始タイムスタンプ。
• End - 関数の終了タイムスタンプ。
• SourcePosition - ソースの位置（関数名、行番号、列番号）。 SourcePosition をクリックすると、プロジェクト内の関数ソースコードが表示されます。

​

コールツリー

• ノードを展開したり折りたたんだりして、特定の領域に注目する。
• [Self CPU Time] または [Total CPU Time] で並べ替える。

​

以前の記録を開く方法

​

オプション1（推奨）：クイックオープンを使用する

​

VS Codeの場合

1. 記録ファイル（例：Basic-trace-recorder[timestamp].json）を探します。VS Code Quick Openを使用してActivity Monitorで、またはプロジェクトのgeneratedディレクトリで見つけることができます。
2. ファイルを1回クリックしてプレビューするか、2回クリックしてアクティブモードで開きます。

​

CLIの場合

1. ターミナルウィンドウを開き、次のように入力します。
   code <<記録ファイルのパス>>
   
2. VS Codeでコマンドパレットを開きます。 Mac：Shift+Command ⌘+P Linux：Ctrl+Shift+P

1. VS Codeを開きます。
2. コマンドパレットを開きます。 Mac：Shift+Command ⌘+P Linux：Ctrl+Shift+P
3. 「Shell Command: Install code command in PATH」を実行します。
4. コマンドを再試行します。

​

オプション2：VS Codeのコマンドパレットを使用する

1. VS Codeを開きます。
2. コマンドパレットを開きます。 Mac：Shift+Command ⌘+P Linux：Ctrl+Shift+P
3. 「Vega: Open Recording View」と入力します。
4. 一覧から以前の記録セッションを選択します。 選択したセッションのRecording Viewが新しいウィンドウで開きます。別のタブで現在のセッションを開いている場合は、新しいセッションにフォーカスが移ります。

​

関連トピック

• 💬 コミュニティ：Inspect JS traces from Vega Apps（英語のみ）
• 💬 コミュニティ：JSプロファイラートレースをPerfettoトレースファイルにマージする方法
• アプリのKPIを測定
• UIレンダリングの問題の特定
• コンポーネントの再レンダリングに関する問題の調査