セッションリプレイの開発者ツールには、Webアプリケーションでの訪問者のセッション中にキャプチャされたデータを表示する技術パネルが用意されています。これらのツールは、技術チームが問題をより迅速に調査し、チーム間で繰り返しのコミュニケーションを減らすのに役立ちます。
開発者ツールには、リプレイプレーヤーで表示できる2種類のログ（コンソールログとネットワークログ）が含まれています。リプレイトリアージスキルは、これらのログを使用してリプレイからバグを診断し、AIクライアントのコード修正案を提案します。
注：開発者ツールは、インストールスクリプトを使用するウェブアプリでのみサポートされています。ブラウザ拡張機能アプリまたはモバイルアプリでは利用できません。
Agent Toolkitを使用している場合、［すべてのコンソールエラーとネットワークエラーを収集］設定により、リプレイが記録されていない場合でも、エラーレベルのコンソールログと失敗したネットワークリクエストが収集され、それらのエラーはリプレイとともに表示されます。詳細については、 「セッションコンテキストでFinの解決率を向上させる」を参照してください。
ユースケース
開発者ツールは、各Pendoリプレイの詳細な技術的コンテキストを提供し、プロダクト、サポート、エンジニアリングチームが問題をより効果的にトラブルシューティングするのに役立ちます。コンソールメッセージやネットワークアクティビティをPendoリプレイタイムラインと併せて表示することで、チームはエラーを迅速に特定し、顧客からのフォローアップの必要性を減らすことができます。これらは次の点で役立ちます。
- 失敗したインタラクションやアプリケーションエラーを文脈に基づいて調査する。
- ブラウザのコンソールメッセージとネットワークリクエストを一緒に確認し、根本原因を特定する。
- 技術データを検索・フィルタリングして、問題をより迅速に特定する。
- エンジニアリングチームが即座に対応できるコンテキスト付きのPendoリプレイを共有する。
コンソールログ
コンソールログを使用して、訪問者のセッション中にアプリによって記録されたメッセージを確認します。
仕組み
サブスクリプション管理者がアプリケーションのコンソールログを有効にした後、開発者ツールの切り替えをPendoリプレイプレーヤーでオンにすることができます。
コンソールログは、アプリケーションに対してコンソールログレベルで選択されたレベルを収集します。レベルを選択すると、それより重大度の高いすべてのレベルも含まれます。
-
Infoが収集するのは、
console.log()、console.info()、console.warn()、およびconsole.error()のメッセージです。これはデフォルトです。 -
警告は
console.warn()およびconsole.error()メッセージをキャプチャします。 -
エラーは
console.error()メッセージのみを収集し、パフォーマンスへの影響を最小限に抑えます。
エラーレベルには、捕捉されなかった例外、処理されなかったプロミス拒否、および強制されたコンテンツセキュリティポリシー（CSP）違反も含まれます。報告のみのCSP違反は、警告レベルで記録されます。選択していないレベルは、訪問者のブラウザから送信されることはありません。コンソールログでは、ネットワーク障害や強制エラーなど、ブラウザによって生成されたその他のメッセージは収集されません。
Pendoは、取得されたコンソールログからこれらの値を自動的に削除します。
- IPアドレス。
- 社会保障番号。
- クレジットカード番号。
- HTTPS URL。
スクラビングは固定パターンを使用し、カスタマイズできません。アプリケーションの実装によっては、他の機密情報が表示されることもあります。
開発者ツールがオンになると、Pendoリプレイプレーヤーの右側パネルが置き換えられます。標準ビューに戻るには、パネルの右上隅にある X を選択します。開発者ツールは、オフにするかパネルを閉じるまでオンのままで、他のPendoリプレイを視聴している間も有効です。
コンソールログを有効にする
サブスクリプション管理者および［アプリケーションの詳細を編集］権限を持つユーザーは、セッションリプレイのコンソールログ収集を有効にすることができます。収集したいアプリケーションごとに、コンソールログを有効にする必要があります。
- ［設定］>［サブスクリプション設定］>［アプリケーション］に移動します。
- アプリケーションを選択します。
- ［基本設定］セクションで、［コンソールログのキャプチャ］を見つけて、［有効化］を選択します。
- コンソールログレベルで、収集するレベルを選択します。デフォルトでは3つのレベルすべてが選択されており、少なくとも1つのレベルを選択する必要があります。
- データプライバシーに関する通知を確認し、確認フィールドに［I accept］と入力してください。
- ［有効化］を選択します。
- コンソールログを取得するアプリケーションごとに、これらの手順を繰り返します。
注：選択レベルを設定するには、Pendo Web SDK 2.346.0以降が必要です。アプリで以前のバージョンを使用している場合、コンソールログレベルは利用できず、すべてのレベルが収集されます。更新の詳細については、Pendo Web SDKの設定を参照してください。
重要：コンソールログは、この設定を有効にした後に収集するPendoリプレイでのみ利用可能です。
コンソールログレベルを変更する
コンソールログの取得がオンの場合、［コンソールログのキャプチャ］には、アプリケーションで取得されるログレベルが表示されます。変更するには：
- ［基本設定］セクションで、［コンソールログのキャプチャ］の横にある［編集］を選択します。
- ［コンソールログレベルを編集］で、収集するレベルを選択します。
- 確認フィールドに ［I accept］ と入力し、［保存］ を選択します。
新しいレベルは、保存後に収集されたコンソールログに適用されます。すでに収集されたログは変更されません。コンソールログの収集を停止するには、代わりに［無効にする］を選択します。
コンソールログを表示する
Pendoリプレイプレーヤーで開発者ツールのトグルをオンにすると、再生とタイムラインの横にコンソールログパネルが表示されます。
Pendoリプレイが進むにつれて、ログは自動的に訪問者の行動に合わせてスクロールします。ここでは以下が可能です。
- 特定のテキストをログで検索します。
- ログのタイムスタンプを選択して、その瞬間のPendoリプレイに移動します。
- ログ行を選択すると詳細が表示されます。
- ログの詳細をコピーして他のユーザーと共有します。
- コンソールログパネルで［エラー］を選択すると、エラーメッセージのみが表示されます。
Pendoリプレイクリップを保存または共有する際に、ログが含まれます。各エントリーは1,000文字に制限され、長いメッセージは省略記号（...）で切り捨てられます。。
ネットワークログ
ネットワークログを使用して、ブラウザのリクエストと応答をPendoリプレイタイムラインと一緒に表示します。
仕組み
ネットワークログは、訪問者の録画セッション中にブラウザとバックエンドシステム間のリクエストと応答を取得します。Pendoリプレイと組み合わせることで、失敗したインタラクション、エラー、バックエンドコールのコンテキストを個別にログを要求せずに理解できます。
［ネットワーク］タブはPendoリプレイプレーヤーの［開発者ツール］パネル内に表示されます。リプレイが進むにつれて、ネットワークアクティビティがタイムラインと同期してスクロールします。リクエストを選択すると、メソッド、ステータスコード、ヘッダー、および（構成されている場合）本文データが表示されます。失敗したリクエストは赤色のインジケーターでマークされます。
開発者ツールがオンになると、Pendoリプレイプレーヤーの右側パネルが置き換えられます。標準ビューに戻るには、パネルの右上隅にある X を選択します。開発者ツールは、オフにするかパネルを閉じるまでオンのままで、他のPendoリプレイを視聴している間も有効です。
ネットワークキャプチャを構成する
ネットワークログキャプチャを有効にする前に、アプリケーション設定で収集するデータを設定することをお勧めします。
デフォルトで、Pendoは以下を取得します。
すべてのリクエストURL。
安全なヘッダーの限られたセット。
Pendoは以下を取得しません。
リクエストまたはレスポンス本文（明示的に設定されていない限り）。
拒否されたヘッダー（手動で追加された場合でも）。
以下のヘッダーは、コールバックを通じても決して取得されません。
認証Proxy-AuthorizationCookieSet-CookieX-API-KeyX-Forwarded-ForX-CSRF-Token（および正規表現を使用したバリアント）SignatureForwardedReferrer
Pendoは、個人を特定できる情報（PII）を自動的にマスキングします。
IPアドレス。
社会保障番号。
クレジットカード番号。
HTTPS URL。
パスワード。
メール。
キー。
トークン。
認証フィールド。
収集する内容をカスタマイズするには、リクエスト本文とレスポンス本文にコールバック関数を使用できます。実装の詳細については、ネットワークログに関するWeb SDK APIドキュメントをご覧ください。
ネットワークログを有効にする
セッションリプレイのためにネットワークログを収集できるのはサブスクリプション管理者のみです。収集したい各アプリケーションごとにネットワークログを有効にする必要があります。
- ［設定］>［サブスクリプション設定］>［アプリケーション］に移動します。
- アプリケーションを選択します。
- ［基本設定］セクションで［ネットワークログを収集］を見つけてください。
- ［有効化］を選択し、データプライバシー通知を確認して、確認フィールドに「同意します」と入力します。
- ［有効化］を選択します。
- ネットワークログを取得するアプリケーションごとに、これらの手順を繰り返します。
重要：ネットワークログは、この設定を有効にした後に取得されたPendoリプレイでのみ利用可能です。
ネットワークログの表示とフィルタリング
リプレイの開発者ツールで［ネットワーク］タブに切り替えると、収集されたネットワークリクエストのリストが表示されます。
各リクエストには、メソッド、URL、およびステータスコードが含まれています。ここでは以下が可能です。
- リクエストメソッド（例：GET、POST、PUT、PATCH）でフィルタリングする。
- 応答ステータスコードでフィルターする。
- ヘッダーまたは本文内の特定の文字列を検索する。
- ヘッダーと本文を表示するネットワークリクエストを選択する（設定されている場合）。
PendoはデフォルトですべてのリクエストURLと安全なヘッダーのセットを収集します。
Pendoリプレイクリップを保存または共有する際に、ログが含まれます。各エントリーは1,000文字に制限され、長いメッセージは省略記号（...）で切り捨てられます。。
ログの保持と削除
セッションリプレイで取得されたコンソールおよびネットワークログは、標準的なPendoイベントとして扱われ、Pendoリプレイの保持ではなく、サブスクリプションのデータ保持ポリシーに従って保持されます。
保持期間が終了する前にログデータを削除する必要がある場合は、サポートチームにお問い合わせください。