Error Handling
The error.js file convention allows you to gracefully handle runtime errors in nested routes.

Automatically wrap a route segment and its nested children in a React Error Boundary.
Create error UI tailored to specific segments using the file-system hierarchy to adjust granularity.
Isolate errors to affected segments while keeping the rest of the app functional.
Add functionality to attempt to recover from an error without a full page reload.
Create error UI by adding an error.js file inside a route segment and exporting a React component:

Error File
app/dashboard/error.tsx
'use client'; // Error components must be Client components

import { useEffect } from 'react';

export default function Error({
 error,
 reset,
}: {
 error: Error;
 reset: () => void;
}) {
 useEffect(() => {
 // Log the error to an error reporting service
 console.error(error);
 }, [error]);

 return (
 
 Something went wrong!
---------------------
 reset()
 }
 >
 Try again
 
 
 );
}
How error.js Works
How error.js works
error.js automatically creates an React Error Boundary that wraps a nested child segment or page.js component.
The React component exported from the error.js file is used as the fallback component.
If an error is thrown within the error boundary, the error is contained, and the fallback component is rendered.
When the fallback error component is active, layouts above the error boundary maintain their state and remain interactive, and the error component can display functionality to recover from the error.
Recovering From Errors
The cause of an error can sometimes be temporary. In these cases, simply trying again might resolve the issue.

An error component can use the reset() function to prompt the user to attempt to recover from the error. When executed, the function will try to re-render the Error boundary's contents. If successful, the fallback error component is replaced with the result of the re-render.

app/dashboard/error.tsx
'use client';

export default function Error({
 error,
 reset,
}: {
 error: Error;
 reset: () => void;
}) {
 return (
 
 Something went wrong!
---------------------
 reset()}>Try again
 
 );
}
Nested Routes
React components created through special files are rendered in a specific nested hierarchy.

For example, a nested route with two segments that both include layout.js and error.js files are rendered in the following simplified component hierarchy:

The rendered nested component hierarchy of two route segments with layout.js and error.js special files
The nested component hierarchy has implications for the behavior of error.js files across a nested route:

Errors bubble up to the nearest parent error boundary. This means an error.js file will handle errors for all its nested child segments. More or less granular error UI can be achieved by placing error.js files at different levels in the nested folders of a route.
An error.js boundary will not handle errors thrown in a layout.js component in the same segment because the error boundary is nested inside that layouts component.
Handling Errors in Layouts
error.js boundaries do not catch errors thrown in layout.js or template.js components of the same segment. This intentional hierarchy keeps important UI that is shared between sibling routes (such as navigation) visible and functional when an error occurs.

To handle errors within a specific layout or template, place an error.js file in the layouts parent segment.

To handle errors within the root layout or template, use a variation of error.js called global-error.js.

Handling Errors in Root Layouts
The root app/error.js boundary does not catch errors thrown in the root app/layout.js or app/template.js component.

To specifically handle errors in these root components, use a variation of error.js called app/global-error.js located in the root app directory.

Unlike the root error.js, the global-error.js error boundary wraps the entire application, and its fallback component replaces the root layout when active. Because of this, it is important to note that global-error.js must define its own and tags.

global-error.js is the least granular error UI and can be considered "catch-all" error handling for the whole application. It is unlikely to be triggered often as root components are typically less dynamic, and other error.js boundaries will catch most errors.

Even if a global-error.js is defined, it is still recommended to define a root error.js whose fallback component will be rendered within the root layout, which includes globally shared UI and branding.

app/global-error.tsx
'use client';

export default function GlobalError({
 error,
 reset,
}: {
 error: Error;
 reset: () => void;
}) {
 return (
 
 
 
 Something went wrong!
---------------------
 reset()}>Try again
 
 
 );
}
Handling Server Errors
If an error is thrown during data fetching or inside a Server Component, Next.js will forward the resulting Error object to the nearest error.js file as the error prop.

When running next dev, the error will be serialized and forwarded from the Server Component to the client error.js. To ensure security when running next start in production, a generic error message is forwarded to error along with a .digest which contains a hash of the error message. This hash can be used to correspond to server logs.

