JavaScriptメモリの調査

​

手順1：クラッシュの理由を特定する

1. 集約クラッシュレポートを開きます。 デバイスから、集約クラッシュレポート（ACR）をダウンロードして開きます。
2. ACRファイルでCrashReason:SIGSEGVを探します。
3. アプリログの「HermesGC OOM」をチェックして、JavaScriptヒープメモリオーバーフローが発生していることを確認します。

CrashDescriptor:1b26a2ab4b104aa474b84218e69d2780
CrashLang:Native
Process:com.org.keplerApp
LibraryName:keplerscript-runtime-loader-2.so
CrashReason:SIGSEGV

Nov 21 20:10:13.389612 firestick-010bc8cead0041f0 local0.info keplerscript-ru[7087]: 27 I KeplerScript:[Logging.cpp:40] HermesGC OOM: [] reason = Max heap size was exceeded (1 from category: vm_allocate_category), numCollections = 177, heapSize = 205520896, allocated = 201732128, va = 205520896, external = 88.

​

手順2：メモリリークのシナリオを特定する

1. Visual Studio（VS）Codeを開きます。
2. Memory Monitorを起動します。 アプリのメモリ消費量の検査にある手順に従ってください。
3. JavaScriptのヒープグラフをトラッキングして、200MBのしきい値に近づいているかどうかを確認します。
4. セッションを記録してクラッシュシナリオをキャプチャします。 アプリのメモリ内訳の記録にある手順に従ってください。

​

手順3：JavaScriptヒープスナップショットをキャプチャする

1. Chrome DevToolsを関連付けます。 Chrome DevToolsをVega向けReact Nativeアプリにアタッチします。Chrome DevToolsの起動にある手順に従ってください。
2. [Memory] タブに移動し、[Heap Snapshot] を選択します。
3. [Take snapshot] をクリックします。 以下の画像はヒープスナップショットの例です。
4. 下矢印をクリックして、スナップショットをホストコンピューターにダウンロードします。

​

手順4：JavaScriptヒープスナップショットを分析する

​

Memlabによる分析

1. Memlabをインストールします。
   npm install -g memlab
   
2. 解析を実行します。
   memlab find-leaks --baseline <初期のスナップショット> --target <リーク後のスナップショット> --final <クリア後のスナップショット> --trace-all-objects
   
   Memlabは次の3つのヒープスナップショットを比較します。
   • ベースライン - 初期状態
   • ターゲット - 潜在的なリークが発生した後の状態
   • ファイナル - クリーンアップ後の状態
   --trace-all-objects引数を指定すると、すべてのターゲットページオブジェクトに潜在的なリークのマークが付けられます。 memlab find-leaksは3つのヒープスナップショットを比較し、要約をテーブル形式で表示します。
3. クリアされていないオブジェクトをテーブルから検索します。
4. 永続オブジェクトの割り当てを解除するためのコードを確認します。
5. 保持トレースを確認します。 Memlabは、リークがあったオブジェクトを保持サイズでランク付けします。保持トレースを使用して、オブジェクトツリー内のリークのあるオブジェクトを特定します。

• Find unreported memory leaks
• Heap analysis
• Memlab CLI commands

​

Chrome DevToolsによる分析

1. Chrome DevToolsを開き、[Memory] タブに移動します。
2. JavaScriptヒープスナップショットをアップロードします。
3. さまざまなビューを使用してJavaScriptヒープスナップショットを分析します。
   • [Shallow Size] で並べ替えて、最も重いオブジェクトを見つけます。
   • [Retained Size] で並べ替えて、最も影響の大きいオブジェクトを特定します。

• オブジェクトサイズ
• スナップショットの表示

​

関連トピック

• CPU使用率のモニタリング
• Chrome DevToolsを使用してパフォーマンスを測定する方法
• 💬 コミュニティ：アプリのメモリが不足しているかどうか、どうすれば確認できますか?
• 💬 コミュニティ：バグレポートのログスクリプト