Vega Studioを使用してアプリのクラッシュをデバッグする方法

Vega Studioでは、Fire TV Stick（デバイス）またはVega仮想デバイス（シミュレーター）で実行されているアプリの集約クラッシュレポート（ACR）を収集して分析できます。このプロセスには、ACRをコピーしてシンポリケートすることが含まれます。Vega向けReact Nativeアプリとターボモジュールのレポートを収集および分析できます。

• クラッシュが発生したメモリアドレス
• クラッシュを引き起こした呼び出し階層を示すスタックトレース
• デバイスの状態やアプリのバージョンなどのシステム情報
• 未加工のクラッシュデータ（判読できるようにするにはシンボリケーションが必要）

ACRによるクラッシュのデバッグは、Fire TV StickデバイスまたはVega仮想デバイスシミュレーターで実行されているVega向けReact Nativeアプリとターボモジュールで機能します。 このページでは、アプリがクラッシュした正確な場所と理由を特定できるように、デバイスからACRをコピーしてシンボリケートする手順（0x7ff8123456abのような解読困難なメモリアドレスを、my_function.ts:42のような判読可能なコード参照に変換する手順）を説明します。

​

前提条件

1. アプリがクラッシュしたときに生成されたACRファイル。
2. デバッグシンボルまたはソースマップ（コードタイプによって異なります）。
3. Ubuntu 22.04以降で開発する場合は、コンピューターにlibpython3.8がインストールされている。
   sudo add-apt-repository ppa:deadsnakes/ppa
   
   sudo apt update
   
   sudo apt install libpython3.8-dev
   
4. binutilsがインストールされている。 Macでは、次のコマンドを実行します。
   brew install binutils
   
   画面の指示に従います。 Ubuntuでは、次のコマンドを実行します。
   sudo apt install binutils
   

​

ACRをコピーする

1. ターゲットデバイスをコンピューターに接続します。 Vegaは、接続されているデバイスをサイドバーに表示します。デバイスが表示されない場合は、[Refresh devices] ボタンをクリックします。デバイスを接続していない場合、デフォルトでVega仮想デバイスが選択されます。
2. サイドバーから目的のターゲットデバイスを選択します。
3. VS Codeでコマンドパレットを開きます。
   • Macの場合：Shift+Command ⌘+P
   • Linuxの場合：Ctrl+Shift+P
4. 「Vega Device Management: Copy ACR from device」と入力します。
5. アプリのパッケージIDpackage idを入力するか、デバイスまたはシミュレーターのプロセスIDprocess idを入力します。 この情報はmanifest.tomlの[package]セクションで確認できます。 パッケージIDはアプリを識別し、プロセスIDはアプリを実行している固有のプロセスを識別するものです。
6. パッケージIDはアプリを識別し、プロセスIDはアプリを実行している固有のプロセスを識別するものです。
   • 利用可能なすべてのACRをダウンロードするには、[All] を選択します。
   • 最新のACRだけをダウンロードするには、[latest] を選択します。
   特定したプロセスIDまたはパッケージIDを使用して、選択したACRオプションでダウンロードを続行します。
7. ACRを任意のフォルダに保存します。

​

ACRをシンボリケートする

アプリがクラッシュすると、メモリアドレスとスタックトレースを含むACRが生成されます。これらのトレースは、実際のコード参照ではなくメモリ位置のみを表示するため、読み取りは困難です。 シンボリケートすると、この難解なメモリアドレスが読み取り可能な情報に変換され、クラッシュが発生した正確なファイルと行番号が表示されます。 例： シンボリケート前：0x7ff8123456ab シンボリケート後：my_function.ts:42

​

シンボリケートの起動

1. VS Codeでコマンドパレットを開きます。
   • Macの場合：Shift+Command ⌘+P
   • Linuxの場合：Ctrl+Shift+P
2. 「Vega Device Management: Symbolicate ACR」と入力してEnterキーを押します。
3. ACRファイルを選択します。

​

シンボリケーションオプションの選択

Vega Studioから、シンボリケーションオプションを選択するよう求められます。ここでシンボリケーションオプションを選択する前に、package.jsonをチェックしてビルド構成を検証してください。react-native build-keplerの代わりにカスタムロジックを使用してJS HermesバイトコードバンドルまたはJSソースマップを生成する場合は、次の手順に従います。

