브라우저 모니터링을 시작하려면 맞춤화된 JavaScript 코드 스니펫인 브라우저 에이전트를 웹 페이지 HTML에 추가해야 합니다. 그러면 브라우저 에이전트는 앱의 성능을 모니터링하고 해당 데이터를 뉴렐릭으로 보냅니다.
아래 단계에 따라 UI에서 브라우저 앱을 생성하고 브라우저 에이전트를 설정하면 에이전트로 웹 페이지를 계측할 수 있습니다.
시작하기 전에
브라우저 앱이 다음 호환 요구 사항을 충족하는지 확인하십시오.
뉴렐릭 UI에서 브라우저 앱 생성
먼저 one.newrelic.com으로 이동하여 UI에서 브라우저 앱을 생성합니다. Add Data를 클릭한 다음 Data sources에서 Browser monitoring을 선택합니다.
팁
API를 사용해 브라우저 앱을 생성해야 하는 경우, 이 NerdGraph 튜토리얼을 확인하시기 바랍니다.
배포 방법 선택
두 가지 방법으로 웹 페이지에 브라우저 에이전트를 추가할 수 있습니다.
방법 1: 뉴렐릭 APM을 통해 활성화 (비SPA 앱에 권장)
(애플리케이션 성능 모니터링) 에이전트로 브라우저 앱의 백엔드 측을 모니터링하려면, 이 APM 옵션을 사용해야 합니다. APM 에이전트는 웹사이트의 모든 페이지에 브라우저 에이전트를 자동으로 배포하고 APM 에이전트를 다시 시작할 때마다 브라우저 에이전트의 최신 버전을 자동으로 가져오기 때문에, 이 옵션은 비 SPA 앱에 권장됩니다.
또는
방법 2: JavaScript 코드 복사/붙여넣기 (SPA 앱 권장)
- SPA 앱이 있거나 APM 에이전트가 자동 삽입(Node.js, Java 에이전트)을 지원하지 않는 등의 이유로 첫 번째 옵션을 사용할 수 없는 경우 이 방법을 사용합니다. 이 옵션을 선택하면 모든 구성이 완료되면 UI의 마지막 단계에서 맞춤화된 JavaScript 스니펫을 복사하여 앱의 HTML에 붙여 넣습니다.
UI에서, 배포 방법을 선택하고 다음 단계로 이동합니다.
(선택 사항) 분산 추적 활성화
다음으로 앱의 프런트엔드 및 백엔드 활동이 어떻게 연결되는지 이해하기 위해 분산 추적을 활성화할 수 있습니다. 분산 추적에 대한 자세한 내용은 여기를 참조하십시오.
브라우저 앱 이름 지정
브라우저 앱의 이름을 선택할 때 두 가지 옵션이 있습니다.
APM 에이전트에서 이미 모니터링되고 있는 기존 앱 선택
독립적으로 실행되는 브라우저 앱에 새로운 이름 지정
이 옵션 중 하나를 선택하고 활성화를 클릭합니다.
(복사/붙여넣기 방법만 해당) JavaScript 스니펫 삽입
복사/붙여넣기 옵션을 선택한 경우, 브라우저 앱의 HTML에 JavaScript 스니펫을 추가해야 합니다.
UI에서 앱 계측용으로 맞춤화된 자바스크립트 스니펫을 복사하여 웹 앱의 <head> 태그에 붙여 넣습니다.
팁
head 태그는 일반적으로 모든 앱 페이지에 로드되는 서드파티 스크립트, 글꼴 등을 처리하므로 한 곳에 붙여 넣기만 하면 됩니다. 최대한 <head> 상단에 가깝게, 하지만 위치에 민감한 META 태그(예: X-UA-Compatible 및 charset) 뒤에 붙여 넣어야 합니다. 스니펫 배치에 대한 자세한 내용은 JavaScript 배치 요구 사항을 참조하십시오.
민감한 데이터(계정 ID, 라이선스 키 등)가 포함되어 있기 때문에 이 스크린샷에서는 JavaScript 스니펫이 흐리게 표시됩니다. UI에서 고유한 JavaScript 스니펫을 복사하여 붙여 넣어야 합니다.
앱을 위한 트래픽 생성
축하합니다. 브라우저 에이전트 설치가 완료되었습니다! 이제 앱을 위해 트래픽을 생성하고 데이터가 뉴렐릭에 표시될 때까지 몇 분 정도 기다리면 됩니다.
팁
데이터가 보이지 않습니까?
웹 페이지 데이터가 뉴렐릭에 표시되려면, 브라우저 모니터링 에이전트를 활성화한 후 몇 분 정도 걸릴 수 있습니다. 여전히 데이터가 표시되지 않으면 일반적인 브라우저 설치 문제 및 해결 방법을 확인하십시오.
다음 단계는?
- Summary 페이지에서 앱 데이터를 확인해 보십시오.
- 브라우저 모니터링 모범 사례 가이드를 통해 브라우저 모니터링 환경을 최적화하는 방법을 알아보십시오.
- 브라우저 에이전트 유형을 브라우저 Lite에서 Pro 또는 Pro+SPA로 변경하십시오.