メモリリークの検出

  1 import React, { useRef, useState } from 'react';
  2 import { Pressable, StyleSheet, Text, View } from 'react-native';
  3 
  4 export default function App() {
  5   const detachedDOMRef = useRef([]);
  6   const [snapshotInfo, setSnapshotInfo] = useState(null);
  7   const [focusedButton, setFocusedButton] = useState(null);
  8 
  9   // デタッチされたDOM要素を作成する関数（強力なメモリリーク）
 10   const createDetachedDOMLeak = () => {
 11     console.log('Creating detached DOM elements...');
 12     const detachedElements = [];
 13     for (let i = 0; i < 10000; i++) {
 14       // デタッチされたDOM要素を表すオブジェクトを作成します。
 15       const element = { id: i, name: `デタッチされた要素${i}` };
 16       detachedElements.push(element);
 17     }
 18     detachedDOMRef.current = detachedElements; // 実際のDOMではなく参照を保持
 19     console.log('10,000要素のデタッチされたDOMによるリークが作成されました');
 20   };
 21 
 22   // メモリリークをクリアする関数
 23   const clearLeaks = () => {
 24     console.log('すべてのリークをクリアします...');
 25     detachedDOMRef.current = []; // 参照をクリア
 26     console.log('すべてのリークがクリアされました');
 27   };
 28 
 29   // ヒープスナップショットの取得のシミュレート
 30   const takeHeapSnapshot = async () => {
 31     console.log('ヒープスナップショットを取得します...');
 32     const snapshot = {
 33       detachedDOMSize: detachedDOMRef.current.length,
 34     };
 35     if (global.__CollectHeapSnapshot__) {
 36       global.__CollectHeapSnapshot__();
 37     }
 38     setSnapshotInfo(snapshot);
 39     console.log('ヒープスナップショットが取得されました：', snapshot);
 40   };
 41 
 42   return (
 43     <View style={styles.container}>
 44       <Text style={styles.text}>メモリリークのデモ</Text>
 45 
 46       <View style={styles.boundary}>
 47         <View style={styles.buttonRow}>
 48           <Pressable
 49             onPress={createDetachedDOMLeak}
 50             onFocus={() => setFocusedButton('createDetachedDOMLeak')}
 51             onBlur={() => setFocusedButton(null)}
 52             style={[
 53               focusedButton === 'createDetachedDOMLeak' ? styles.focusedButton : styles.button,
 54             ]}
 55           >
 56             <Text style={styles.buttonText}>デタッチされたDOMによるリークを作成</Text>
 57           </Pressable>
 58 
 59           <Pressable
 60             onPress={clearLeaks}
 61             onFocus={() => setFocusedButton('clearLeaks')}
 62             onBlur={() => setFocusedButton(null)}
 63             style={[
 64               focusedButton === 'clearLeaks' ? styles.focusedButton : styles.button,
 65             ]}
 66           >
 67             <Text style={styles.buttonText}>リークをクリア</Text>
 68           </Pressable>
 69 
 70           <Pressable
 71             onPress={takeHeapSnapshot}
 72             onFocus={() => setFocusedButton('takeHeapSnapshot')}
 73             onBlur={() => setFocusedButton(null)}
 74             style={[
 75               focusedButton === 'takeHeapSnapshot' ? styles.focusedButton : styles.button,
 76             ]}
 77           >
 78             <Text style={styles.buttonText}>スナップショットを取得</Text>
 79           </Pressable>
 80         </View>
 81       </View>
 82   
 83       {snapshotInfo && (
 84         <Text style={styles.snapshotText}>
 85           スナップショットが作成されました：デタッチされたDOM要素{snapshotInfo.detachedDOMSize}個
 86         </Text>
 87       )}
 88     </View>
 89   );
 90 }   
 91       
 92 const styles = StyleSheet.create({
 93   container: {
 94     flex: 1,
 95     justifyContent: 'center',
 96     alignItems: 'center',
 97     backgroundColor: '#e0e0e0',
 98   },
 99   text: {
100     fontSize: 24,
101     marginBottom: 20,
102     textAlign: 'center',
103   },
104   boundary: {
105     padding: 20,
106     borderWidth: 2,
107     borderColor: '#333',
108     backgroundColor: '#ffffff',
109     borderRadius: 10,
110  },
111  buttonRow: {
112  flexDirection: 'row',
113  justifyContent: 'center',
114  },
115  button: {
116  width: 150,
117  height: 50,
118  marginHorizontal: 5,
119  borderRadius: 5,
120  alignItems: 'center',
121  justifyContent: 'center',
122  backgroundColor: '#007bff',
123  },
124  focusedButton: {
125  backgroundColor: '#003f7f',
126  color: '#000', // フォーカス時は黒いテキスト
127  },
128  buttonText: {
129  color: '#fff',
130  fontSize: 16,
131  },
132  snapshotText: {
133  marginTop: 20,
134  fontSize: 16,
135  color: '#333',
136  },
137 });

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

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]