Next 14应用根布局意外错误处理：全局Error组件未生效

• 必须标记为客户端组件：全局error.js/tsx组件顶部必须添加'use client'指令，错误处理逻辑运行在客户端，未添加的话Next.js会忽略自定义组件，显示默认错误页面。
• 组件参数需正确：组件必须接收error和reset两个参数，正确的函数签名示例：

  'use client';
  
  export default function Error({ error, reset }) {
    return (
      <div>
        <h2>出错了！</h2>
        <button onClick={() => reset()}>重试</button>
      </div>
    );
  }
  

• 确认文件位置：error.js/tsx必须直接放在app根目录下，子文件夹中的error.js属于页面级错误组件，无法作为全局fallback。
• 区分开发与生产模式：开发模式下Next.js默认显示带调试信息的错误页面，自定义错误组件仅在生产模式下生效，可执行npm run build && npm start测试生产环境效果。
• 检查错误抛出场景：服务器组件中抛出的错误需先经服务器端处理后才会触发客户端全局错误组件；客户端组件中抛出的错误会直接触发全局错误边界。
• 验证Next.js版本：确保使用Next.js 14稳定版，旧版本app目录的错误处理逻辑可能存在兼容性问题。

内容的提问来源于stack exchange，提问作者karim