오류·성능·로그를 한 관측 체계로 묶기

서로 다른 신호를 따로 수집해

오류는 서버 컴포넌트, 서버 액션, 클라이언트 컴포넌트에서 던져진 예외를 Sentry, Datadog, Bugsnag 같은 도구로 보내.
성능은 페이지별 LCP, CLS, INP를 Vercel Speed Insights나 자체 reporter로 모아.
로그는 console 문자열에 머물지 말고 요청 ID와 필드를 가진 구조화 로그로 만들어 수집기로 보내.

`instrumentation.ts`에서 한 번 초기화해

프로젝트 루트의 instrumentation.ts는 서버가 시작할 때 한 번 실행돼. Sentry, OpenTelemetry, 다른 모니터링 SDK를 부팅 과정에서 등록하는 자리야. 이 API는 Next.js 15부터 안정화됐어.

사용자 보고와 서버 사건을 연결해

오류 digest와 요청 ID를 클라이언트 오류 화면, 서버 로그, trace에 함께 남겨. “안 돼요”라는 보고를 같은 배포와 같은 요청의 사건으로 찾아갈 수 있어야 관측 가능성이 생겨.

수집 자체도 실패할 수 있어

관측 도구가 느리거나 끊겼다고 사용자 요청까지 실패하게 만들지 마. 전송 실패를 제한하고 비밀·개인정보를 scrub하며, production에서 실제 이벤트가 도착하는지 배포 뒤 확인해.

오류·trace·로그에 같은 요청 ID, 사용자 범주의 익명 식별자, route, 배포 SHA를 넣어 한 사건을 따라갈 수 있게 해. instrumentation.ts 초기화가 serverless 인스턴스마다 안전하게 반복되고 SDK 실패가 요청을 막지 않는지 확인해. 알림은 사용자가 실제로 영향을 받을 조건에 맞춰. 모든 것을 수집하면 관측 가능성이 아니라 비용과 개인정보 위험이 커져. 원문 폼, token, cookie는 scrub하고 보존 기간을 정해. 반대로 dashboard를 설치했다는 사실만으로는 부족해. 의도적 오류와 느린 요청을 production과 같은 환경에서 보내 실제 경보까지 닿는지 시험해.

instrumentation.ts에서 추적기를 초기화하고 서버 컴포넌트·액션·클라이언트에서 의도적 오류를 하나씩 보내. dashboard에서 요청 ID·route·배포 SHA가 연결되는지, 비밀이 scrub되는지, 추적기 endpoint를 막아도 사용자 요청은 성공하거나 안전하게 실패하는지 확인해.

Code

Sentry 설정 도우미·bash

npx @sentry/wizard@latest -i nextjs
# 설정 도우미가 instrumentation.ts와 sentry.client.config.ts,
# sentry.server.config.ts를 만들고 next.config.ts를 갱신해.

Vercel Analytics와 Speed Insights·tsx

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html><body>
      {children}
      <Analytics />
      <SpeedInsights />
    </body></html>
  );
}

instrumentation.ts 시작 hook·ts

// instrumentation.ts
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    await import('./lib/sentry.server');
  }
  if (process.env.NEXT_RUNTIME === 'edge') {
    await import('./lib/sentry.edge');
  }
}

서로 다른 신호를 따로 수집해

`instrumentation.ts`에서 한 번 초기화해

사용자 보고와 서버 사건을 연결해

수집 자체도 실패할 수 있어

Code

External links

Exercise

Progress

댓글 0

서로 다른 신호를 따로 수집해

instrumentation.ts에서 한 번 초기화해

사용자 보고와 서버 사건을 연결해

수집 자체도 실패할 수 있어

Code

External links

Exercise

Progress

`instrumentation.ts`에서 한 번 초기화해