(オプション) ステップ 3: コードスニペットを手動で変更して CloudWatch RUM ウェブクライアントを構成する

アプリケーションに挿入する前のコードスニペットを変更して、いくつかのオプションを有効または無効にすることができます。詳細については、「CloudWatch RUM web client documentation」を参照してください。

この場合には、次のセクションで説明するように、配慮しておくべき設定オプションが 3 つ存在します。

個人情報を含む可能性のあるリソース URL の収集を防止する

デフォルトでは、CloudWatch RUM ウェブクライアントは、アプリケーションによってダウンロードされたリソースの URL を記録するように設定されています。これらのリソースには、HTML ファイル、画像、CSS ファイル、JavaScript ファイルなどが含まれます。アプリケーションによって、URL には個人を特定できる情報 (PII) が含まれている可能性があります。

アプリケーションがこのような構成の場合には、アプリケーションに挿入する前のコードスニペット内で recordResourceUrl: false を設定し、リソース URL のコレクションを無効にしておくことを強くお勧めします。

ページビューを手動で記録する

ウェブクライアントのデフォルト設定では、ページが最初にロードされた時点、ならびにブラウザの履歴 API が呼び出され時点でページビューが記録されます。デフォルトのページ ID は window.location.pathname です。ただし、場合によってはこの動作をオーバーライドしてアプリケーションを計測し、ページビューをプログラムで記録します。これにより、ページ ID とそれを記録するタイミングを管理できます。例えば、/entity/123 または /entity/456 などの変数識別子を持つ URI のウェブアプリケーションを考えてみましょう。デフォルトでは、CloudWatch RUM はパス名と一致する個別のページ ID を持つページビューイベントを URI ごとに生成しますが、代わりに同じページ ID でグループ化することもできます。これを実行するには、disableAutoPageView 設定を使用してウェブクライアントのページビュー自動化を無効にし、recordPageView コマンドを使用して目的のページ ID を設定します。詳細については、GitHub の「アプリケーション固有の設定」を参照してください。

埋め込みスクリプトの例:

cwr('recordPageView', { pageId: 'entityPageId' });

JavaScript モジュールの例:

awsRum.recordPageView({ pageId: 'entityPageId' });

X-Ray でのエンドツーエンドのトレースを有効にする

アプリケーションモニターを作成する際に、[Trace my service with AWS X-Ray] を選択します。これにより、アプリケーションモニターがサンプリングするユーザーセッション中に発行された XMLHttpRequest および fetch リクエストのトレースを有効化します。その後、これらの HTTP リクエストについてのトレースを、CloudWatch RUM ダッシュボード、X-Ray トレースマップページ、X-Ray トレースの詳細ページ上に表示できるようになります。

デフォルトでは、これらのクライアント側トレースは、サーバー側のダウンストリームトレースとは接続されません。クライアント側のトレースをサーバー側トレースに接続し、エンドツーエンドのトレースを有効にするには、ウェブクライアントの addXRayTraceIdHeader オプションで true を設定します。これにより、CloudWatch RUM ウェブクライアントは、HTTP リクエストに X-Ray トレースヘッダーを追加します。

次に、クライアント側のトレースを追加する場合のコードブロック例を示します。可読性のために、このサンプルでは一部の構成オプションが省略されています。

<script>
    (function(n,i,v,r,s,c,u,x,z){...})(
        'cwr',
        '00000000-0000-0000-0000-000000000000',
        '1.0.0',
        'us-west-2',
        'https://client.rum.us-east-1.amazonaws.com/1.0.2/cwr.js',
        {
            enableXRay: true,
            telemetries: [ 
                'errors', 
                'performance',
                [ 'http', { addXRayTraceIdHeader: true } ]
            ]
        }
    );
</script>

警告

HTTP リクエストに X-Ray トレースヘッダーを追加するための設定を、CloudWatch RUM のウェブクライアントで行うことで、クロスオリジンリソース共有 (CORS) の失敗を引き起こしたり、Sigv4 で署名されているリクエスト署名が無効化されたりする場合があります。詳細については、「CloudWatch RUM web client documentation」を参照してください。本番環境でクライアント側の X-Ray トレースヘッダーの追加を行う前に、アプリケーションのテストを実施することを強くお勧めします。

詳細については、「CloudWatch RUM web client documentation」を参照してください。