从0死磕全栈之Next.js 中的错误处理机制详解（App Router）

在现代 Web 应用开发中，优雅地处理运行时错误是提升用户体验和系统健壮性的关键。Next.js 在 App Router 架构下引入了基于 React Error Boundary 的错误处理机制，通过特殊的 error.tsx 文件，开发者可以轻松为路由段及其子组件定义降级 UI（fallback UI），并在必要时实现错误恢复。

本文将深入介绍 Next.js App Router 中的错误处理方式，包括局部错误边界、全局错误处理、错误信息传递机制以及错误恢复策略。

---

1. 局部错误处理：error.tsx

在 App Router 中，你可以在任意路由段（route segment）目录下创建一个 error.tsx（或 error.js）文件。该文件会自动将当前路由及其所有嵌套子路由包裹在一个 React Error Boundary 中。

示例：app/dashboard/error.tsx

'use client'; // 必须标记为 Client Componentimport { useEffect } from 'react';export default function Error({error,reset,
}: {error: Error & { digest?: string };reset: () => void;
}) {useEffect(() => {// 可选：将错误上报到错误监控服务console.error(error);}, [error]);return (<div><h2>出错了！</h2><p&