メモリリークの検出 - Amazon Vega Docs

メモリリークが発生すると、アプリのパフォーマンスとユーザーエクスペリエンスが低下する可能性があります。効率的で応答性の高いアプリを作成するには、このようなリークを特定して解決することが重要です。 Vegaアプリの開発に使用されるVisual Studio Code（VS Code）のVega Studio拡張機能には、MemLabと呼ばれる機能があります。この機能は、JavaScriptヒープスナップショットを分析することでVega向けReact Nativeアプリのメモリリークを検出します。MemLabでは、次のような潜在的なメモリの問題を特定できます。

React Nativeの仮想ドキュメントオブジェクトモデル（DOM）内にある、デタッチされたDOMのようなオブジェクト。
JavaScriptオブジェクト内の循環参照。
ガベージコレクションの妨げとなる、保持されたままのコンポーネントやイベントリスナー。

Vega向けReact NativeとReact Nativeとの関係 Vega向けReact Nativeは、クロスプラットフォームアプリの構築用にAmazonによって開発された、React Nativeのツリー外のプラットフォームです。これにより、さまざまなAmazonデバイスやプラットフォーム向けの効率的で応答性の高いアプリを作成できます。Vega向けReact NativeはReact Nativeを基盤としており、そのコンセプトとルールの多くを継承しています。React Nativeと同様に、Vega向けReact Nativeではコンポーネントベースのアーキテクチャが使用され、一度作成すれば複数のプラットフォームにデプロイできます。 Vega向けReact Nativeでのメモリ管理 React Nativeと同様に、Vega向けReact Nativeアプリでは適切なメモリ管理が重要です。フレームワークがメモリ管理を処理しますが、存続期間の長いオブジェクト、イベントリスナー、複雑な状態でのリークの発生に注意してください。 メモリリーク検出の重要性 メモリリークの特定と修正は、特にリソースが限られているデバイスで、Vega向けReact Nativeアプリのパフォーマンスと安定性を維持するために不可欠です。そこで、MemLabのようなツールが開発プロセスに役立ちます。このページでは、以下の手順の実行方法に関するガイダンスを提供します。

意図的にメモリリークを起こすサンプルのVega向けReact Nativeアプリを作成する。
アプリの実行中のさまざまな段階でヒープスナップショットをキャプチャする。
MemLabを使用してこれらのスナップショットを分析し、メモリリークを特定する。
MemLabの出力を解釈して、リークの性質と原因を理解する。

前提条件

Node.jsをインストールする。
MemLabをインストールする。
npm install -g memlab
ANRのクラッシュ防止のため、デバッグvpkgビルドを使用するか、以下を追加して環境を構成します。 ANRクラッシュを防ぐように環境を構成する。そのためには、デバッグ用のvpkgビルドを使用するか、react-native.config.jsに以下の設定を追加します。
{ "JS_THREAD_MONITOR": 0 }

手順1：サンプルアプリを作成する

次のコマンドを使用して、テスト目的で意図的にサンプルリークを起こすサンプルアプリを作成します。

vega project generate --template hello-world --name sampleapp --packageId com.amazondeveloper.sampleapp --outputDir sampleapp

app.jsファイルの例

次のファイルには、メモリリークのシナリオを実行するサンプルアプリのコードスニペットと、メモリリークを作成、クリア、分析するツールが含まれています。

