セッションリプレイで開発者ツールを使用する

セッションリプレイの開発者ツールには、Webアプリケーションでの訪問者のセッション中にキャプチャされたデータを表示する技術パネルが用意されています。これらのツールは、技術チームが問題をより迅速に調査し、チーム間で繰り返しのコミュニケーションを減らすのに役立ちます。

開発者ツールには、Pendoリプレイのプレーヤーで表示できる2種類のログ、コンソールログとネットワークログが含まれています。

注：開発者ツールはインストールスクリプトを使用するWebアプリでのみサポートされています。ブラウザ拡張機能やモバイルアプリでは利用できません。 

ユースケース

開発者ツールは、各Pendoリプレイの詳細な技術的コンテキストを提供し、プロダクト、サポート、エンジニアリングチームが問題をより効果的にトラブルシューティングするのに役立ちます。コンソールメッセージやネットワークアクティビティをPendoリプレイタイムラインと併せて表示することで、チームはエラーを迅速に特定し、顧客からのフォローアップの必要性を減らすことができます。これらは次の点で役立ちます。

• 失敗したインタラクションやアプリケーションエラーを文脈に基づいて調査する。
• ブラウザのコンソールメッセージとネットワークリクエストを一緒に確認し、根本原因を特定する。
• 技術データを検索・フィルタリングして、問題をより迅速に特定する。
• エンジニアリングチームが即座に対応できるコンテキスト付きのPendoリプレイを共有する。

コンソールログ

コンソールログを使用して、訪問者のセッション中にアプリによって記録されたメッセージを確認します。

仕組み

サブスクリプション管理者がアプリケーションのコンソールログを有効にした後、開発者ツールの切り替えをPendoリプレイプレーヤーでオンにすることができます。

コンソールログには、キャッチされない例外やコンテンツセキュリティポリシー（CSP）違反などのエラーを含む、アプリケーションコード内のconsole.log()、console.warn()、console.error()によって生成されたメッセージが取得されます。コンテンツセキュリティポリシー（CSP）違反、ネットワーク障害、強制エラーなどのブラウザ生成メッセージは収集しません。

Pendoは、取得されたコンソールログからこれらの値を自動的に削除します。

• IPアドレス。
• 社会保障番号。
• クレジットカード番号。
• HTTPS URL。

スクラビングは固定パターンを使用し、カスタマイズできません。アプリケーションの実装によっては、他の機密情報が表示されることもあります。

開発者ツールがオンになると、Pendoリプレイプレーヤーの右側パネルが置き換えられます。標準ビューに戻るには、パネルの右上隅にある X を選択します。開発者ツールは、オフにするかパネルを閉じるまでオンのままで、他のPendoリプレイを視聴している間も有効です。

コンソールログを有効にする

セッションリプレイのコンソールログ収集を有効にできるのはサブスクリプション管理者のみです。収集するアプリケーションごとにコンソールログを有効化する必要があります。

1. ［設定］>［サブスクリプション設定］>［アプリケーション］に移動します。
2. アプリケーションを選択します。
3. ［基本設定］セクションで、［コンソールログを収集］を見つけてください。
4. ［有効化］を選択し、データプライバシー通知を確認して、確認フィールドに「理解しました」と入力します。
5. 「同意します」を選択します。
6. コンソールログを取得するアプリケーションごとに、これらの手順を繰り返します。

重要：コンソールログは、この設定を有効にした後に収集するPendoリプレイでのみ利用可能です。

コンソールログを表示する

Pendoリプレイプレーヤーで開発者ツールのトグルをオンにすると、再生とタイムラインの横にコンソールログパネルが表示されます。

Pendoリプレイが進むにつれて、ログは自動的に訪問者の行動に合わせてスクロールします。ここでは以下が可能です。

• 特定のテキストをログで検索します。
• ログのタイムスタンプを選択して、その瞬間のPendoリプレイに移動します。
• ログ行を選択すると詳細が表示されます。
• ログの詳細をコピーして他のユーザーと共有します。

Pendoリプレイクリップを保存または共有する際に、ログが含まれます。各エントリーは1,000文字に制限され、長いメッセージは省略記号（...）で切り捨てられます。。

ネットワークログ

