Sentry のブレッドクラム：エラー直前の足跡

Sentry のブレッドクラム

Sentry のブレッドクラム：addBreadcrumb、フィルター、上限 | We.Inc

JavaScript SDK での Sentry ブレッドクラムの仕組み。自動と手動のブレッドクラム、beforeBreadcrumb での絞り込み、maxBreadcrumbs のデフォルト値100、機密情報の除去を解説します。

Sentry のブレッドクラムは、エラーの直前に起きたことの小さな記録です。クリック、ネットワークリクエスト、コンソールメッセージ、ページの遷移などが含まれます。SDK が多くを自動で収集し、Sentry.addBreadcrumb() で独自のものを追加でき、次のエラーイベントに添付されます。JavaScript SDK はデフォルトで最新の100件を保持します。

ブレッドクラムの設定の概要

設定または呼び出し
役割
デフォルト

maxBreadcrumbs
保持するブレッドクラムの数

beforeBreadcrumb
保存前に各ブレッドクラムを編集または破棄する
未設定

Sentry.addBreadcrumb()
独自のブレッドクラムを記録する
該当なし

fatal、error、warning、log、info、debug のいずれか
未設定

お客様がサイトでエラーに遭遇したとき、スタックトレースはコードがどこで壊れたかは教えてくれますが、お客様がその前に何をしたかは教えてくれません。ブレッドクラムはその隙間を埋めます。このガイドはブラウザー向け JavaScript SDK を対象としています。他の Sentry SDK も同じ考え方ですが、それぞれ独自のデフォルト値があります。

SDK はクリックとキー入力、fetch と XHR のリクエスト、コンソールの呼び出し、URL の変更を監視し、それぞれをブレッドクラムに変換します。
サインイン後やクーポン適用後など、自分のコードから Sentry.addBreadcrumb() で追加することもできます。
beforeBreadcrumb を設定している場合、新しいブレッドクラムはまずそこを通ります。null を返すと破棄されます。
保持される足跡は maxBreadcrumbs が上限です。リストが上限を超えると、SDK は古いものから切り捨てます。
エラーが捕捉されると、その時点の足跡がイベントに添付され、Issue ページに表示されます。

auth、cart、payment のように短く安定したカテゴリを使えば、Issue ページで足跡を絞り込めます。
詳細はメッセージではなく data に入れましょう。そうすればフィールドとして表示されます。
パスワード、カード番号、住所全体をブレッドクラムに入れないでください。Sentry 自身のガイダンスでも、コンソールログがブレッドクラムになる場合は個人情報をログに出さないよう求めています。
コンソールの出力が多い場合は、全体の maxBreadcrumbs を下げるのではなく、beforeBreadcrumb でコンソールのブレッドクラムを破棄しましょう。
maxBreadcrumbs を0にするとブレッドクラムは無効になります。SDK は0以下の値ではすぐに処理を終えます。

よくある質問

maxBreadcrumbs のデフォルト値はいくつですか？

100です。Sentry のドキュメントでは JavaScript SDK のデフォルト値を100としており、SDK のソースコードもオプションが未設定の場合に同じ数値を使います。

自動で記録されるブレッドクラムはどれですか？

ブラウザー SDK では、DOM 要素へのクリックとキー入力、XHR と fetch のリクエスト、コンソール API の呼び出し、すべての URL の変更です。

ブレッドクラムにはどんなキーを持たせられますか？

type、category、message、level、timestamp、data です。ドキュメントによると、それ以外のキーは処理中に破棄されます。

ブレッドクラムを記録しないようにするにはどうすればよいですか？

Sentry.init で beforeBreadcrumb を設定します。これは各ブレッドクラムと任意のヒントを受け取り、変更したブレッドクラムを返すか、null を返して破棄できます。

ブレッドクラムは単独で送信されますか？

いいえ。メモリ上に保持され、エラーなど、SDK が次に送信するイベントに添付されます。

追加する価値のある手動ブレッドクラム

自動のブレッドクラムは、ブラウザーが何をしたかを教えてくれます。手動のブレッドクラムは、業務の流れで何が起きたかを教えてくれます。お客様が速達配送を選んだ、割引コードが適用された、予約日が選ばれた、といったことです。
これらはサポート担当者が最初に確認する場面なので、記録しておけば質問のやり取りを1回分減らせます。

個人データを含めないために

ブレッドクラムには、残すつもりのなかったテキストが入り込みがちです。コンソールの行に含まれるメールアドレスや、URL に含まれる検索語などです。保存される前に beforeBreadcrumb で取り除き、イベントの残りの部分には beforeSend を使いましょう。
Sentry は UI で設定できるサーバー側のデータスクラビングも提供しており、二重の安全網として機能します。

コード例

手動のブレッドクラムを追加する

カテゴリ、短いメッセージ、レベル、data の下の追加フィールドを付けて、業務上のステップを記録します。

ブレッドクラムを絞り込んで整える

コンソールのノイズを破棄し、メールアドレスを伏せ、変更しやすいようにデフォルトの上限を明示的に書いておきます。

ブレッドクラムの足跡シミュレーター

いくつかのイベントを記録してオプションを設定し、エラーを発生させて、どのブレッドクラムが一緒に送られるかを確認しましょう。これはブラウザー内のシミュレーションで、Sentry には何も送信されません。

イベントを記録

「カートに追加」をクリック

カートのリクエストが完了

console.log の呼び出し

チェックアウトへ移動

お客様がサインイン

button#add-to-cart

カートの合計を再計算しました

[email protected] としてサインインしました

maxBreadcrumbs

beforeBreadcrumb でコンソールのブレッドクラムを破棄

メッセージ内のメールアドレスを置き換える

エラーを発生させる

足跡をクリア

現在の足跡（{n}件を保持）

まだブレッドクラムはありません。上でイベントを記録してください。

上限により古いブレッドクラム{n}件が破棄されました。

beforeBreadcrumb により{n}件のブレッドクラムが削除されました。

エラーイベントに添付されたブレッドクラム

これらの設定に対応する Sentry.init のオプション

無料で始める · クレジットカード不要

製品

AI ホームページ作成ツール：作りたいサイトを普段の言葉で伝えるだけで、数分で公開
ホワイトラベルプラットフォーム：自社ブランド、自社ドメイン、自社の利益で運営
エンタープライズ：SSO、個別の SLA、専任サポート
開発者向け API：自社の SaaS にサイト生成機能を組み込み

ご利用いただける方

制作会社・代理店向け：自社ブランドで再販
フリーランス向け：自分ブランドのビルダーを持つ
ホスティング事業者向け：サービスにビルダーを追加
SaaS プラットフォーム向け：API でサイト作成を組み込み
スタートアップ向け
金融サービス向け
医療・ヘルスケア向け

機能

リソース

会社情報

サイトマップを見る

Sentry のブレッドクラム：エラー直前の足跡