Next.js SDK를 제공한 이유와 사용 방법

제목에서 알 수 있듯이 SDK for Next.js 을 배송했습니다. 즉, 오류를 캡처하고, 성능을 측정하고, 릴리스를 관리하고, 의심스러운 커밋을 구성하고, 소스 맵을 자동으로 업로드하여 제로(-ish) 구성으로 축소되지 않은 JavaScript 및 TypeScript를 볼 수 있습니다.

다음 목록에 Next.js가 포함된 이유는 무엇입니까? 가장 빠르게 성장하는React 프레임워크 중 하나이며 개발자들이 좋아합니다. Next.js는 기능을 빠르게 구축하고, 로컬 변경 사항을 빠르게 확인하고, 구축 시간을 줄이는 데 도움이 되는 개발자 환경을 제공합니다.

"Next.js는 전통적으로 복잡한 결정을 간단한 구현 세부 정보로 바꿉니다. 기존 React 구성 요소와 Material UI를 사용하여 새 페이지를 생성하는 작업이 Next를 사용하여 며칠에서 몇 시간으로 단축되었습니다."

– Sean Parmelee, 애플리케이션 아키텍트, Care.com

이전에 Next.js 프로젝트를 모니터링하려면 @sentry/node 및 @sentry/react SDK를 설치해야 했습니다. 둘 다 설치하고 환경을 올바르게 구성하는 것은 시간이 많이 걸리고 말 그대로 재미가 없었습니다. 새로운 Next.js SDK는 모든 작업을 수행하며 소스 맵을 업로드하기 위해 당사의 Webpack Plugin 또는 sentry-cli 와 원활하게 작동합니다.

Sentry for Next.js를 시작하려면 SDK를 설치하기만 하면 됩니다.
yarn add @sentry/nextjs
그런 다음 다음을 구성합니다.
npx @sentry/wizard -i nextjs
SDK를 초기화할 때 tracesSampleRate 및 sentry.client.config.js 모두에서 sentry.server.config.js를 설정하여 performance monitoring을 구성합니다.

Sentry.init({
  // ...
  tracesSampleRate: 1.0
});

그렇게 하면 프런트엔드 트랜잭션이 자동으로 캡처됩니다. API 요청 트랜잭션을 캡처하려면 핸들러를 withSentry 헬퍼에 래핑하십시오. (힌트: 해당 경로에서 오류를 캡처하기 위해 이미 SDK를 사용하고 있다면 이미 이 작업을 수행했을 것입니다. 추가 구성이 필요하지 않습니다.)

import { * as Sentry } from ‘@sentry/nextjs’;
Sentry.init({ ... });

function handler(req, res) {
  // ...
}

export default Sentry.withSentry(handler);

성능이 좋지 않은 API 또는 느린 데이터베이스 쿼리를 빠르게 추적할 수 있습니다. Quick TraceTrace View 및 Suspect 태그와 같은 새로운 기능을 통해 Sentry는 프런트엔드 문제를 백엔드의 근본 원인에 연결하고 그 반대의 경우도 마찬가지입니다.



Trace View는 단일 화면에서 모든 프로젝트에 걸쳐 지정된 트랜잭션 및 종속성에 대한 폭포수 보기를 제공합니다.



콘텐츠 검색 및 중앙 집중화 도구인 eesel의 공동 설립자인 Stefen Alper와 같은 SDK의 얼리 어답터들은 이미 Sentry for Next.js를 사용하여 오류를 캡처하고 있습니다. 이제 그들(및 귀하)도 성능 데이터를 캡처할 수 있습니다.

"우리는 개발 경험과 확장성을 위해 Next.js로 옮겼습니다. Sentry의 오류 모니터링 오퍼링의 오랜 사용자로서 Sentry의 새로운 Next.js SDK로 성능 모니터링과 릴리스 관리를 시작할 수 있기를 기대합니다."

–Stefen Alper, eesel.app 공동 창립자

우리Next.js SDK를 설치하고 어떤 커밋이 문제를 일으켰고 누가 책임이 있는지 꽤 좋은 아이디어를 얻고 스택 추적이 작성한 원래 코드처럼 보이도록 소스 맵을 자동으로 업로드합니다. 또한 join us 2021년 6월 24일 Sentry 및 Netlify를 사용하여 Next.js 애플리케이션을 빌드, 배포 및 모니터링하는 방법에 대한 라이브 워크숍을 진행합니다.