분산 추적의 브라우저 데이터

브라우저를 사용하여 최종 사용자 브라우저 활동을 모니터링하는 경우 이제 분산 추적 에서 최종 사용자가 시작한 브라우저 측 추적을 볼 수 있습니다. 이 문서에는 다음이 포함되어 있습니다.

이 기능의 장점
요구 사항
분산 추적 사용
CORS(교차 출처 리소스 공유) 활성화
데이터 찾기 및 쿼리
문제점 해결

분산 추적에서 브라우저 데이터의 이점

New Relic이 브라우저 데이터를 분산 추적 에 보고하도록 하면 프론트엔드 활동과 백엔드 활동 사이의 연결을 볼 수 있습니다. 웹 브라우저에서 최종 사용자가 보낸 시간부터 네트워크 활동, 연결된 백엔드 서비스에 이르기까지 전체 트랜잭션을 볼 수 있습니다.

이 기능의 이점:

브라우저 또는 네트워크에서 지연 시간, 오류 및 이상 현상을 빠르게 찾아냅니다.
고객이 직면한 문제를 보다 신속하게 해결
최종 사용자 모니터링에 적용된 분산 추적의 모든 이점

요구 사항 및 호환성

이 기능은 브라우저 상호 작용 중에 발생하는 AJAX 요청(Fetch 및 XHR)을 보고합니다. 기본적으로 교차 출처 리소스 공유 가 활성화되어 있지 않으면 단일 출처 요청만 모니터링됩니다.

브라우저 및 APM 에이전트에 필요한 최소 버전이 있는지 확인하십시오.

분산 추적이 활성화된 Browser Pro+SPA 에이전트 :
- 브라우저 에이전트 버전 1153 이상
- 브라우저 에이전트 버전 1158 이상( 교차 출처 리소스 공유 에 필요)
- 브라우저 에이전트 버전 1173 이상( w3c 추적 컨텍스트 지원에 필요)
APM 에이전트 버전:
- C SDK 1.3 이상
- 자바 5.9.0 이상
- PHP 9.4.0 이상
- 기타 APM 에이전트 버전 요구 사항

분산 추적 사용

브라우저 모니터링을 위해 분산 추적을 활성화하려면:

요구 사항 을 충족하는지 확인하십시오.
one.newrelic.com 으로 이동하여 브라우저 를 클릭한 다음 앱을 선택한 다음 왼쪽에서 애플리케이션 설정 을 클릭합니다.
분산 추적 토글이 켜져 있는지 확인하십시오. 기본적으로 에이전트 버전 1173 이상에서는 newrelic , traceparent 및 tracestate 헤더가 모든 동일 출처 AJAX 요청에 추가됩니다.
선택사항: 모든 서비스가 w3c 추적 컨텍스트 헤더를 사용하도록 구성된 경우 요청에서 newrelic , traceparent 및 tracestate 헤더를 제외하도록 선택할 수 있습니다.
선택 사항: 교차 출처 리소스 공유를 활성화합니다 .
브라우저 모니터링 에이전트 를 다시 배포합니다(연결된 APM 에이전트를 다시 시작하거나 브라우저 설치 복사/붙여넣기 업데이트).
고급 옵션 Infinite Tracing을 사용하는 브라우저 앱의 다운스트림 앱 또는 서비스가 있는 경우 다음 설정 단계 를 참조하십시오.

무한 추적 활성화

브라우저 앱에 Infinite Tracing 이라는 꼬리 기반 분산 추적을 사용하는 일부 다운스트림 서비스가 있는 경우 브라우저 앱에 대해 이 기능을 활성화해야 합니다.이렇게 하면 루트 범위(시작 브라우저 앱)가 Infinite Tracing에서 추적하는 나머지 범위에 포함됩니다.

무한 추적을 설정하려면:

분산 추적 을 활성화하려면 위의 단계를 완료하십시오.
추적 관찰자를 만들고 추적 범위를 무한 추적 추적 관찰자에게 보내야 하는 앱(데이터 원본)을 선택하는 단계는 Infinite Tracing 설명서 로 이동하세요.

CORS(교차 출처 리소스 공유) 활성화

다른 출처의 리소스가 필요한 AJAX 요청이 있는 경우 CORS(교차 출처 리소스 공유)를 활성화할 수 있습니다. 기본적으로 교차 출처 요청에 대한 분산 추적은 브라우저 CORS 보안 제한으로 인해 활성화되지 않습니다. 분산 추적은 발신 AJAX 요청에 사용자 정의 HTTP 헤더( newrelic , traceparent 및 tracestate )를 추가하여 구현되며, 브라우저는 일반적으로 교차 출처 요청에 대한 사용자 정의 헤더를 허용하지 않습니다.

에이전트 버전 1173이 출시되면서 이제 w3c 추적 컨텍스트 헤더( traceparent 및 tracestate )를 지원하므로 구성에서도 허용되어야 합니다.

교차 출처 분산 추적을 사용하려면 두 가지 개별 구성이 필요합니다.

newrelic 맞춤 헤더를 허용하도록 다른 출처에서 서비스를 구성합니다.
분산 추적에 대상 원본을 포함하도록 브라우저 모니터링 구성

단계별 지침 은 이 기능을 활성화하기 위한 주요 개념과 단계를 제공하지만 원본 간 리소스 공유가 작동하는 방식에 대한 더 많은 배경 지식이 필요한 경우 이 Mozilla 개발자 문서 를 권장합니다.

위험 및 완화

주의