1. オプション2：手動シンボリケーションに進みます。
2. Metroで生成されたファイルが次の命名規則に従っていることを確認します。
   • JSプレーンテキストバンドル：index.bundle
   • JSソースマップ：*.bundle.map
   

​

オプション1：自動シンボリケーション

Vega Studioによって、必要なすべての構成パラメーターが収集されます。ユーザーによる入力は不要です。終了すると、シンボリケートされたコールスタックがターミナルに表示されます。ネイティブコードの場合、GDBデバッグセッションが自動的に開きます。

1. Vega Studioでパラメーターが収集されるまで待ちます。
2. 不足しているパラメーターの入力を求められた場合、以下を行います。
   • リクエストを注意深く読みます。
   • リクエストされた情報を入力します。
   • [Continue] をクリックします。
   たとえば、ネイティブの自動シンボリケーションの実行中、デバイスが接続されていない場合は、debug rootfsを指定するように求めるプロンプトが表示されます。
3. 結果を確認します。
   • ターミナルで、シンボリケートされたコールスタックを確認します。
   • ネイティブコードの場合、GDBデバッグセッションが自動的に開きます。
4. ACRを表示します。
   • ネイティブコードの場合：GDBデバッグセッションを閉じると、システムによってACRレポートが自動生成されます。
   • JavaScriptコードの場合：システムによってACRレポートが自動生成されます。
   • Vega StudioによってACRレポートが自動的に開かれ、クラッシュの診断に役立つ処理済みの情報が表示されます。

​

オプション2：手動シンボリケーション

手動モードでは、Vega StudioによってACRが解析されてコードタイプが検出されます。

1. コードタイプが検出されるまで待機します。
   • ネイティブコードのみ - ネイティブワークフローを開始します。
   • 混合（ネイティブコードとJavaScriptコード）- デコードタイプを選択するよう求められます。
   
2. デコードタイプを選択します（システムによって混合コードタイプが検出された場合）。 オプション1：gdb（ネイティブモード）- ネイティブコールスタックをシンボリケートする。 このオプションのデコードタイプを使用する場合は、追加の手順についてネイティブモードを参照してください。 オプション2：js（JavaScriptモード）- JavaScriptコールスタックをシンボリケートする。 このオプションのデコードタイプを使用する場合は、追加の手順についてJavaScriptモードを参照してください。

​

ネイティブモード

1. シンボルソースを選択します。 デバイスが接続されている場合：
   • device - 接続されたデバイスからシンボルとライブラリを取得します。
   • debug rootfs - Vega Studioから、debug rootfsを指定するように求めるプロンプトが表示されます。
   デバイスが接続されていない場合：プロンプトが表示されたら、rootfsの場所を指定する必要があります。

2. デバッグシンボルフォルダを追加します。 a. [Yes] を選択してフォルダを追加します。 b. フォルダの場所を選択します。 c. 上の操作を繰り返すか、[No] を選択して終了します。
3. 結果を確認します。 a. ターミナルで、シンボリケートされたコールスタックを探します。 b. GDBデバッグセッションを使用します。
4. ACRを表示します。 GDBデバッグセッションを閉じると、システムによりACRが生成され、Vega Studioで表示されます。レポートには、問題の診断に役立つ処理済みのクラッシュ情報が含まれています。

​

JavaScriptモード

1. ソースマップを指定します。 a. ソースマップのプロンプトが表示されるまで待機します。b. プロンプトが表示されたら、[Browse] をクリックします。c. プロジェクトフォルダに移動します。d. index.bundle.map を選択します。
2. その他のマップを追加します（任意）。 a. プロンプトが表示されたら、[Yes] を選択してマップをさらに追加します。b. マップファイルの場所を選択します。c. 上の操作を繰り返すか、[No] を選択して終了します。
3. ターミナルで、シンボリケートされたコールスタックを確認します。
4. ACRを表示します。 システムによりACRレポートが生成され、Vega Studioで自動的に開きます。レポートには、問題の診断に役立つ処理済みのクラッシュ情報が含まれています。

​

ACRに関するよくある問題

ACRの分析中に問題が発生した場合は、クラッシュ分析に関する問題の修正を参照してください。

​

関連トピック

• 💬 コミュニティ：Vega Supported Libraries and Services（英語のみ）
• クラッシュ分析に関する問題の修正
• Chrome DevToolsを使用してパフォーマンスを測定する方法
• Charles Proxyによるネットワークトラフィックのモニタリング

---