코드 조각을 수정하여 CloudWatch RUM 웹 클라이언트 구성(선택 사항)

애플리케이션에 삽입하기 전에 코드 조각을 수정하여 여러 옵션을 활성화하거나 비활성화할 수 있습니다. 자세한 내용은 CloudWatch RUM 웹 클라이언트 설명서를 참조하세요.

이 섹션에서 설명한 것처럼 세 가지 구성 옵션을 반드시 알고 있어야 합니다.

개인 정보를 포함할 수 있는 리소스 URL 수집 방지

기본적으로 CloudWatch RUM 웹 클라이언트는 애플리케이션에서 다운로드한 리소스 URL을 기록하도록 구성됩니다. 이러한 리소스에는 HTML 파일, 이미지, CSS 파일, JavaScript 파일 등이 포함됩니다. 일부 애플리케이션의 경우 URL에 개인 식별 정보(PII)가 포함될 수 있습니다.

애플리케이션이 여기에 해당한다면 애플리케이션에 삽입하기 전에 코드 조각 구성에서.recordResourceUrl: false 설정을 통해 리소스 URL 수집을 비활성화할 것을 강력히 권장합니다.

페이지 보기 수동 기록

기본적으로 웹 클라이언트는 페이지가 처음 로드할 때와 브라우저 기록 API가 호출될 때 페이지 보기를 기록합니다. 기본 페이지 ID는 window.location.pathname입니다. 그러나 경우에 따라 이 동작을 재정의하고 애플리케이션을 계측하여 페이지 보기를 프로그래밍 방식으로 기록할 수도 있습니다. 이렇게 하면 페이지 ID와 기록 시기를 제어할 수 있습니다. 변수 식별자가 있는 URI(예: /entity/123 또는 /entity/456)가 있는 웹 애플리케이션을 예로 들어 보겠습니다. 기본적으로 CloudWatch RUM은 경로 이름과 일치하는 고유한 페이지 ID를 가진 각 URI에 대해 페이지 보기 이벤트를 생성하지만, 대신 동일한 페이지 ID로 그룹화할 수 있습니다. 이렇게 하려면 disableAutoPageView 구성을 사용하여 웹 클라이언트의 페이지 보기 자동화를 사용하지 않도록 설정하고 recordPageView 명령을 사용하여 원하는 페이지 ID를 설정합니다. 자세한 내용은 GitHub의 Application-specific Configurations를 참조하세요.

임베디드 스크립트 예:

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

JavaScript 모듈 예:

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

X-Ray 종단 간 추적 활성화

앱 모니터를 생성할 때 Trace my service with AWS X-Ray(으로 내 서비스 추적)을 선택하면 앱 모니터에서 샘플링한 사용자 세션 도중에 만들어진 XMLHttpRequest 및 fetch 요청 추적을 사용할 수 있습니다. 그런 다음, CloudWatch RUM 대시보드, X-Ray 트레이스 맵 및 트레이스 세부 정보 페이지에서 이러한 HTTP 요청의 트레이스를 볼 수 있습니다.

기본적으로 이러한 클라이언트 측 추적은 다운스트림 서버 측 추적에 연결되지 않습니다. 클라이언트 측 추적을 서버 측 추적에 연결하고 종단 간 추적을 활성화하려면 웹 클라이언트에서 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 웹 클라이언트 설명서를 참조하세요.