Next.js는 완전한 React 프레임워크로 개발자에게 웹 응용 프로그램을 구축하는 데 풍부한 경험을 제공했다.코드 변경, 지원 TypeScript 을 신속하고 신뢰할 수 있으며, 정적 및 서버 쪽에서 페이지를 보여주는 기능을 만들 수 있습니다.파일 시스템과 API 루트 기능은 이를 서버 측 응용 프로그램의 go-to-React 솔루션으로 만든다.Next.js의 또 다른 장점은 web application analytics에 대한 내장 지원이다.이것은 네트워크의 중요한 정보 그룹을 기반으로 하는 데이터를 제공합니다. Next.js application on Vercel 을 배치했다면, 0 설정을 통해 이 정보를 접근할 수 있습니다.프로젝트의 '분석' 옵션에 들어가서 사용하거나 다음 것을 수집할 수 있습니다.js 응용 프로그램의 성능 통계 데이터를 제3자 도구, 예를 들어 구글 분석에 전송한다.
이 문서에서는 Next를 통합하는 방법을 보여 줍니다.js 프로그램은 더 많은 진단을 위해 Google Bugfender 도구와 함께 로그, 피드백, 충돌 보고서를 보냅니다.우리는 Next.js 응용 프로그램에서 Bugfender에게 네트워크의 중요한 정보와 사용자 정의 지표를 보내는 데 중점을 둘 것이다.

무엇이 네트워크의 중요한 정보와 사용자 정의 지표입니까?

Web vitals는 웹 페이지의 사용자 체험을 포착하는 지표이다.Next.js 애플리케이션에서 다음과 같은 네트워크 중요 정보를 얻을 수 있습니다.

첫 번째 적합 페인트(FCP)

최대 함유 페인트(LCP)

누적 레이아웃 횟수(CLS)

FID

TTFB

(1바이트)
이러한 웹 중요 정보 외에도 다음과 같은 사용자 정의 지표를 얻을 수 있습니다.

다음.js수합작용

다음.js 루트가 렌더링으로 변경됨

다음.js render

If you are new to Next.js performance measurement or web application performance debugging, please check out these links for more details:

Next.js Performance Measuring

진흙막이판을 설치하다

시작하려면 Bugfendercreate an account만 사용하십시오.로그인한 후 웹 SDK 옵션을 사용하여 웹 응용 프로그램에 Bugfender 응용 프로그램을 만듭니다.이 step-by-step guide 에 따라 Bugfender 프로그램을 만들 수 있습니다. API 키가 준비되어 있는 것을 발견할 수 있습니다.안전을 유지하다.
프로그램을 만들면 로그, 문제, 피드백, 충돌을 추적할 수 있습니다.다음은 대시보드의 모양입니다.
BugFender 대시보드 및 어플리케이션

다음을 설정합니다.js 응용

다음 질문이 있으면 이 절을 건너뛰세요.js 프로그램이 시작되었습니다.없으면 다음 절차에 따라 하나를 빨리 만듭니다.

어플리케이션을 설정하려면 컴퓨터Next.js를 설치해야 합니다(10.13 이상 권장).응용 프로그램에 대한 성능 검사가 필요하기 때문에, 내장 기능이 필요합니다.시간을 절약하기 위해서, 우리는 기존 템플릿에서 Node.js 응용 프로그램을 만들 것입니다.

Alternatively, You can create an application from scratch using the following command:

npx create-next-app <YOUR_APP_NAME>

Browse to this GitHub project 이 템플릿을 사용하여 Next.js 프로젝트를 만듭니다.

그림 1: 다음 생성템플릿에서 js 프로젝트

