Nuxt.js 통합

Nuxt.js 대시보드를 사용하면 JavaScript 오류가 있는 애플리케이션 오류율, 초기 페이지 로드 평균, 경로 변경, 처리량 및 페이지 뷰를 쉽게 추적할 수 있습니다. 인프라 에이전트와 Vue 으로 구축된 Nuxt.js 대시보드를 사용하면 중요한 정보를 모두 한 곳에서 볼 수 있습니다.

1. 인프라 에이전트 설치

데이터를 뉴렐릭으로 가져오려면 먼저 인프라 에이전트를 설치해야 합니다.(설치한 경우 이 단계를 건너뛰십시오.) 이를 통해 뉴렐릭은 애플리케이션 오류율, 처리량 및 JavaScript 오류가 있는 페이지 뷰가 대시보드에 나타날 수 있도록 데이터를 수집할 수 있습니다. 이 단계는 선택 사항이지만, 모든 호스트 및 브라우저 모니터링 데이터를 보려면 인프라 에이전트를 설치하는 것이 좋습니다.

인프라 에이전트를 설치하는 방법에는 두 가지가 있습니다.

안내 설치에 따라 인프라 에이전트로 시스템을 계측합니다.
명령줄을 사용하여 인프라 에이전트를 설치합니다.

2. Vue 브라우저 모니터링 설치

인프라 에이전트를 설치한 후 다음 단계는 브라우저 모니터를 설치하는 것입니다. one.newrelic.com에서:

Add data를 클릭합니다.
Browser & mobile을 클릭합니다.
Vue를 클릭하고 안내에 따라 3단계에서 사용된 JavaScript 코드 스니펫을 생성합니다. 브라우저 모니터링 에이전트와 Vue 통합은 기본적으로 동일한 서비스를 제공하지만, Vue 통합은 JavaScript(Nuxt.js의 프레임워크)에만 적용됩니다. JavaScript 기반이 아닌 다른 서비스를 모니터링하려면 브라우저 모니터링 에이전트를 사용해야 합니다.

3. 통합 구성

Nuxt.js 애플리케이션에 JavaScript 스니펫을 추가하려면:

nuxt.js 애플리케이션의 static 폴더에 자바스크립트 파일을 만듭니다.
bash
```
$touch <FILENAME>.js
```
새로 생성된 JavaScript 파일에서 함수를 생성하고 생성된 스크립트를 함수 내에 추가합니다.
```
function FUNCTION_NAME() {
  // GENERATED SCRIPT IS PASTED HERE BY REMOVING OPENING AND CLOSING <script> TAGS>
}
FUNCTION_NAME();
```

아래 코드 스니펫을 복사하여 nuxt.config.js 파일의 HEADER tag에 붙여넣고 함수 이름과 파일 이름을 업데이트합니다.

__dangerouslyDisableSanitizers: ["script"],
  script: [
    {
      hid: "<FUNCTION_NAME>",
      src: "/<FILENAME>.js",
      defer: true,
      type: "text/javascript",
      charset: "utf-8",
    },
  ],

애플리케이션을 다시 시작합니다.

4. one.newrelic.com에서의 애플리케이션 모니터링

이제 메뉴에서 Browser를 선택하면 one.newrelic.com에서 애플리케이션을 볼 수 있습니다. one.newrelic.com 플랫폼에서 캡처된 모든 메트릭을 보려면 애플리케이션을 선택합니다. 다음 쿼리를 사용해 NRQL로 데이터를 볼 수도 있습니다.

SELECT firstPaint 
FROM PageView

다음 단계는?

NRQL 쿼리를 작성하고 대시보드를 생성하는 방법에 대해 자세히 알아보려면 다음 문서를 확인하십시오.

기본 및 고급 쿼리를 생성 - 쿼리 빌더 소개
대시보드를 맞춤화하고 다양한 작업을 수행 - 대시보드 소개
대시보드를 관리하여
의 디스플레이 모드를 조정하거나 대시보드에 더 많은 콘텐츠를 추가할 수 있습니다.

1. 인프라 에이전트 설치 .css-21sua1{background:none;border:none;width:0;padding:0;}

2. Vue 브라우저 모니터링 설치

3. 통합 구성

4. one.newrelic.com에서의 애플리케이션 모니터링

다음 단계는?

1. 인프라 에이전트 설치