Next.js中global-error.tsx无法捕获页面错误的原因咨询

你的global-error.tsx没捕获到错误，核心原因是组件执行环境不匹配：

• 你的a/page.tsx是默认的服务器组件（未添加'use client'指令），代码在服务器端执行，抛出的错误属于服务器端渲染错误。
• 而global-error.tsx是客户端组件（标注了'use client'），它仅能捕获客户端组件在渲染、交互过程中产生的错误，以及客户端路由切换时的错误，无法捕获服务器组件在服务器端抛出的错误。

解决方式 #

方式一：用路由级错误边界error.tsx处理服务器组件错误 #

在a目录下创建error.tsx文件，这是Next.js专为路由段设计的错误边界，可捕获该路由下的服务器/客户端组件错误：

'use client';

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div>
      <h2>A页面出错了！</h2>
      <button onClick={() => reset()}>重试</button>
    </div>
  );
}

方式二：将页面改为客户端组件（业务场景允许时） #

给a/page.tsx添加'use client'指令，让它在客户端执行，此时global-error.tsx就能捕获它抛出的错误：

'use client';

export default function Page_A() {
  throw new Error();
  return <div>Error</div>;
}

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