DevTracePad↗
日本語 ⌄
English简体中文日本語

実践ノート / エラー分析

秘密を渡さずに背景を伝える

失敗の構造を残しながら、識別情報を取り除く実践的な手順。

コピーから始める

唯一の元ログを編集せず、必要な抜粋のコピーを使います。正確な時刻で顧客セッションが分かる場合は相対時間にします。同じアカウントは常に USER_A とするなど、置換を統一します。出現ごとに別の値へ置き換えると、調べたい関連が失われます。

よくある保存場所を確認する

認証ヘッダー、Cookie、接続文字列、URL のクエリー、ローカルパスを含むフレームを確認します。JSON 本文や設定にも秘密が入り得ます。REDACTED に置き換える際は値全体を削除します。自動検出では特殊な形式を見逃すため、目視確認も必要です。

型と関係は維持する

文字列と数値の取り違えが原因なら、両方を同じ置換文字列にしないでください。null、欠落、空の値を区別します。ホスト名を example.test に替えても、スキームやポートの有無は保ちます。目的は見た目の整理ではなく、同じ構造的な挙動を持つ合成例を作ることです。

送信先を確認する

送信前に提供者名とプライバシー説明を読みます。作成済みの例はブラウザー内で動作し、オンライン AI は選んだ原文と背景をサーバー経由で送ります。アプリは入力履歴を保存しませんが、ホスティングのログと提供者側の保持は別です。外部処理が認められない場合は、合成例か承認された環境を使ってください。

具体例で考える

エラー分析

作成済みの例:この固定結果はサンプル原文にのみ対応し、AI のリアルタイム回答ではありません。

原文

TypeError: Cannot read properties of undefined (reading "map")
 at ProductList (ProductList.jsx:18)
const [products, setProducts] = useState();
return products.map(product => <li key={product.id}>{product.name}</li>);

解説付きの結果

観察
初回描画で products.map を呼び出しますが、useState() の初期値は undefined です。

考えられる原因
初期状態が配列ではありません。この抜粋はその説明を支持しますが、API の応答形式までは確認できません。

次の確認
setProducts の前で応答の構造を調べます。配列は応答自体でしょうか、それとも response.items でしょうか。

変更案
useState([]) で初期化し、読み込み中・空データ・失敗を分けて扱います。設定前に応答を検証してください。

検証
初回描画、空の応答、正常な応答、通信失敗を確認します。この例ではコンポーネントを実行していません。