コードスニペットを変更して 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>

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