새 프로젝트에 적합한 이름(예를 들어 Next.js을 지어 컴퓨터 드라이브에 복제하세요.최근에 만든 디렉토리를 열려면 다음과 같이 하십시오.

cd nextjs-bugfender

다음에 설치에 필요한 의존항.다음 명령을 실행하여 설치합니다.

yarn install # Or, npm install

종속성이 성공적으로 설치되면 다음 명령을 사용하여 로컬에서 애플리케이션을 실행합니다.

yarn dev # Or, npm run dev

프로그램이 성공적으로 실행되고 접근할 수 있는지 확인하는 메시지가 명령 프롬프트에 나타날 것입니다 @ http://localhost:3000:
그림2: 사선 개발 - 생산량

마지막으로 선택한 브라우저를 사용하여 URL에 액세스합니다.이런 페이지를 보셔야 합니다:

그림 3: 시작 페이지
위대하다이것은 우리 nextjs-bugfender 프로그램의 페이지입니다.이 단계에서, 당신은 이 페이지의 대다수 링크를 조회할 수 있어야 합니다.그러나 다음과 같은 몇 가지 문제가 있습니다.

링크가 제대로 작동하지 않는 경우(예: Next.js

Twitter 부분이 좀 빈 것 같아요.사실 두 번째 부분은 의도적이었다.우리가 그것을 해결합시다.프로젝트 폴더의 루트 디렉토리에 다음과 같은 컨텐트를 포함하는 파일을 생성합니다(Original @).

NEXT_PUBLIC_NAME=Mr. Hard Type
NEXT_PUBLIC_FAKE_BLOG_NAME=My Fake Next.js Blog
NEXT_PUBLIC_ORIGINAL_BLOG_NAME=Some Blog
NEXT_PUBLIC_ORIGINAL_BLOG_LINK=https://someblog.info
NEXT_PUBLIC_TWITTER_LINK=https://twitter.com/tapasadhikary

참고: 사용자가 선택한 값을 사용할 수 있습니다.나는 이미 상술한 값을 사용하여 시범을 보였다.
이제 Thread dev 명령을 다시 시작하고 페이지를 새로 고쳐 변경 사항을 봅니다.
그림 4: 정보가 포함된 페이지
참고: 환경 변수에서 이러한 세부 정보를 가져올 필요는 없습니다.본 예에서 우리가 이렇게 하는 것은 우리가 .env.local 중의 환경 처리를 익히기 위해서이다.

Bugfender 및 Nextjs – 함께 걸어온 이야기

Bugfender는 클라이언트 SDK를 제공합니다. Google은 웹 앱 SDK를 사용하여 얼마 전에 구축한 프로그램과 통합할 것입니다.
여기서 주의해야 할 점은 Bugfender의 클라이언트 SDK가 브라우저의 Next.js 대상을 사용한다는 것이다.다음.js 프레임워크는 정적 및 서버 쪽 렌더링 (SSR) 프로그램을 구축하고 window 환경으로 렌더링할 수 있도록 합니다.노드에 정의되지 않은 객체Node.js.js 환경, 이것은 Bugfender와Next의 직접적인 통합을 의미합니다.js에서 다음 오류가 발생할 가능성이 가장 높습니다.

window is not defined

걱정 마.우리는 이 오류를 빙빙 돌려서 Bugfender와Next를 만들 수 있는 방법이 있다.js는 쉽게 협동하여 일할 수 있다.

Bugfender SDK 설치

명령 프롬프트와 프로젝트 폴더의 루트 디렉토리를 열고 이 명령을 사용하여 Bugfender SDK를 설치합니다.

yarn add @bugfender/sdk # Or, npm i @bugfender/sdk

BugFenderAPI 키 추가

Bugfender API 키가 API와 통신해야 합니다.우리는 이 API 키를 공개하고 싶지 않다.따라서 window 파일에 새 키 값 쌍을 추가하십시오.

NEXT_PUBLIC_BUGFENDER_API_KEY=<YOUR_BUGFENDER_API_KEY>

참고: .env.local 파일의 모든 키는 .env.local를 접두어로 사용해야 합니다.

Bugfender 유틸리티 만들기

이제 이러한 API를 패키지할 유틸리티 파일을 만듭니다.이 유틸리티를 사용하면 서버 측 렌더링(SSR)과 함께 사용할 수 있는 JavaScript 모듈을 내보낼 수 있습니다(나중에 자세히 설명합니다).프로젝트 폴더의 루트 디렉토리에 NEXT_PUBLIC_라는 폴더를 만들고 다음과 같은 내용의 util라는 파일을 만듭니다.

import { Bugfender } from '@bugfender/sdk'

const NextBugfender = {
    init: () => {
        Bugfender.init({
            appKey: process.env.NEXT_PUBLIC_BUGFENDER_API_KEY,
        })
    },

    log: (...messages) => {
        Bugfender.log(messages.join( ))
    },

    warn: (...messages) => {
        Bugfender.warn(messages.join( ))
    },

    error: (...messages) => {
        Bugfender.error(messages.join( ))
    },

    sendUserFeedback: (key, value) => {
        Bugfender.sendUserFeedback(key, value)
    },

    sendIssue: (key, value) => {
        Bugfender.sendIssue(key, value)
    },

    sendCrash: (key, value) => {
        Bugfender.sendCrash(key, value)
    }

}

export default NextBugfender;

참고: 환경 변수 (NextBugfender.js 파일의 API 키를 사용하여 Bugfender를 초기화합니다.

사용자 정의 응용 프로그램 구성 요소 만들기

웹의 중요한 정보와 다른 사용자 정의 지표를 수집하기 위해서 사용자 정의 응용 프로그램 구성 요소를 만들고 .env.local 함수를 정의해야 합니다.사용자 정의 프로그램 구성 요소를 만들어서 기본 구성 요소 reportWebVitals 를 덮어쓸 수 있습니다.App 폴더 아래에 구성 요소를 만들었으니 pages/ 파일을 열고 파일 끝에 다음 코드를 추가하십시오.

export function reportWebVitals(metric) {
  switch (metric.name) {
    case "FCP":
      sendAnalytics(metric);
      break;
    case "LCP":
      sendAnalytics(metric);
      break;
    case "CLS":
      sendAnalytics(metric);
      break;
    case "FID":
      sendAnalytics(metric);
      break;
    case "TTFB":
      sendAnalytics(metric);
      break;
    case "Next.js-hydration":
      sendAnalytics(metric);
      break;
    case "Next.js-route-change-to-render":
      sendAnalytics(metric);
      break;
    case "Next.js-render":
      sendAnalytics(metric);
      break;
    default:
      break;
  }
}

_app.js 프레임워크는 웹 중요 정보와 다른 사용자 정의 지표를 보고하기 위해 reportWebVitals 함수를 호출합니다.Bugfender에 자세한 정보를 보내는 Next.js 함수를 호출하고 있습니다.이제 sendAnalytics () 방법의 정의를 살펴보겠습니다.이것이 바로 통합이 이루어지는 곳입니다.

const sendAnalytics = async ({ name, value }) => {
  // 1. Import the Nextjs Bugfender Util module
  const NextBugfender = (await import("../utils/NextBugfender.js")).default;

  // 2. Initialize the Bugfender service
  NextBugfender.init();

    // 3. Add condition to tackle the metrics
  if (name === "FCP") {
    if (value >= 0 && value <= 2000) {
      NextBugfender.log(
        `${name} value ${value} is in range and the speed is fast.`
      );
    } else if (value > 2000 && value <= 4000) {
      NextBugfender.warn(
        `${name} value ${value} is in a bit out of range and the speed is moderate.`
      );
      NextBugfender.sendUserFeedback(
        "FCP Warning",
        "The speed of loading this page may be moderate."
      );
    }
    if (value > 4000) {
      NextBugfender.error(
        `${name} value ${value} is completly out of range and the speed is slow.`
      );
      NextBugfender.sendIssue(
        "Issue with FCP",
        "The speed of loading this page may be slow. Creating an issue."
      );
    }
  } else if (name === "LCP") {
    // Send LCP related logs, events, etc.
  } else if (name === "CLS") {
    // Send CLS related logs, events, etc.
  } else if (name === "FID") {
    // Send FID related logs, events, etc.
  } else {
    NextBugfender.log(`${name} value is: ${value}`);
  }
};

위 코드에서 주의해야 할 사항은 다음과 같습니다.

다음.js는 ES2020sendAnalytics()의 JavaScript를 지원합니다.JavaScript 모듈을 동적으로 가져올 수도 있고 SSR과 함께 사용할 수도 있습니다.우선 dynamic import() 모듈을 가져옵니다.

다음에 우리는 호출NextBugfender.js 방법을 통해 Bugfender를 초기화합니다.

이후에 우리는 보고서의 도량을 검사하기 위해 조건을 도입했다.메트릭 이름에 따라 정상 로그, 경고, 오류 등을 보고하는 논리를 제공합니다. 사용자 피드백을 보내고 버그펜더에 문제를 생성합니다.init()지표와 유사하여 다른 지표에 논리를 추가해야 할 수도 있습니다.

통나무를 쓰레기통에 넣고 검사하다

자, 이제 우리는 모두 준비가 다 되었다.이 프로그램을 사용하기 시작하면 Bugfender에 메트릭을 기록합니다.이제 몇 가지 예를 보고 그것들을 검사합시다.

Bugfender 계기판으로 돌아가서 Bugfender에서 만든 응용 프로그램을 클릭하세요.그것은 너를 FCP 계산서에 가지고 갈 것이다.서로 다른 시간에 수집된 로그 목록을 볼 수 있습니다.

그림 5: 오류 로그 페이지

최신 로그를 클릭하여 자세히 봅니다.사용자 정의 데이터베이스에서 보내는 도량 데이터를 포함하는 로그를 볼 수 있습니다.js 응용 프로그램.

그림 6: 지표 로그

높은 LCP 값으로 인한 문제를 추적할 수도 있습니다.이 문제를 추적 및 복구하기 위해 GitHub로 보낼 수 있습니다.

그림 7: LCP 문제

프로그램이 이상/오류를 던지면 Bugfender는 자동으로 Logs 옵션 카드에 기록합니다.

그림8: 충돌

LCP 등의 문제는 문제 탭에서 확인할 수 있습니다.

그림 9: 문제

응용 프로그램이 사용자 피드백을 보내면 CRASHES 옵션 카드에서 볼 수 있다.여기서 FCP 값이 중간 수준이면 사용자 피드백으로 FCP 경고를 보냅니다.

그림 10: 피드백

됐어, 이렇게!

Next를 성공적으로 통합했습니다.js 응용 프로그램 및 Bugfender에서 성능 지표 로그를 전송합니다.이거 너무 좋지 않아요?

이제 어떡하지?

본고에서 사용한 모든 코드는 이 GitHub 저장소에서 찾을 수 있습니다.리포에 묶인 자술한 파일에 따라 복제/분할/사용: https://github.com/atapas/nextjs-bugfender.
다음은 당신도 유용하다고 느낄 수 있는 링크들입니다.

Next.js Dynamic Import

Bugfender SDK Docs

저희가 가기 전에.

Bugfender는 생산 프로그램에서 오류를 찾을 수 있도록 도와주는 도구입니다.우리는 지식을 공유해야 한다고 굳게 믿는다. 이것이 바로 우리가 왜 이런 글을 써야 하는가이다.마음에 드시면 본문을 공유하거나 signing up in Bugfender를 통해 콘텐츠를 계속 만들 수 있도록 도와주십시오.