Next Steps
Loading UI
Learn how to create Loading States for your application.
error.js
Required and optional params for error files.
오류 처리error.js 파일 규칙을 사용하면 중첩된 라우트에서 런타임 오류를 우아하게 처리할 수 있습니다.경로 세그먼트와 그 중첩된 자식들을 React 에러 바운더리에서 자동으로 래핑합니다.파일 시스템 계층 구조를 사용하여 특정 세그먼트에 맞춘 오류 UI를 생성하여 세분성을 조정할 수 있습니다.앱의 나머지 기능은 유지하면서 영향을 받는 세그먼트에 대한 오류를 격리합니다.전체 페이지를 다시 로드하지 않고 오류에서 복구를 시도하는 기능을 추가합니다.경로 세그먼트 내에 error.js 파일을 추가하고 React 컴포넌트를 내보내서 오류 UI를 생성합니다:오류 파일app/dashboard/error.tsx'use client'; // 오류 컴포넌트는 클라이언트 컴포넌트여야 합니다.'react'에서 { useEffect }를 가져옵니다;기본 함수 내보내기 Error({ error, reset,}: { error: 오류; reset: () => void;}) { useEffect(() => { // 오류 보고 서비스에 오류를 로그합니다. console.error(error); }, [error]); 반환 (  뭔가 잘못되었습니다!--------------------- reset() } > 다시 시도   );}error.js의 작동 방식error.js의 작동 방식error.js는 중첩된 자식 세그먼트 또는 page.js 컴포넌트를 감싸는 React Error Boundary를 자동으로 생성합니다.error.js 파일에서 내보낸 React 컴포넌트가 폴백 컴포넌트로 사용됩니다.에러 경계 내에서 에러가 발생하면 에러가 포함되고 폴백 컴포넌트가 렌더링됩니다.폴백 오류 컴포넌트가 활성화되면 오류 경계 위의 레이아웃은 해당 상태를 유지하며 대화형 상태를 유지하며 오류 컴포넌트는 오류를 복구하는 기능을 표시할 수 있습니다.오류에서 복구하기오류의 원인은 일시적인 것일 수 있습니다. 이러한 경우 단순히 다시 시도하면 문제가 해결될 수 있습니다.오류 컴포넌트는 reset() 함수를 사용하여 사용자에게 오류 복구를 시도하라는 메시지를 표시할 수 있습니다. 이 함수가 실행되면 오류 경계의 내용을 다시 렌더링하려고 시도합니다. 성공하면 폴백 오류 컴포넌트가 다시 렌더링한 결과로 대체됩니다.app/dashboard/error.tsx'클라이언트 사용';내보내기 기본 함수 Error({ error, reset,}: { error: 오류; reset: () => void;}) { 반환 (  뭔가 잘못되었습니다!--------------------- reset()}>다시 시도  );}중첩된 경로특수 파일을 통해 생성된 React 컴포넌트는 특정 중첩 계층 구조로 렌더링됩니다.예를 들어 layout.js와 error.js 파일을 모두 포함하는 두 개의 세그먼트가 있는 중첩된 경로는 다음과 같은 단순화된 컴포넌트 계층구조로 렌더링됩니다:layout.js 및 error.js 특수 파일이 포함된 두 개의 경로 세그먼트의 중첩된 컴포넌트 계층 구조 렌더링중첩된 컴포넌트 계층 구조는 중첩된 경로에서 error.js 파일의 동작에 영향을 미칩니다:오류는 가장 가까운 상위 오류 경계까지 버블로 표시됩니다. 즉, error.js 파일은 중첩된 모든 하위 세그먼트에 대한 오류를 처리합니다. 경로의 중첩된 폴더에서 error.js 파일을 서로 다른 수준에 배치하면 어느 정도 세분화된 오류 UI를 구현할 수 있습니다.오류 경계가 해당 레이아웃 컴포넌트 내부에 중첩되어 있기 때문에 error.js 경계는 동일한 세그먼트의 layout.js 컴포넌트에서 발생한 오류를 처리하지 않습니다.레이아웃에서 에러 처리하기error.js 경계는 같은 세그먼트의 layout.js 또는 template.js 컴포넌트에서 발생한 오류를 포착하지 않습니다. 이 의도적인 계층 구조는 오류가 발생했을 때 형제 경로(예: 탐색) 간에 공유되는 중요한 UI가 계속 표시되고 작동하도록 합니다.특정 레이아웃 또는 템플릿 내에서 오류를 처리하려면 레이아웃 상위 세그먼트에 error.js 파일을 배치합니다.루트 레이아웃 또는 템플릿 내에서 오류를 처리하려면 global-error.js라는 error.js의 변형을 사용합니다.루트 레이아웃에서 오류 처리하기루트 app/error.js 경계는 루트 app/layout.js 또는 app/template.js 컴포넌트에서 발생한 오류를 포착하지 못합니다.이러한 루트 컴포넌트의 오류를 구체적으로 처리하려면 루트 앱 디렉터리에 있는 app/global-error.js라는 error.js의 변형을 사용하세요.루트 error.js와 달리 global-error.js 오류 경계는 전체 애플리케이션을 감싸며, 해당 폴백 컴포넌트가 활성화되면 루트 레이아웃을 대체합니다. 따라서 global-error.js는 자체 및 태그를 정의해야 한다는 점에 유의해야 합니다.global-error.js는 가장 세분화된 오류 UI이며 전체 애플리케이션에 대한 "포괄적인" 오류 처리로 간주할 수 있습니다. 루트 컴포넌트는 일반적으로 덜 동적이며 다른 error.js 경계가 대부분의 오류를 포착하므로 자주 트리거되지 않을 가능성이 높습니다.global-error.js가 정의되어 있더라도 전역적으로 공유되는 UI 및 브랜딩을 포함하는 루트 레이아웃 내에서 렌더링될 폴백 컴포넌트가 있는 루트 error.js를 정의하는 것이 좋습니다.app/global-error.tsx'클라이언트 사용';내보내기 기본 함수 GlobalError({ error, reset,}: { error: 오류; reset: () => void;}) { 반환 (    뭔가 잘못되었습니다!--------------------- reset()}>다시 시도   );}서버 에러 처리하기데이터를 불러오는 도중 또는 서버 컴포넌트 내부에서 오류가 발생하면 Next.js는 결과 오류 객체를 가장 가까운 error.js 파일에 오류 프로퍼티로 전달합니다.r