error.js
error 파일을 사용하면 예기치 않은 런타임 오류를 처리하고 대체 UI를 표시할 수 있습니다.
"use client"; // 오류 경계는 클라이언트 컴포넌트여야 합니다
import { useEffect } from "react";
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {
// 오류를 오류 보고 서비스에 기록합니다
console.error(error);
}, [error]);
return (
<div>
<h2>Something went wrong!</h2>
<button
onClick={
// 세그먼트를 다시 렌더링하여 복구를 시도합니다
() => reset()
}
>
Try again
</button>
</div>
);
}"use client"; // 오류 경계는 클라이언트 컴포넌트여야 합니다
import { useEffect } from "react";
export default function Error({ error, reset }) {
useEffect(() => {
// 오류를 오류 보고 서비스에 기록합니다
console.error(error);
}, [error]);
return (
<div>
<h2>Something went wrong!</h2>
<button
onClick={
// 세그먼트를 다시 렌더링하여 복구를 시도합니다
() => reset()
}
>
Try again
</button>
</div>
);
}error.js의 작동 방식
error.js는 라우트 세그먼트와 그 중첩된 자식들을 React 오류 경계로 감싸줍니다. 경계 내에서 오류가 발생하면 error 컴포넌트가 대체 UI로 표시됩니다.
알아두면 좋은 점:
- React DevTools를 사용하면 오류 상태를 테스트하기 위해 오류 경계를 토글할 수 있습니다.
Props
error
error.js 클라이언트 컴포넌트로 전달된 Error 객체의 인스턴스입니다.
알아두면 좋은 점: 개발 중에는 클라이언트로 전달된
Error객체가 직렬화되어 디버깅을 쉽게 하기 위해 원본 오류의message를 포함합니다. 그러나 이 동작은 프로덕션에서 다릅니다. 오류에 포함된 잠재적으로 민감한 세부 정보가 클라이언트에 유출되는 것을 방지하기 위함입니다.
error.message
- 클라이언트 컴포넌트에서 전달된 오류는 원본
Error메시지를 표시합니다. - 서버 컴포넌트에서 전달된 오류는 식별자가 포함된 일반적인 메시지를 표시합니다. 이는 민감한 세부 정보가 유출되는 것을 방지하기 위한 것입니다.
errors.digest의 식별자를 사용하여 해당 서버 측 로그와 일치시킬 수 있습니다.
error.digest
발생한 오류의 자동 생성된 해시입니다. 서버 측 로그에서 해당 오류와 일치시키는 데 사용할 수 있습니다.
reset
오류의 원인이 때때로 일시적일 수 있습니다. 이러한 경우 다시 시도하면 문제가 해결될 수 있습니다.
오류 컴포넌트는 reset() 함수를 사용하여 사용자에게 오류로부터 복구를 시도하도록 요청할 수 있습니다. 실행 시 이 함수는 오류 경계의 내용을 다시 렌더링하려고 시도합니다. 성공하면 대체 오류 컴포넌트가 다시 렌더링된 결과로 대체됩니다.
"use client"; // 오류 경계는 클라이언트 컴포넌트여야 합니다
export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
return (
<div>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</div>
);
}"use client"; // 오류 경계는 클라이언트 컴포넌트여야 합니다
export default function Error({ error, reset }) {
return (
<div>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</div>
);
}global-error.js
루트 레이아웃 또는 템플릿에서 오류를 처리하려면 국제화를 활용하더라도 루트 app 디렉토리에 위치한 app/global-error.js를 사용할 수 있습니다. 글로벌 오류 UI는 자체 <html> 및 <body> 태그를 정의해야 합니다. 이 파일은 활성화될 때 루트 레이아웃 또는 템플릿을 대체합니다.
"use client"; // 오류 경계는 클라이언트 컴포넌트여야 합니다
export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
return (
// global-error는 html과 body 태그를 포함해야 합니다
<html>
<body>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</body>
</html>
);
}"use client"; // 오류 경계는 클라이언트 컴포넌트여야 합니다
export default function GlobalError({ error, reset }) {
return (
// global-error는 html과 body 태그를 포함해야 합니다
<html>
<body>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</body>
</html>
);
}알아두면 좋은 점:
global-error.js는 프로덕션에서만 활성화됩니다. 개발 중에는 대신 오류 오버레이가 표시됩니다.
not-found.js
not-found 파일은 라우트 세그먼트 내에서 notFound() 함수를 호출할 때 UI를 표시합니다.
버전 기록
| 버전 | 변경 사항 |
|---|---|
v13.1.0 | global-error 도입. |
v13.0.0 | error 도입. |