Monitoring & Error Tracking

~20 min · Sentry, Web Vitals, instrumentation

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Instrument 하는 것

Error — Server Component, Server Action, Client Component 의 throw exception 위해 Sentry / Datadog / Bugsnag.
Performance — Page 별 Web Vitals (LCP, CLS, INP); Vercel Speed Insights 또는 본인 reporter.
Log — console call 로부터 structured log; log aggregator 로 pipe.

Instrumentation file

Root 의 instrumentation.ts 가 server start 시 한 번 돌아. Boot 에 한 번 Sentry / OpenTelemetry / 어떤 monitoring SDK 든 init 위해. Next.js 15 부터 stable.

Code

Sentry setup wizard·bash

npx @sentry/wizard@latest -i nextjs
# Wizard 가 instrumentation.ts, sentry.client.config.ts,
# sentry.server.config.ts 만들고 next.config.ts update.

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 boot 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');
  }
}

External links

Exercise

Project 에 Sentry (또는 선호 error tracker) wire. Server Action 에서 의도적 error throw 하고 dashboard 에 user/route metadata 와 함께 도착하는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousProduction 의 Environment Variable Next →Vercel 대안

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.