Reactコンポーネントエラースタックトレースの解析

Reactコンポーネントエラースタックトレースの理解

Reactアプリケーションはコンポーネント名、レンダリングライフサイクルメソッド、コールスタック内のフックを含む独特のスタックトレースを生成します。レンダリング中にエラーが発生すると、ReactはJavaScriptエラーとエラーに至ったコンポーネントツリーパスを示すコンポーネントスタックトレースの両方を表示します。

Reactエラースタックトレースフォーマット

Error: Objects are not valid as a React child (found: object with keys {name})
    at throwOnInvalidObjectType (react-dom.development.js:14887:9)
    at createChild (react-dom.development.js:15113:7)
    at UserProfile (./src/components/UserProfile.tsx:28:15)
    at Dashboard (./src/pages/Dashboard.tsx:42:8)
    at App (./src/App.tsx:12:5)

コンポーネントスタック vs JavaScriptスタック

Reactは2種類のスタック情報を提供します：

1. JavaScriptコールスタック --- 関数実行順序を示す標準的なV8/SpiderMonkeyコールスタック
2. コンポーネントスタック --- エラーに至ったコンポーネントツリー階層を示すReact固有のトレース

コンポーネントスタックは関数呼び出し順序だけでなく、コンポーネントの親子関係を示すため特に価値があります。

一般的なReactエラーパターン

• Objects are not valid as a React child --- プロパティではなくオブジェクトを直接レンダリング
• Maximum update depth exceeded --- useEffect内のsetStateからの無限再レンダリングループ
• Invalid hook call --- 関数コンポーネント外でフックを呼び出し、または間違った順序
• Cannot update a component while rendering a different component --- レンダリング中の同期的な状態更新

エラーバウンダリとの統合

Reactエラーバウンダリ（componentDidCatch）はエラーとコンポーネントスタックを含むerrorInfoオブジェクトの両方を受け取ります。このコンポーネントスタックはJavaScriptスタックとは別のもので、ルートから失敗したコンポーネントまでのコンポーネント階層をトレースします。