[Next.js] error.tsx와 useErrorHandler를 활용한 전역 에러 처리
안녕하세요.
이번 시간에는 Next.js 15버전에서 error.tsx와 useErrorHandler.ts 를 활용한 전역 에러 처리에 대해 학습합니다.
- 미리보기 -
error.tsx를 통해 에러 처리 후 의도적으로 컴포넌트 마운트 시 에러를 발생시키자 위와 같이 에러 컴포넌트를 렌더링합니다.
useErrorHandler.ts를 통해 에러 처리 후 의도적으로 장바구니 아이콘 클릭 시 에러를 발생시키자 위와 같이 미리 정의한 에러 메시지가 출력됩니다.
- 설명 -
1. error.tsx
error.tsx는 컴포넌트 레벨에서 렌더링 중 발생하는 에러를 감지합니다.
Next.js에서는 error.tsx를 통해 에러를 처리하고 화면을 렌더링합니다.
즉, 특정 컴포넌트에서 렌더링 도중 에러가 발생하면 error.tsx가 호출됩니다.
error.tsx가 호출되면 UI를 업데이트하고 에러를 사용자에게 보여줍니다.
예를 들어 특정 페이지 렌더링 시 오류가 발생했다면 error.tsx가 이를 처리하고 화면에는 error.tsx에서 리턴한 UI가 렌더링됩니다.
error.tsx를 활용하여 컴포넌트 레벨에서 렌더링 중 발생하는 모든 에러를 감지할 수 있습니다.
2. useErrorHandler
useErrorHandler는 커스텀훅으로, 함수 레벨에서 발생하는 에러를 감지하고 개발자가 원하는 동작을 수행합니다.
useErrorHandler를 활용하여 중복된 try...catch 코드를 제거할 수 있습니다.
- 비교 -
구분 error.tsx (Error Boundary) useErrorHandler (핸들러 함수)
| 적용 범위 | 컴포넌트 전체 렌더링 중 발생하는 에러 | 특정 함수나 이벤트 핸들러의 에러 감지 |
| 에러 발생 시 동작 | error.tsx 렌더링 (전역 에러 UI 표시) | 원하는 동작 수행 (예: 메시지 출력, 상태 업데이트) |
| 사용 예시 | 컴포넌트 렌더링 오류, 전역 에러 감지 | 버튼 클릭, API 호출, 이벤트 핸들러 오류 |
| 재사용성 | Next.js가 제공하는 기본 기능 | 커스텀 훅으로 작성해 어디서든 재사용 가능 |
- 실습 -
1. error.tsx
src / app 에 error.tsx를 생성합니다.
'use client'; // 클라이언트 컴포넌트
import { useEffect } from 'react';
interface ErrorProps {
error: Error; // 에러 객체
reset: () => void; // 에러 리셋 함수
}
export default function GlobalError({ error, reset }: ErrorProps) {
useEffect(() => {
console.log("에러 발생!");
console.error("에러입니다!", error);
}, [error]);
return (
<html>
<body>
<h2>에러가 발생했습니다!</h2>
<button onClick={() => reset()}>다시 시도</button>
</body>
</html>
);
}위 코드를 복사 붙여넣기 합니다.
useEffect(() => {
throw new Error("테스트 에러 발생!");
}, []);에러를 발생시킬 컴포넌트에 위 코드를 삽입합니다.
에러를 발생시킨 컴포넌트에 접속 시 위와 같이 error.tsx에서 오류를 감지하고 오류 UI를 렌더링합니다.
이를 통해 error.tsx로 컴포넌트 레벨에서 렌더링 중 발생하는 에러를 감지하는 방법에 대해 학습했습니다.
2. useErrorHandler
src / hooks 에 useErrorHandler.ts 파일을 생성합니다.
import { useState } from "react";
// 전역 에러 핸들러 커스텀 훅
export default function useErrorHandler() {
const [error, setError] = useState<string | null>(null);
const handleError = async (callback: () => void | Promise<void>) => {
try {
await callback(); // 실제 이벤트 핸들러 실행
} catch (err: any) {
console.error("에러 발생:", err.message); // 에러 발생 시 개발자가 정의한 동작 수행
setError(err.message || "알 수 없는 오류가 발생했습니다.");
}
};
return { handleError, error };
}위 코드를 복사 붙여넣기 합니다.
const { handleError, error } = useErrorHandler();커스텀훅을 호출합니다.
function testFunc() {
handleError(() => {
// ...작동 중 에러 발생 여부를 감지하고 싶은 코드를 추가합니다.
throw new Error("장바구니 추가 중 오류 발생!"); // 의도적인 에러 발생
});
}작동 중 에러 발생 여부를 감지하고 싶은 코드 handleError 함수로 감싸줍니다.
testFunc() 함수 실행 시 오류가 발생하여 개발자가 정의한 대로 에러 메시지를 출력합니다.
이를 통해 useErrorHandler 로 함수 레벨에서 발생하는 에러를 감지하는 방법에 대해 학습했습니다.
정리
1. error.tsx: 컴포넌트 렌더링 중 발생한 에러를 전역적으로 처리합니다.
2. 핸들러 함수 (useErrorHandler): 함수나 이벤트 실행 중 발생하는 에러를 개별적으로 처리할 수 있도록 도와줍니다.