ネットワークログを使用して、ブラウザのリクエストと応答をPendoリプレイタイムラインと一緒に表示します。

仕組み

ネットワークログは、訪問者の録画セッション中にブラウザとバックエンドシステム間のリクエストと応答を取得します。Pendoリプレイと組み合わせることで、失敗したインタラクション、エラー、バックエンドコールのコンテキストを個別にログを要求せずに理解できます。

［ネットワーク］タブはPendoリプレイプレーヤーの［開発者ツール］パネル内に表示されます。リプレイが進むにつれて、ネットワークアクティビティがタイムラインと同期してスクロールします。リクエストを選択すると、メソッド、ステータスコード、ヘッダー、および（構成されている場合）本文データが表示されます。失敗したリクエストは赤色のインジケーターでマークされます。

開発者ツールがオンになると、Pendoリプレイプレーヤーの右側パネルが置き換えられます。標準ビューに戻るには、パネルの右上隅にある X を選択します。開発者ツールは、オフにするかパネルを閉じるまでオンのままで、他のPendoリプレイを視聴している間も有効です。

ネットワークキャプチャを構成する

ネットワークログキャプチャを有効にする前に、アプリケーション設定で収集するデータを設定することをお勧めします。

デフォルトで、Pendoは以下を取得します。

• すべてのリクエストURL。

• 安全なヘッダーの限られたセット。

Pendoは以下を取得しません。

• リクエストまたはレスポンス本文（明示的に設定されていない限り）。

• 拒否されたヘッダー（手動で追加された場合でも）。

以下のヘッダーは、コールバックを通じても決して取得されません。

• 認証

• Proxy-Authorization

• Cookie

• Set-Cookie

• X-API-Key

• X-Forwarded-For

• X-CSRF-Token（および正規表現を使用したバリアント）

• Signature

• Forwarded

• Referrer

Pendoは、個人を特定できる情報（PII）を自動的にマスキングします。

• IPアドレス。

• 社会保障番号。

• クレジットカード番号。

• HTTPS URL。

• パスワード。

• メール。

• キー。

• トークン。

• 認証フィールド。

収集する内容をカスタマイズするには、リクエスト本文とレスポンス本文にコールバック関数を使用できます。実装の詳細については、ネットワークログに関するWeb SDK APIドキュメントをご覧ください。

ネットワークログを有効にする

セッションリプレイのためにネットワークログを収集できるのはサブスクリプション管理者のみです。収集したい各アプリケーションごとにネットワークログを有効にする必要があります。

1. ［設定］>［サブスクリプション設定］>［アプリケーション］に移動します。
2. アプリケーションを選択します。
3. ［基本設定］セクションで［ネットワークログを収集］を見つけてください。
4. ［有効化］を選択し、データプライバシー通知を確認して、確認フィールドに「同意します」と入力します。
5. ［有効化］を選択します。
6. ネットワークログを取得するアプリケーションごとに、これらの手順を繰り返します。

重要：ネットワークログは、この設定を有効にした後に取得されたPendoリプレイでのみ利用可能です。

ネットワークログの表示とフィルタリング

リプレイの開発者ツールで［ネットワーク］タブに切り替えると、収集されたネットワークリクエストのリストが表示されます。

各リクエストには、メソッド、URL、およびステータスコードが含まれています。ここでは以下が可能です。

• リクエストメソッド（例：GET、POST、PUT、PATCH）でフィルタリングする。
• 応答ステータスコードでフィルターする。
• ヘッダーまたは本文内の特定の文字列を検索する。
• ヘッダーと本文を表示するネットワークリクエストを選択する（設定されている場合）。

PendoはデフォルトですべてのリクエストURLと安全なヘッダーのセットを収集します。

Pendoリプレイクリップを保存または共有する際に、ログが含まれます。各エントリーは1,000文字に制限され、長いメッセージは省略記号（...）で切り捨てられます。。

ログの保持と削除

セッションリプレイで取得されたコンソールおよびネットワークログは、標準的なPendoイベントとして扱われ、Pendoリプレイの保持ではなく、サブスクリプションのデータ保持ポリシーに従って保持されます。

保持期間が終了する前にログデータを削除する必要がある場合は、サポートチームにお問い合わせください。