JavaScriptエラートラッキング

サイト全体のJavaScriptエラーを詳細なコンテキストで自動キャプチャし、より迅速なデバッグを実現します。

エラートラッキングの有効化

エラートラッキングは、ウェブサイトに対して有効にするとすぐに、キャッチされていないJavaScriptエラーと未処理のPromise拒否を自動的にキャプチャします。これは既にインストール済みの同じトラッキングスクリプトの一部です:

<script
  defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js"
></script>

有効化

エラートラッキングは各ウェブサイトの機能フラグで制御されます:

1. ウェブサイトのダッシュボードを開き、設定 → 詳細設定へ移動
2. 機能フラグの下で、エラートラッキングを有効にします

以上です。スクリプトに変更を加える必要はなく、フラグはトラッカーに自動的に配信されます。その後、新しいエラーがエラータブに表示され始めます。

キャプチャされる内容

エラー情報

各エラーについて、Zenovayは以下をキャプチャします:

データ	説明
エラーメッセージ	エラーの説明
エラー型	TypeError、ReferenceErrorなど
スタックトレース	完全なコールスタック
ソースファイル	エラーが発生したファイル
行と列	正確な位置
URL	エラーが発生したページ
ユーザーエージェント	ブラウザとOS
ビジターID	セッションへのリンク
タイムスタンプ	エラーが発生した時刻

コンテキストデータ

各エラーで動時にキャプチャされる追加コンテキスト:

• ページURLとリファラー
• ブラウザとデバイス情報
• ブレッドクラム: 最近のナビゲーション、クリック、コンソール出力、エラーにつながるネットワークリクエスト
• エラーが報告されたリリースと環境 (コードがこれらを設定している場合)

エラーの表示

エラーダッシュボード

ウェブサイトのダッシュボードを開き、エラータブを選択します (サイドバーの信頼性の下):

1. 時系列でのエラー数の傾向を確認
2. 発生回数別にトップエラーグループを表示
3. ステータスでフィルター
4. 詳細情報を得るには任意のエラーグループをクリック

エラーリスト

エラーリストに表示されます:

列	説明
エラー	エラーメッセージ (切詰)
数	発生回数
初回検出	初回発生時刻
最終検出	最後の発生
ステータス	未解決、調査中、解決済み、無視

エラー詳細ビュー

エラーグループをクリックして表示:

• 完全なエラーメッセージ
• スタックトレース
• 影響を受けたブラウザ、OS、デバイス
• エラーが発生するページ
• 発生タイムライン
• エラーにつながるブレッドクラム

また、グループのステータスを変更 (調査中、解決済み、無視としてマーク) して、まだ注意が必要なものに焦点を当てたリストを保つこともできます。

エラーの種類

一般的なエラー型

型	説明	一般的な原因
TypeError	型関連エラー	未定義プロパティへのアクセス
ReferenceError	未定義への参照	未定義変数
SyntaxError	無効な構文	不正なJSON、タイプミス
RangeError	範囲外の値	無効な配列長
URIError	URI処理エラー	不正なURI
EvalError	eval()エラー	非推奨、稀に表示

エラーはカテゴリ (JavaScript、ネットワーク、リソース、カスタム) と重大度でも分類され、ダッシュボードが優先順位付けを支援するために使用されます。

Promise拒否

// 未処理の拒否 - 自動的にキャプチャ
Promise.reject(new Error('Something failed'));

// 処理済みの拒否 - キャプチャなし
Promise.reject(new Error('Something failed'))
  .catch(error => handleError(error));

ソースマップ

ミニファイ済みコードは読み取り不可能なスタックトレースを生成します:

Error: undefined is not a function
    at a.b (main.min.js:1:2345)
    at c.d (main.min.js:1:3456)

アップロード済みのソースマップを使用すると、ダッシュボードは元のコードを表示できます:

Error: undefined is not a function
    at processPayment (checkout.js:45:12)
    at handleSubmit (form.js:123:8)

ソースマップはエラートラッキングAPIを経由してアップロードされ、release識別子によってエラーに関連付けられます。各リリースがマップとともに配信されるようにビルドパイプラインにアップロードを組み込みます。

完全なアップロード参照 (エンドポイント、フィールド、CIの例) については、「JSエラーのソースマップ」を参照してください。

エラーのフィルタリング

Zenovay自体のトラッキングインフラストラクチャから発生するエラーは自動的にドロップされるため、独自のコードからのエラーのみが表示されます。

残りのノイズを減らすため、ダッシュボード内で実行可能な項目に焦点を当てます:

• 無視ステータスを使用して、既知のサードパーティまたはブラウザー拡張機能エラーをサイレンスにして、リストを圧迫しないようにします。
• 修正したグループを解決して、新しい発生が目立つようにします。

エラーアラート

自動化ルールを使用してエラースパイク時に通知を取得:

1. ウェブサイトのダッシュボードを開き、設定 → オートメーションへ移動
2. エラー率閾値トリガーを使用してルールを作成
3. 閾値を設定 (1時間当たりのエラー)
4. 通知方法を選択: メール、webhook、またはSlack

エラー率が閾値を超えると、Zenovayは設定したアクションをトリガーします。

セッションリプレイとの統合

ウェブサイトでセッションリプレイが有効になっている場合、エラーを録画にリンクして、エラーが発生した時点でユーザーが何をしていたかを確認できます。セッションリプレイにはエラーのみトリガーモード (設定 → 詳細設定 → 機能フラグの下) があり、エラー周辺の特定のセッションを記録して、ストレージを価値のあるセッションに焦点を当てます。

これはあなたが理解するのに役立ちます:

• ユーザーが何をしていたか
• エラー発生時のUIの状態
• 再現するための手順

ベストプラクティス

エラーを意図的に処理

回復できるエラーをキャッチして処理し、できないエラーはトラッカーに浮かせます:

// 良い例: 具体的で回復可能な処理
try {
  const data = JSON.parse(userInput);
} catch (error) {
  if (error instanceof SyntaxError) {
    showValidationError('Invalid JSON format');
  } else {
    throw error; // 回復不可能 - キャプチャさせる
  }
}

ノイズリダクション

• ブラウザー拡張機能と既知のサードパーティエラーを無視としてマーク
• 修正を配信するときにグループを解決
• 重大度と発生数で優先順位付け

トラブルシューティング

エラーが表示されない

確認:

• エラーが発生する前にスクリプトが読み込まれます
• エラートラッキングが設定 → 詳細設定 → 機能フラグで有効になっています
• 広告ブロッカーがapi.zenovay.comへのリクエストをブロックしていません

スタックトレースが不足している

確認:

• ソースマップはミニファイ済みコード用にアップロードされます (「JSエラーのソースマップ」を参照)
• クロスオリジンスクリプトに対してCORSヘッダーが設定されています
• エラーはサードパーティスクリプトからではありません

エラーが多すぎる

検討:

• 既知のノイズが多いグループを無視としてマーク
• 最初に高ボリュームエラーを確認して修正

次のステップ

• エラーグループ
• スタックトレース分析
• パフォーマンスアラート