• EnglishEspañol日本語한국어Português
  • 로그인지금 시작하기

브라우저 에이전트 설치

을 시작하려면 모니터링하려는 뷰의 HTML에 브라우저 에이전트를 추가해야 합니다. 브라우저 에이전트는 앱/사이트의 성능을 모니터링하고 그 데이터를 뉴렐릭으로 보내는 JavaScript 코드 스니펫입니다. 코드는 사이트에 수동으로 추가하거나, APM 에이전트를 사용해 삽입할 수 있습니다.

시작하기 전에

시작하기 전에 브라우저 앱이 Google의 호환 요구사항을 충족하는지 확인하십시오.

API를 사용해 애플리케이션을 프로그래밍 방식으로 모니터링하길 원하십니까? NerdGraph를 사용한 브라우저 모니터링을 참조하십시오.

에이전트 설치

브라우저 에이전트를 설치하려면: one.newrelic.com > Add data > Browser and mobile > Browser monitoring으로 이동하여 지침을 따릅니다.

브라우저 모니터링 설치

설치 프로세스에 대한 질문이 있는 경우 설치 방법을 참조하십시오.

뉴렐릭에서 데이터 찾기

브라우저 에이전트 설치가 완료되면 몇 분 정도 기다렸다가 브라우저 모니터링 UI 에서 데이터를 찾습니다.

15분 이상 지났는데도 데이터가 표시되지 않으면 문제 해결 참조하십시오.

다음 단계는?

다음 단계를 위한 아이디어:

설치 방법

두 가지 방법으로 웹 페이지에 브라우저 에이전트를 추가할 수 있습니다.

  • APM + 브라우저 모니터링: 브라우저 모니터링을 자동 계측할 수 있도록 APM 에이전트 중 하나를 사용합니다.
  • 브라우저 모니터링만: 브라우저 에이전트를 JavaScript 스니펫으로 프런트 엔드 HTML에 수동으로 추가합니다.

다음은 이 두 가지 방법에 대한 자세한 설명입니다.

APM + 브라우저 모니터링

APM(애플리케이션 성능 모니터링) 에이전트를 사용하여 브라우저 앱의 백엔드를 모니터링하는 경우 이 방법을 사용하는 것이 좋습니다. APM 에이전트는 웹사이트의 모든 페이지에 브라우저 에이전트를 자동으로 배포하고 APM 에이전트를 다시 시작할 때마다 브라우저 에이전트의 최신 버전을 자동으로 가져오기 때문에, 이 옵션은 비 SPA 앱에 권장됩니다.

APM 에이전트 동작을 맞춤화하려는 경우 APM 에이전트 API를 사용할 수 있습니다. 다음은 관련 문서입니다.

브라우저 모니터링만

APM 에이전트가 자동 주입을 지원하지 않는 경우(Node.js 및 일부 Java 앱의 경우)처럼, 어떤 이유로든 APM을 사용할 수 없는 경우 이 방법을 사용합니다. 이 방법을 사용하는 경우 UI는 설치 프로세스 마지막에 사용자 정의된 JavaScript 스니펫을 제공하며 사이트에서 모니터링하려는 모든 페이지의 HTML에 추가할 수 있습니다.

페이지의 HTML <head> 태그 내에 JavaScript 스니펫을 붙여넣습니다. head 태그는 일반적으로 모든 앱 페이지에 로드되는 서드파티 스크립트, 글꼴 및 기타 요소를 처리하므로 한 곳에만 붙여 넣으면 됩니다. 가능한 한 <head>의 상단에 가깝게 붙여 넣되, 위치에 민감한 META 태그(예: X-UA-Compatible 및 charset) 뒤에 붙여 넣습니다. 스니펫 배치에 대한 자세한 내용은 JavaScript 배치 요구 사항을 참조하십시오.

또는 인라인 스크립트 경로를 적극 권장하지만 src 스크립트를 사용하여 async 또는 defer 방식으로 에이전트를 삽입할 수도 있습니다. 주의 사항 및 세부 사항은 아래를 참고하십시오.

브라우저 모니터링 지연

주의

인스턴스화를 지연시키면 에이전트가 완전히 로드되고 초기화될 때까지 정보가 누락됩니다. 이러한 스크립트의 실행 순서로 인해 페이지 뷰 시작 시 계측 데이터가 일부 손실될 수 있습니다.

잠재적인 성능 또는 기타 이유로 인해 페이지 로드 주기 시작부터 브라우저 에이전트의 초기화를 지연시킬 수 있습니다. 에이전트가 완전히 초기화될 때까지 newrelic API를 사용할 수 없습니다. 또한 이 지연으로 인해 브라우저 모니터링 UI에 불완전한 데이터가 생성됩니다.

에이전트가 완전히 초기화되면 정상 작동합니다. 지연은 에이전트가 전역을 래핑하거나 캡처된 데이터에 영향을 미치는 다른 라이브러리 또는 코드와 관련된 이벤트를 구독하는 시기에도 영향을 줍니다.

다음과 같은 방법으로 에이전트 초기화를 지연시킬 수 있습니다.

  • async 속성을 사용하여 script-src 태그를 추가합니다.
  • defer 속성을 사용하여 script-src 태그를 추가합니다.
  • 로더 코드를 동적 가져오기나 시간순으로 늦게 배치하는 방법을 사용합니다.

페이지의 src는 CDN의 유효한 에이전트 로더 버전을 가리켜야 합니다. 예를 들어, 현재 Pro+SPA 에이전트 릴리스를 항상 포함하는 URL은 https://js-agent.newrelic.com/nr-loader-spa-current.min.js입니다. 외부 서드파티 스크립트를 로드하려면 CSP가 반드시 필요합니다.

newrelic API 호출을 시작할 수 있는 시기를 파악하려면 전역 범위에서 이벤트를 구독합니다.

window.addEventListener('newrelic', (evt) => {
if (evt.detail.loaded) {
// you can start using newrelic.interaction(), etc. now
}
})
<InstallFeedback />
Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.