브라우저는 ‘에이전트’라고도 하는 JavaScript 스니펫을 사용하여 앱의 웹페이지를 계측합니다. JavaScript는 브라우저 모니터링을 위해 데이터를 수집합니다. 브라우저 에이전트를 설치하기 위해 여러 배포 옵션 중에서 선택할 수 있습니다.
아직 계정이 없으시면, 지금 영구 무료 계정을 신청하세요.
브라우저 모니터링 활성화
브라우저 모니터링을 활성화하면 Browser Pro+SPA가 기본에이전트가 됩니다. 이 때문에 자동으로 모든 브라우저 모니터링 기능에 액세스할 수 있습니다. 브라우저 모니터링 옵션에 대한 보다 자세한 내용은 이 문서의 브라우저 에이전트 유형을 참조하세요.
브라우저 모니터링을 활성화하려면:
- one.newrelic.com으로 이동해 Add data를 클릭한 후 Browser and mobile을 클릭합니다.
- UI의 지침에 따라 뉴렐릭 Browser 같이 앱에 사용할 브라우저 모니터링용 데이터 소스를 선택합니다.
- 앱을 위한 트래픽을 생성한 다음 데이터가 뉴렐릭에 나타날 때까지 몇 분 정도 기다립니다.
- 선택 사항: 설치가 완료되고 데이터가 표시되면 추가적인 에이전트 구성을 위해 App settings 페이지로 이동하거나 브라우저 에이전트 유형을 변경합니다.
브라우저 모니터링 에이전트를 활성화한 후 웹페이지 데이터가 뉴렐릭에 표시되기까지 몇 분이 소요될 수 있습니다. 문제가 있는 경우 문제 해결 팁을 참고하세요.
배포 옵션
브라우저 모니터링을 배포하는 데 어떤 옵션을 사용하든 최종 결과는 동일합니다. 브라우저 모니터링 JavaScript 스니펫(‘에이전트’라고도 함)이 앱 페이지에 삽입됩니다. 선택하는 방법은 기본 설정과 비즈니스 요구 사항에 따라 다릅니다.
에이전트를 설치하는 데 사용되는 스크립트에 대해 자세히 알아보려면 GitHub 리포지토리에서 브라우저 에이전트의 Read me 파일을 확인하십시오. 서드파티 알림 파일에서 설치 중에 호출된 서드파티 라이브러리에 대해 알아볼 수도 있습니다.
APM으로 모니터링되는 앱에서 자동으로 활성화
브라우저 모니터링을 활성화하면 APM 에이전트를 사용하여 브라우저 모니터링 JavaScript 스니펫을 자동으로 삽입할 수 있습니다. 이는 APM에서 이미 모니터링 중인 앱을 위해에이전트를 설치하는 가장 쉬운 방법입니다.
APM으로 모니터링되는 앱은 APM 애플리케이션 색인에 나열되어 있습니다.
복사/붙여넣기로 활성화
브라우저 모니터링을 활성화하면 JavaScript 스니펫을 앱의 웹페이지에 수동으로 삽입할 수 있습니다. 복사/붙여넣기 옵션을 사용하면 웹페이지 성능을 모니터링하는 데 필요한 JavaScript 스니펫의 정확한 위치를 제어할 수 있습니다. 이는 다음과 같은 경우에 유용합니다.
- CDN에서 제공하는 독립 실행형 앱, 정적 사이트 및 캐시된 페이지
- 표준 서버 측 앱처럼 브라우저 앱에 밀접하게 연결되지 않은 APM 앱(예: 클라이언트 측 앱이 REST API 백엔드와 통신하는 경우)
복사/붙여넣기를 사용하는 방법을 배우려면 이 짧은 YouTube 비디오를 시청하십시오.(약 1분 50초)
JavaScript 스니펫 사용에 대한 몇 가지 팁:
- 웹페이지에 배치: 코드 스니펫을 복사한 다음 페이지에 가능한 한
<head>
요소의 상단에 가깝게 붙여넣고, 위치에 민감한<meta>
태그(예:X-UA-Compatible
또는charset
정보)가 있으면 그 뒤에 위치시킵니다. 인라인head
배치에 대한 자세한 내용은 JavaScript 배치 요구 사항을 참조하세요. - 라이선스 키 및 앱 ID: 생성된 JavaScript의 하단에 브라우저 라이선스 키와 애플리케이션 ID가 있습니다. 이는 REST API와 API 탐색기에서 유용합니다.
APM으로 모니터링되는 앱에서 수동으로 계측
뉴렐릭의 APM 에이전트는 페이지 로드 타이밍에 필요한 JavaScript로 웹페이지를 계측할 수 있습니다. APM 에이전트의 API를 사용하여 JavaScript 스니펫을 웹페이지에 수동으로 추가하는 경우 계측 스니펫을 가능한 한 상단에 가깝게 삽입합니다. 그래야 브라우저의 AJAX 호출과 JavaScript 오류에 대한 자세한 정보를 활용할 수 있습니다.
자세한 내용은 각 APM 에이전트에 대한 지침을 참조하세요.
NerdGraph API로 브라우저 앱 생성
NerdGraph API를 사용하여 브라우저 앱을 수동으로 생성합니다. 이 NerdGraph 튜토리얼을 확인하십시오.
이 문서가 설치하는데 도움이 되셨나요?
브라우저 에이전트 유형: Lite, Pro, Pro+SPA
뉴렐릭의 브라우저 에이전트는 Lite, Pro 및 Pro+SPA의 세 가지 유형이 있습니다. 에이전트 유형은 청구서에 영향을 주지 않습니다.
브라우저 에이전트 유형 | 비교 |
---|---|
Pro+SPA | 브라우저 모니터링을 활성화할 때 기본적으로 설치되는 에이전트입니다. 포함 사항:
|
Pro | 포함 사항: Browser Pro 기능에 액세스할 수 있습니다. 포함되지 않는 사항: 싱글 페이지 앱 모니터링을 위해 설계된 기능이 부족합니다. |
Lite | 포함 사항: 일부 기본 페이지 로드 타이밍 정보와 브라우저 사용자 정보를 제공합니다. 포함되지 않은 사항: Browser Pro 기능과 SPA 기능이 부족합니다. |
에이전트 유형이 요금과 어떤 관련이 있는지에 대한 세부정보:
- 사용량 기반 요금제: 이 요금제 모델의 경우 데이터 인제스트가 청구 요소입니다. 데이터 인제스트를 줄이려면 설치 후 하위 에이전트 유형으로 다운그레이드하는 것이 좋습니다.
- 기존 요금제: 브라우저 모니터링 기능에 대한 액세스는 에이전트 유형이 아닌 서브스크립션 요금제에 의해 결정됩니다. 그렇기 때문에 기본 Pro+SPA 에이전트를 사용하지 않을 이유가 없습니다.
초기 에이전트 설치가 완료된 후 앱 설정 페이지로 이동하여 구성을 수정하거나 구독을 변경할 수 있습니다.