New Relic을 사용하여 최종 사용자 브라우저 활동을 모니터링하는 경우 분산 추적 을 활용하여 최종 사용자 경험에서 비롯된 브라우저 측 추적을 볼 수 있습니다.
프런트엔드에서 백엔드로 추적 활동
분산 추적에서 브라우저 데이터를 보고하면 프런트엔드 활동과 백엔드 활동 간의 연결을 볼 수 있습니다. New Relic은 최종 사용자가 웹 브라우저에서 보낸 시간부터 네트워크 활동, 관련 백엔드 서비스에 이르기까지 전체 트랜잭션에서 데이터를 추적합니다. 이는 다음과 같은 도움이 됩니다.
- 브라우저 또는 네트워크의 지연 시간, 오류 및 이상 현상을 보다 쉽게 찾아냅니다.
- 고객이 직면한 문제를 보다 신속하게 해결합니다.
- 분산 추적의 모든 이점을 최종 사용자 모니터링에 적용하십시오.
이 기능은 브라우저 상호작용 중에 발생하는 AJAX 요청( Fetch 및 XHR )을 보고합니다. 기본적으로 교차 출처 리소스 공유 가 활성화되어 있지 않으면 단일 출처 요청만 모니터링됩니다.
브라우저 및 APM 버전
에이전트와 에이전트에 필요한 최소 버전이 있는지 확인하세요.
Browser monitoring:
- 분산 추적: 분산 추적이 활성화된 Browser Pro+SPA 에이전트 및 브라우저 에이전트 버전 1153 이상
- 교차 출처 자원 공유의 경우 : 브라우저 에이전트 버전 1158 이상
- W3C 추적 컨텍스트 지원: 브라우저 에이전트 버전 1173 이상
APM:
- 자바 5.9.0 이상
- PHP 9.4.0 이상
- 기타 APM 에이전트 버전 요구 사항
분산 추적 사용
기본적으로 에이전트 버전 1173 이상의 경우 newrelic , traceparent 및 tracestate 헤더가 모든 동일 출처 AJAX 요청에 추가됩니다. (제외하면 헤더가 전송되지 않습니다.) 자세한 내용은 W3C 추적 컨텍스트 헤더 에 대한 설명서를 참조하세요.
브라우저 모니터링을 위해 분산 추적을 활성화하려면:
브라우저 모니터링 에이전트 및 APM 에이전트가 분산 추적과 호환 되는지 확인하십시오. 해당되는 경우 최신 버전으로 업데이트하십시오.
one.newrelic.com > All capabilities > Browser > (select an app) > Settings > Application settings
으)로 이동합니다.
Distributed tracing
토글을 켭니다.
선택 사항: 교차 출처 리소스 공유를 활성화합니다 .
연결된 APM 에이전트를 다시 시작하거나 브라우저 설치 복사/붙여넣기를 업데이트 하여 브라우저 모니터링 에이전트 를 다시 배포합니다.
브라우저 앱의 다운스트림인 앱이나 서비스가 있고 무한 추적을 사용하는 경우 무한 추적 설정 단계를 완료하십시오.
W3C 추적 컨텍스트 헤더
브라우저 모니터링 에이전트 버전 1173의 릴리스와 함께 W3C 추적 컨텍스트 헤더( traceparent 및 tracestate )를 지원하므로 구성에서 허용해야 합니다. W3C 추적 컨텍스트는 서비스 간에 컨텍스트 상관 관계 정보를 전파하는 역할을 하는 표준화된 컨텍스트 HTTP 헤더 쌍을 정의합니다.
traceparent헤더에는 모든 분산 추적 모델이 컨텍스트를 정의하고 전파하는 데 필요한 데이터 요소(추적 ID, 상위 ID, 샘플 플래그)가 포함되어 있습니다.tracestate헤더는 일반적으로 특정 추적 도구와 관련된 추가 기능 또는 최적화를 지원하기 위해 공급업체별 컨텍스트 데이터를 보유합니다.
W3C 추적 컨텍스트에 대한 자세한 내용은 블로그 게시물 을 참조하십시오.
CORS(교차 출처 리소스 공유) 활성화
다른 출처의 리소스가 필요한 AJAX 요청이 있는 경우 CORS(교차 출처 리소스 공유)를 활성화할 수 있습니다. 기본적으로 교차 출처 요청에 대한 분산 추적은 브라우저 CORS 보안 제한으로 인해 활성화되지 않습니다. 분산 추적은 발신 AJAX 요청 및 브라우저에 사용자 정의 HTTP 헤더( newrelic , traceparent 및 tracestate )를 추가하여 구현됩니다. 일반적으로 교차 출처 요청에서 사용자 정의 헤더를 허용하지 않습니다.
교차 출처 분산 추적을 사용하려면 두 가지 개별 구성이 필요합니다.
newrelic맞춤 헤더를 허용하도록 다른 출처에서 서비스를 구성합니다.디버그, 목적 원산지 추적을 포함하도록
Application settings
에서 브라우저 검토를 구성하세요.
이 섹션에서는 CORS를 활성화하고 구성하는 주요 개념과 단계를 제공합니다. 교차 출처 리소스 공유가 작동하는 방식에 대한 더 많은 배경 지식이 필요한 경우 이 Mozilla 개발자 문서 를 권장합니다.
주의
다음 섹션에서 설명하는 것처럼 원본 간 리소스 공유는 다른 원본의 서비스가 올바르게 구성되지 않은 경우 높은 수준의 위험에 노출될 수 있습니다. 다음 세 섹션을 순차적으로 읽는 것이 좋습니다.
무한 추적 활성화
Infinite Tracing 이라는 꼬리 기반 분산 추적 기능을 제공합니다. 브라우저 앱에 다운스트림 서비스가 있는 경우 활성화해야 합니다. 이렇게 하면 Infinite Tracing에서 추적하는 나머지 범위에 루트 범위(시작 브라우저 앱)가 포함됩니다.
무한 추적을 설정하려면:
- 분산 추적을 활성화 하는 단계를 완료하십시오.
- Infinite Tracing 문서 로 이동한 다음 단계에 따라 추적 관찰자를 만들고 추적 범위를 Infinite Tracing 추적 관찰자에게 보낼 앱(데이터 소스)을 선택합니다.
추적 데이터 탐색
다음은 New Relic에서 추적 데이터를 찾고 쿼리하기 위한 몇 가지 팁입니다.
원하는 경우... | 이게 ... |
|---|---|
최종 사용자 경험에서 비롯된 추적 조사 | New Relic UI의 분산 추적 페이지 로 이동합니다. |
최종 사용자 범위 보기 | 분산 추적 UI에서 최종 사용자 범위는 아이콘입니다. 범위의 속성을 보려면 UI에서 . |
쿼리 범위 데이터 | 스팬은
|
문제점 해결
최종 사용자 범위가 표시되지 않거나 다른 분산 추적 문제가 있는 경우 문제 해결 설명서를 참조하세요.