ロギング

I gave this lightning talk at React Native Meetup #22.

Transcript

1. ϩΪϯά Jamie Birch δΣΠϛʔ ό ʔ ν ໊ බ
2. React Native ͷϩΪϯά͕଍Γͳ͍ w w w w
3. ୈҰͷྫ ΦϒδΣΫτɾϩΪϯά
4. const result = hoge(); // ᶃ ίϯιʔϧ console.log(result); // ᶄ όοΫΤϯυ fetch('https://ore-no-backend.jp', { method: 'POST', body: `${result}`, }); 192.168.1.1 - - 200 POST / [object Object] (NOBRIDGE) LOG {"1": {"2": {"3": [Object]}}}
5. ཧ૝ͳΞ΢τϓοτ {"1": {"2": {"3": { "4": 1234}}}} ᶃ Χϥʔ ᶄ ೖΕࢠʹ͞ΕͨཁૉΛද͢
6. ୈೋͷྫ ΤϥʔɾϩΪϯά
7. try { hoge(); } catch (error) { // ᶃ ίϯιʔϧ console.error(error); // ᶄ όοΫΤϯυ fetch('https://ore-no-backend.jp', { method: 'POST', body: `${error}`, }); } 192.168.1.1 - - 200 POST / Error hoge (NOBRIDGE) ERROR [Error: hoge]
8. Error: hoge at file:///Users/shirakaba/demo.js:4:23 at ModuleJob.run (node:internal/modules/esm/module_job:274:25) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:644:26) at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:117:5) { [cause]: Error: fuga at file:///Users/shirakaba/demo.js:4:51 at ModuleJob.run (node:internal/modules/esm/module_job:274:25) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:644:26) at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:117:5) } ཧ૝ͳΞ΢τϓοτ ᶃ ελοΫτϨʔε ᶄ ݪҼ
9. JSON.stringify() Λ࢖͑͹ʁ
10. JSON.stringify() ͷऑ఺ console.log(JSON.stringify(error)); (NOBRIDGE) LOG {} const hoge = { fuga: {} }; hoge.fuga = hoge; console.log(JSON.stringify(hoge)); (NOBRIDGE) ERROR [TypeError: cyclical structure in JSON object]
11. ͡ΌɺͲ͏͢Ε͹͍͍͔ʁ
12. util.inspect() Λ঺հ͠Α͏ • import { inspect } from 'node:util'; ͸ Node.js ͷίΞϞδϡʔϧɻ • σʔλܕΛέʔεόΠέʔεͰจࣈྻʹγϦΞϥΠζ͢ΔͨΊͷ΋ͷɻ • ԿͰ΋ରԠͰ͖Δʂ • React Native Ͱ΋࢖͑Δͱ͍͍ͳ…
13. ˎ5000ߦҎ্ͷίʔυ Λநग़ͨ͠
14. import { inspect } from "util-inspect-isomorphic"; // ⭐ error.causeΛγϦΞϥΠζ͢Δ ⭐ console.error(inspect(new Error("hoge", { cause: new Error("fuga") }))); // Error: hoge // at file:///Users/shirakaba/demo.js:4:23 // at ModuleJob.run (node:internal/modules/esm/module_job:274:25) // at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:644:26) // at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:117:5) { // [cause]: Error: fuga // at file:///Users/shirakaba/demo.js:4:51 // at ModuleJob.run (node:internal/modules/esm/module_job:274:25) // at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:644:26) // at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:117:5) // } // ⭐ ਂ͘ωετͨ͠ΦϒδΣΫτΛϓϦϯτ͢Δ ⭐ console.log(inspect({ a: { b: { c: { d: {} } } } }, { depth: null })); // { // a: { b: { c: { d: {} } } } // } // ⭐ ΧϥʔΛ෇͚Δ ⭐ console.log(inspect(["hoge", new Date(), true], { colors: true })); // [ 'hoge', 2025-06-07T11:35:11.755Z, true ] // ⭐ φϯόʔʹΞϯμʔείΞΛ෇͚Δ ⭐ console.log(inspect(1000000000, { numericSeparator: true })); // 1_000_000_000
15. ݁࿦ • σʔλܕΛద੾ʹϩάग़ྗ͢Δʹ͸ɺέʔεόΠέʔεͰରԠ͕ඞཁɻ • React Native Ͱ͸ error.cause Λϩάʹग़ͤͳ͍ͨΊɺ΄ͱΜͲ࢖ΘΕͯ ͍ͳ͍͸ͣɻ • util-inspect-isomorphic Λ࢖͏ͱɺԿͷσʔλܕͰ΋ରԠͰ͖Δɻ
16. ϓϩϑΟϧ ౦ژ ͷΤϯδχΞ @shirakaba @birch_js @shirakaba.bsky.social ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Jamie Birch δΣΠϛʔ ό ʔ ν ໊ බ