교차 출처 리소스 공유는 다른 출처의 서비스가 올바르게 구성되지 않은 경우 높은 수준의 위험에 노출될 수 있습니다. AJAX 요청은 오류를 반환하여 다음을 포함한 다양한 실패를 초래할 수 있습니다.

로드에 실패한 리소스(예: 이미지 및 주요 콘텐츠)
로그인 실패
전체 사이트 중단(활성화된 요청 유형에 따라 다름)
이 교차 출처 리소스 공유 기능을 활성화하면 다음 사항을 인정하게 됩니다.
이 기능은 선택 사항이며 필수 사항이 아님을 이해합니다.
서비스 및 도메인에 대해 이 기능을 활성화하기 위해 수행해야 하는 단계를 이해하고 있습니다.
귀하는 배포 전에 서비스를 적절하게 구성하지 않으면(사용자 정의 헤더를 허용하도록 도메인에서 서비스를 구성하는 것을 포함하되 이에 국한되지 않음) 웹사이트의 일부 또는 전체가 오작동할 수 있음을 이해합니다.
귀하는 New Relic이 귀하의 잘못된 서버 또는 서비스 구성과 관련된 오류 또는 문제에 대해 책임을 지지 않음을 이해합니다.
귀하는 위험을 전적으로 그리고 전적으로 수용하고 계속 진행하기를 원합니다.

위험을 최소화하는 가장 좋은 방법은 프로세스를 완전히 이해하고 테스트 환경에서 먼저 시도하는 것입니다. 단계별 지침을 읽기 전에 먼저 이 프로세스 개요를 읽는 것이 도움이 될 수 있습니다.

교차 출처 리소스와 함께 분산 추적을 사용하려면 New Relic에서 승인된 교차 출처 리소스 목록을 채우면 자동으로 다음 사용자 지정 헤더를 해당 리소스에 보냅니다. newrelic , traceparent 및 tracestate . 이 프로세스가 작동하려면 먼저 누군가가 이 사용자 지정 헤더를 수락하도록 다른 출처의 서비스를 구성했는지 확인해야 합니다.

교차 출처 리소스 공유는 다양한 HTTP 헤더(요청 및 응답 모두에서)를 사용합니다. 특히 New Relic에 적용되는 헤더는 Access-Control-Allow-Headers 응답 헤더로, APM 모니터링 애플리케이션에서 활성화한 추적 전략에 따라 값에 newrelic , traceparent, tracestate 또는 newrelic, traceparent, tracestate 를 포함할 수 있습니다. 응답에서 이 CORS 헤더를 반환하도록 서버를 구성해야 합니다. 예시:

Access-Control-Allow-Headers: newrelic, traceparent, tracestate

중요

New Relic은 다른 출처의 서비스가 올바르게 구성되었는지 확인하기 위해 유효성 검사를 수행할 수 없습니다. 이러한 헤더를 허용하는 방법이 확실하지 않은 경우 New Relic UI의 승인된 목록에 교차 출처 리소스를 추가하지 마십시오 .

교차 출처 리소스 공유 활성화

주의

프로덕션 환경에서 설정하기 전에 항상 테스트 환경에서 CORS를 활성화해야 합니다.

교차 출처 리소스 공유를 활성화하려면:

다른 출처의 서비스가 Access-Control-Allow-Headers: newrelic, traceparent, tracestate 을 사용하여 newrelic 헤더를 수락하도록 구성되었는지 확인합니다(자세한 내용은 위험 및 완화 참조).
브라우저 모니터링 요구 사항 을 충족하는지 확인합니다.
one.newrelic.com 에 있는지 확인하고 Browser > (앱 선택) > Application settings 클릭합니다.
아직 활성화되지 않은 경우 분산 추적 토글을 켭니다.
교차 출처 리소스 공유(CORS) 토글을 켭니다.
교차 출처 리소스 공유(CORS) 아래에서 교차 출처 리소스를 승인된 목록에 추가합니다.
중요
유효한 교차 출처 리소스에는 다음이 포함되어야 합니다.
- 접두사 http:// 또는 https://
- 도메인 이름
  포트 번호는 HTTP(포트 80) 또는 HTTPS(포트 443)의 기본값과 다른 경우가 아니면 필요하지 않습니다.
애플리케이션 설정 저장 을 선택하여 에이전트 구성을 업데이트합니다.
브라우저 에이전트를 다시 배포합니다 (연결된 APM 에이전트를 다시 시작하거나 브라우저 설치 복사/붙여넣기 업데이트).

데이터 찾기

데이터 찾기 및 쿼리 팁:

New Relic 분산 추적 UI 에서 최종 사용자 시작 추적을 찾을 수 있습니다.
분산 추적 UI에서 최종 사용자 범위는
아이콘입니다.
스팬의 속성을 보려면 UI에서 스팬을 선택하세요.
스팬은 Span 데이터 로 보고되며 New Relic에서 쿼리 할 수 있습니다.
쿼리 팁:
- browserApp.name 을 브라우저 앱 이름으로 설정하여 브라우저 앱 이름으로 쿼리합니다.
- browserApp.name is not null 을 사용하여 하나 이상의 브라우저 앱 범위를 포함하는 추적을 쿼리합니다.
- appName is not null 이(가) 포함된 하나 이상의 백엔드 앱이 포함된 추적을 쿼리합니다.
- 이전 두 조건을 결합하여 브라우저와 백엔드 범위를 모두 포함하는 추적을 쿼리합니다.

문제점 해결

최종 사용자 범위가 표시되지 않거나 다른 분산 추적 문제가 있는 경우 문제 해결 을 참조하십시오.

사용자의 편의를 위해 제공되는 기계 번역입니다.