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

사용자의 편의를 위해 제공되는 기계 번역입니다.

영문본과 번역본이 일치하지 않는 경우 영문본이 우선합니다. 보다 자세한 내용은 이 페이지를 방문하시기 바랍니다.

문제 신고

Nuxt.js 통합

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

1. 인프라 에이전트 설치

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

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

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

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

  1. 딸깍 하는 소리

    Integrations & Agents

  2. 딸깍 하는 소리

    Browser & mobile

  3. Vue

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

3. 통합 구성

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

  1. nuxt.js 애플리케이션의

    static

    폴더에 자바스크립트 파일을 만듭니다.

    bash
    $
    touch <FILENAME>.js
  2. 새로 생성된 JavaScript 파일에서 함수를 생성하고 생성된 스크립트를 함수 내에 추가합니다.

    function FUNCTION_NAME() {
    // GENERATED SCRIPT IS PASTED HERE BY REMOVING OPENING AND CLOSING <script> TAGS>
    }
    FUNCTION_NAME();
  3. 아래 코드 스니펫을 복사하여 nuxt.config.js 파일의 HEADER tag에 붙여넣고 함수 이름과 파일 이름을 업데이트합니다.

    __dangerouslyDisableSanitizers: ["script"],
    script: [
    {
    hid: "<FUNCTION_NAME>",
    src: "/<FILENAME>.js",
    defer: true,
    type: "text/javascript",
    charset: "utf-8",
    },
    ],
  4. 응용 프로그램을 다시 시작하십시오.

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

이제 탐색 모음에서 Browser 선택하면 one.newrelic.com 에서 애플리케이션을 볼 수 있습니다. one.newrelic.com 플랫폼에서 캡처된 모든 지표를 보려면 귀하의 앱을 선택하세요. 다음 쿼리를 사용하여 NRQL로 데이터를 볼 수도 있습니다.

SELECT firstPaint
FROM PageView

다음은 뭐지?

NRQL 쿼리 작성 및 대시보드 생성에 대해 자세히 알아보려면 다음 문서를 확인하세요.

Copyright © 2024 New Relic Inc.

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