Error Handling Pattern

~20 min · error.tsx, global-error.tsx, boundaries

Level 0Curious

0 XP0/68 lessons0/11 achievements

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

Boundary 계층

app/global-error.tsx       # root layout error 잡음
  app/layout.tsx
    app/dashboard/error.tsx # dashboard page + 아래 잡음
      app/dashboard/page.tsx
        components

`error.tsx` — segment 별

Page 또는 descendant 의 error 가 가장 가까운 error.tsx 로 bubble. Client Component 여야 함 (hook 사용). 자기 layout 의 error 는 절대 안 잡음 — 그거 위해선 parent 에 boundary.

`global-error.tsx` — root layout failure 위해

app/global-error.tsx 에 살아. 자기 과 render — 깨진 root layout 통째로 대체.

Reporting

Boundary 안에서 error object 를 Sentry / Datadog / 본인 logger 로 wire. Framework 가 error.digest 줘 — server log 에 surface 된 같은 id, 그래서 user report 와 trace correlate 가능.

Code

Segment 별 error boundary·tsx

// app/dashboard/error.tsx
'use client';
import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Logger 로 ship; digest 가 server log 와 매칭
    console.error({ digest: error.digest, message: error.message });
  }, [error]);
  return (
    <div className="p-6 text-center">
      <h2 className="text-lg font-semibold">Something went wrong</h2>
      <p className="mt-1 text-sm text-gray-500">{error.message}</p>
      <button onClick={() => reset()} className="mt-4 rounded bg-blue-600 px-3 py-1 text-white">
        Try again
      </button>
    </div>
  );
}

Global error 가 root layout 대체·tsx

// app/global-error.tsx
'use client';
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html>
      <body>
        <h1>Something went very wrong</h1>
        <p>{error.digest}</p>
        <button onClick={() => reset()}>Try again</button>
      </body>
    </html>
  );
}

External links

Error handling

Exercise

error.tsx 를 셋 level (root, dashboard, settings) 에 추가. 깊은 page 에서 error throw 하고 가장 가까운 boundary 가 잡는지 확인. Boundary 의 digest 가 terminal log 의 digest 와 매칭되는지 검증.

Progress

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

← PreviousInternationalization Next →퀴즈 · 4 questions

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

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

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

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