import React, { useRef, useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';

export default function App() {
  const detachedDOMRef = useRef([]);
  const [snapshotInfo, setSnapshotInfo] = useState(null);
  const [focusedButton, setFocusedButton] = useState(null);

  // Function to create detached DOM elements (strong memory leak)
  const createDetachedDOMLeak = () => {
    console.log('Creating detached DOM elements...');
    const detachedElements = [];
    for (let i = 0; i < 10000; i++) {
      // デタッチされたDOM要素を表すオブジェクトを作成します。
      const element = { id: i, name: `デタッチされた要素${i}` };
      detachedElements.push(element);
    }
    detachedDOMRef.current = detachedElements; // 実際のDOMではなく参照を保持
    console.log('10,000要素のデタッチされたDOMによるリークが作成されました');
  };

  // メモリリークをクリアする関数
  const clearLeaks = () => {
    console.log('すべてのリークをクリアします...');
    detachedDOMRef.current = []; // 参照をクリア
    console.log('すべてのリークがクリアされました');
  };

  // ヒープスナップショットの取得のシミュレート
  const takeHeapSnapshot = async () => {
    console.log('ヒープスナップショットを取得します...');
    const snapshot = {
      detachedDOMSize: detachedDOMRef.current.length,
    };
    if (global.__CollectHeapSnapshot__) {
      global.__CollectHeapSnapshot__();
    }
    setSnapshotInfo(snapshot);
    console.log('ヒープスナップショットが取得されました：', snapshot);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>メモリリークのデモ</Text>

      <View style={styles.boundary}>
        <View style={styles.buttonRow}>
          <Pressable
            onPress={createDetachedDOMLeak}
            onFocus={() => setFocusedButton('createDetachedDOMLeak')}
            onBlur={() => setFocusedButton(null)}
            style={[
              focusedButton === 'createDetachedDOMLeak' ? styles.focusedButton : styles.button,
            ]}
          >
            <Text style={styles.buttonText}>デタッチされたDOMによるリークを作成</Text>
          </Pressable>

          <Pressable
            onPress={clearLeaks}
            onFocus={() => setFocusedButton('clearLeaks')}
            onBlur={() => setFocusedButton(null)}
            style={[
              focusedButton === 'clearLeaks' ? styles.focusedButton : styles.button,
            ]}
          >
            <Text style={styles.buttonText}>リークをクリア</Text>
          </Pressable>

          <Pressable
            onPress={takeHeapSnapshot}
            onFocus={() => setFocusedButton('takeHeapSnapshot')}
            onBlur={() => setFocusedButton(null)}
            style={[
              focusedButton === 'takeHeapSnapshot' ? styles.focusedButton : styles.button,
            ]}
          >
            <Text style={styles.buttonText}>スナップショットを取得</Text>
          </Pressable>
        </View>
      </View>

      {snapshotInfo && (
        <Text style={styles.snapshotText}>
          Snapshot taken: {snapshotInfo.detachedDOMSize} detached DOM elements
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#e0e0e0',
  },
  text: {
    fontSize: 24,
    marginBottom: 20,
    textAlign: 'center',
  },
  boundary: {
    padding: 20,
    borderWidth: 2,
    borderColor: '#333',
    backgroundColor: '#ffffff',
    borderRadius: 10,
 },
 buttonRow: {
 flexDirection: 'row',
 justifyContent: 'center',
 },
 button: {
 width: 150,
 height: 50,
 marginHorizontal: 5,
 borderRadius: 5,
 alignItems: 'center',
 justifyContent: 'center',
 backgroundColor: '#007bff',
 },
 focusedButton: {
 backgroundColor: '#003f7f',
 color: '#000', // フォーカス時は黒いテキスト
 },
 buttonText: {
 color: '#fff',
 fontSize: 16,
 },
 snapshotText: {
 marginTop: 20,
 fontSize: 16,
 color: '#333',
 },
});

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

次のコマンドを実行します。

npm install
npm run build:app

手順3：アプリを実行する

Vega仮想デバイスを実行します。
vega virtual-device start

Vega仮想デバイス上でアプリを実行します。

vega run-app <VPKGのパス> <アプリID> -d VirtualDevice

手順4：ヒープスナップショットをキャプチャしてコピーする

各スナップショットを取得する前に、ガベージコレクションをトリガーします。

 if (global.__GarbageCollect__) {
    // 古いオブジェクトを確実にクリーンアップするために2回呼び出します。
    global.__GarbageCollect__();
    global.__GarbageCollect__();
 }

アプリの実行中に [Take Snapshot] ボタンをクリックして、デバイス上のヒープスナップショットをキャプチャします。
[Create Detached DOM Leak] ボタンをクリックして、メモリリークを引き起こす要素を10,000個生成します。
スナップショットをもう一度取得します。
[Clear Leaks] ボタンをクリックして、メモリリークをシミュレートする要素を削除します。

最終的なスナップショットを取得します。さまざまなタイプのメモリリークを示すスクリーンショット。

[Take Snapshot] ボタンをクリックすると、スナップショットファイルが保存されているシステム上の場所がログに記録されます。

ls /home/app_user/packages/<app>/data/ -l
total 39764
-rw-r—r-- 1 app_user 30097 26 2024-10-17 08:56 shared_preferences.json
-rw-r—r-- 1 app_user 30097 6335533 2024-10-17 08:37 snapshot-17-10-2024-08-37-08.heapsnapshot
-rw-r—r-- 1 app_user 30097 8081408 2024-10-17 08:37 snapshot-17-10-2024-08-37-25.heapsnapshot
-rw-r—r-- 1 app_user 30097 6336519 2024-10-17 08:39 snapshot-17-10-2024-08-39-27.heapsnapshot
-rw-r—r-- 1 app_user 30097 9492333 2024-10-17 08:39 snapshot-17-10-2024-08-39-36.heapsnapshot
-rw-r—r-- 1 app_user 30097 10434707 2024-10-17 08:40 snapshot-17-10-2024-08-39-55.heapsnapshot

スナップショットファイルをローカルコンピューターにコピーします。取得したヒープスナップショットを使用して、潜在的なメモリリークを分析して特定できます。

手順5：MemLabを実行する

スナップショットに対してMemLabを実行するには、次のコマンド形式を使用します。

memlab find-leaks --baseline <初期のスナップショット> --target <リーク後のスナップショット> --final <クリア後のスナップショット> --trace-all-objects

このコマンドを実行すると、MemLabは次のアクションを実行します。

すべてのスナップショットをメモリに読み込みます。
ベースラインとターゲットのスナップショットを比較して、新しいオブジェクトを特定します。
特定した新しいオブジェクトを分析して、最終スナップショットまで存続しているかどうかを確認します。
保持パターンを理解するためにオブジェクト参照をトレースします。

MemLabコマンド構造の説明

memlab find-leaksコマンドは、メモリリークを特定するMemLabのコア機能です。以下のパラメーターはオプションです。

—baseline <初期のスナップショット> - 潜在的なリークが取り込まれる前に取得した、初期のヒープスナップショットを指定します。基準点として使用されます。
—target <リーク後のスナップショット> - 潜在的なリークが取り込まれた後に取得したスナップショットを指定します。MemLabはこのスナップショットをベースラインと比較して、リークの可能性がある新しいオブジェクトを特定します。
- リークのクリアを試みた後に取得したスナップショットを指定します。MemLabはこの情報を使用して、オブジェクトが本当にリークしているか、それとも正常なアプリ状態の一部であるかを判断します。
--trace-all-objects - このオプションは、すべてのオブジェクトをトレースするようにMemLabに指示します。これによってより包括的な分析が提供されますが、処理時間が長くなる可能性があります。

MemLabの出力例

memlab find-leaks --baseline snapshot-17-10-2024-08-27-13.heapsnapshot --target snapshot-17-10-2024-08-27-29.heapsnapshot --final snapshot-17-10-2024-08-27-52.heapsnapshot --trace-all-objects
Alive objects allocated in target page:
┌─────────┬─────────────────────────────────────────────────────────┬───────────┬───────┬──────────────┐
│ (index) │ name │ type │ count │ retainedSize │
├─────────┼─────────────────────────────────────────────────────────┼───────────┼───────┼──────────────┤
│ 0 │ 'JSArray'  │ 'object' │ 305  │ '1.1MB' │
│ 1 │ 'JSObject(id, name)' │ 'object' │ 10000 │ '1.1MB' │
│ 2 │ 'DictPropertyMap'  │ 'object' │ 79 │ '122.1KB' │
│ 3 │ 'HiddenClass'  │ 'object' │ 71 │ '92.6KB'  │
│ 4 │ 'BoxedDouble'  │ 'object' │ 1511 │ '36.2KB'  │
│ 5  │ 'JSObject(memoizedState, baseState, baseQueue, queu...' │ 'object' │ 498  │ '23.9KB'  │
│ 6 │ 'Environment'  │ 'object' │ 287  │ '14.7KB'  │
│ 7 │ 'JSFunction' │ 'closure' │ 185  │ '8.8KB' │
│ 8 │ 'JSObject(validated)'  │ 'object' │ 155  │ '7.4KB' │
│ 9  │ 'JSObject($$typeof, type, key, ref, props, ...)' │ 'object' │ 155  │ '7.4KB' │
│ 10 │ 'JSObject(tag, create, destroy, deps, next)' │ 'object' │ 132  │ '6.3KB' │
│ 11 │ 'Detached FiberNode' │ 'object' │ 12 │ '5.5KB' │
│ 12 │ 'JSObject(value, children)'  │ 'object' │ 66 │ '3.1KB' │
│ 13 │ 'HashMapEntry' │ 'object' │ 61 │ '2.9KB' │
│ 14 │ 'JSObject(style, children)'  │ 'object' │ 58 │ '2.7KB' │
│ 15 │ 'warnAboutAccessingRef'  │ 'object' │ 54 │ '2.5KB' │
│ 16 │ 'warnAboutAccessingRef'  │ 'closure' │ 54 │ '2.5KB' │
│ 17 │ 'JSObject(lastEffect, stores)' │ 'object' │ 48 │ '2.3KB' │
│ 18 │ 'HiddenClass(Dictionary)'  │ 'object' │ 45 │ '2.1KB' │
│ 19 │ 'HostObject' │ 'object' │ 43 │ '2KB' │
└─────────┴─────────────────────────────────────────────────────────┴───────────┴───────┴──────────────┘
Sampling trace due to a large number of traces:
 Number of Traces: 10100
 Sampling Ratio: 49.5%
MemLab found 5 leak(s)
Number of clusters loaded: 0

--Similar leaks in this run: 4956--
--Retained size of leaked objects: 1.1MB--
[(GC roots)] (synthetic) @3 [2.8MB]
 —-1 (element)---> [(Registers)] (synthetic) @5 [2.2KB]
 —-57 (element)---> [Environment] (object) @226263 [48 bytes]
 —-0 (internal)---> [JSObject(current)] (object) @47915 [1.1MB]
 —-directProp0 (internal)---> [JSArray] (object) @222185 [1.1MB]
 —-9999 (element)---> [JSObject(id, name)] (object) @191663 [112 bytes]
 -—class (internal)---> [HiddenClass] (object) @117709 [300 bytes]

--Similar leaks in this run: 22--
--Retained size of leaked objects: 2.9KB--
[(GC roots)] (synthetic) @3 [2.8MB]
 —-1 (element)---> [(Registers)] (synthetic) @5 [2.2KB]
 —-2 (element)---> [Detached FiberNode RCTView] (object) @69 [384 bytes]
 —-pendingProps (property)---> [JSObject(accessibilityViewIsModal, isTVSelectable, hitSlop, alexaEntityType, alexaExternalIds, ...)] (object) @228861 [680 bytes]
 —-onBlur (property)---> [onBlur] (closure) @45137 [128 bytes]
 —-prototype (property)---> [onBlur] (object) @224283 [48 bytes]

--Similar leaks in this run: 11--
--Retained size of leaked objects: 560 bytes--
[(GC roots)] (synthetic) @3 [2.8MB]
 —-1 (element)---> [(Registers)] (synthetic) @5 [2.2KB]
 —-34 (element)---> [JSObject(Dictionary)] (object) @133 [26.2KB]
 —-console (property)---> [JSObject(error, info, log, warn, trace, ...)] (object) @78609 [4.8KB]
 —-directProp1 (internal)---> [JSFunction] (closure) @87937 [256 bytes]
 —-environment (internal)---> [Environment] (object) @87913 [208 bytes]
 —-parentEnvironment (internal)---> [Environment] (object) @87801 [32 bytes]
 —-0 (internal)---> [JSObject(enable, disable, registerBundle, log, setup)] (object) @85777 [3.2KB]
 —-directProp4 (internal)---> [setup] (closure) @88235 [48 bytes]
 —-environment (internal)---> [Environment] (object) @88203 [2.6KB]
 —-11 (internal)---> [JSArray] (object) @88225 [2.1KB]
 —-4 (element)---> [JSArray] (object) @222491 [200 bytes]

--Similar leaks in this run: 1--
--Retained size of leaked objects: 64 bytes--
[(GC roots)] (synthetic) @3 [2.8MB]
 —-1 (element)---> [(Registers)] (synthetic) @5 [2.2KB]
 —-57 (element)---> [Environment] (object) @226263 [48 bytes]
 —-parentEnvironment (internal)---> [Environment] (object) @47913 [2KB]
 —-7 (internal)---> [JSObject(container, text, boundary, buttonRow, button, ...)] (object) @77759 [712 bytes]
 —-snapshotText (property)---> [JSObject(marginTop, fontSize, color)] (object) @77737 [708 bytes]
 —-class (internal)---> [HiddenClass] (object) @27707 [660 bytes]
 —-forInCache (internal)---> [SegmentedArray] (array) @224539 [64 bytes]

--Similar leaks in this run: 10--
--Retained size of leaked objects: 40 bytes--
[(GC roots)] (synthetic) @3 [2.8MB]
 —-3 (element)---> [(RuntimeModules)] (synthetic) @9 [15.4KB]
 —-378 (element)---> [, ] (symbol) @117483 [4 bytes]

MemLabの出力の解釈

MemLabの出力で重要な要素は以下のとおりです。

Alive objects allocated in target page

このセクションには、アプリの操作後または変更後にまだメモリに存在しているオブジェクトが表示されます。この一覧は潜在的なメモリ保持の問題を示し、各オブジェクトについて次の詳細を含んでいます。

name - オブジェクト名またはその構造型。
type - オブジェクトがobject（オブジェクト：JSObject、JSArrayなど）であるか、closure（クロージャ：メモリを保持する関数）であるか。
count - 各オブジェクト型のインスタンスの数。
retainedSize - これらのオブジェクトによって保持されているメモリの合計。

例

JSArray (Object Type)（オブジェクト型）- 305個のインスタンスがあり、1.1MBのメモリが保持されています。
JSObject(id, name) - 10,000個のインスタンスがあり、同じく1.1MBのメモリが保持されています。

Sampling trace due to a large number of traces

このセクションでは、10,100個のトレースがあるため、MemLabは49.5％のサンプリングを使用して効率的な処理を行ったことを確認できます。

MemLab found X leaks

この例では、MemLabは5件のリークを発見しました。出力される一覧には、各メモリリークについて次の情報が含まれます。

類似リークの数 - ツールが同様のリークパターンを検出した回数。
リークオブジェクトの保持サイズ - リークのあったオブジェクトによって保持されているメモリの合計。
リークのトレース - オブジェクトがどのように相互接続されているかと、ガベージコレクターがそれらを回収できない理由。

ガベージコレクション（GC）ルート

これらは、メモリに残っていて、ほかのオブジェクトのガベージコレクションを妨げているオブジェクトのエントリポイントです。このトレースは、GCルートが参照を通じてどのようにオブジェクトを存続させているかを、JSObjects、JSArray、クロージャー参照へと戻るパスと共に示します。例1 リークパターン：4,956件の同様のリークがあり、1.1MBのメモリが保持されています。 JSObject(current) → JSArray → JSObject(id, name) このトレースは、JSArrayが10,000個のJSObject(id, name)オブジェクトへの参照を保持していて、これらのオブジェクトのガベージコレクションを妨げていることを示します。例2 リークパターン：22件の同様のリークがあり、2.9KBのメモリが保持されています。トレースには、React Nativeのビューシステムの一部であるDetached FiberNode RCTViewオブジェクトが含まれています。onBlurのようなイベントハンドラでは、コードでオブジェクトを削除した後も不要なオブジェクトが保持されるため、リークが発生する可能性があります。

MemLabによるスナップショットの分析

Alive objects allocated in target pageセクションを調べて、保持されているオブジェクトを確認します。
「MemLab found [X] leak(s)」という行で、MemLabによって明確に特定されたリークの数を確認します。各リークについて以下を確認します。
- 同様のリークの数と合計保持サイズを確認します。
- オブジェクトのトレースを調べて、システムがどのようにオブジェクトを保持しているかを把握します。
- デタッチされたDOM要素や大きい配列など、想定外の保持に注意します。

リークへの対処

アプリ内のリークに対処するには、次の操作を実行します。

リークのあるオブジェクトのパターン（デタッチされたDOM要素、クリアされないイベントリスナーなど）を特定します。
アプリ内で対応するコードを特定します。
修正を実装します。たとえば、コンポーネントを適切にマウント解除し、配列をクリアし、イベントリスナーを削除します。

修正の確認

修正されたことを確認するには、次の操作を実行します。

修正を実装したアプリを再ビルドし、再実行します。
スナップショットの取得と分析のプロセスを繰り返します。
以前に特定されたリークがMemLabの出力に表示されなくなったことを確認します。

​前提条件

​手順1：サンプルアプリを作成する

​app.jsファイルの例

​手順2：アプリをビルドする

​手順3：アプリを実行する

​手順4：ヒープスナップショットをキャプチャしてコピーする

​手順5：MemLabを実行する

​MemLabコマンド構造の説明

​MemLabの出力例

​MemLabの出力の解釈

​Alive objects allocated in target page

​Sampling trace due to a large number of traces

​MemLab found X leaks

​ガベージコレクション（GC）ルート

​MemLabによるスナップショットの分析

​リークへの対処

​修正の確認

​関連トピック