Next.js 13中error.tsx组件未触发渲染问题咨询

核心结论 #

你误解了error.tsx的作用范围，它不会捕获客户端交互（如按钮点击）中抛出的运行时错误，仅负责处理路由段内组件渲染阶段的错误。

为什么你的代码不生效 #

error.tsx是App Router中的路由级错误边界，仅针对以下场景触发：

• 服务器组件在渲染（包括数据获取）过程中抛出的错误
• 客户端组件在初始 hydration（水合）阶段抛出的错误

你在按钮点击事件中抛出的错误属于客户端运行时同步错误，不在error.tsx的捕获范围内，因此不会触发该组件渲染。

验证error.tsx正常工作的例子 #

场景1：服务器组件渲染错误 #

修改page.tsx为服务器组件（移除'use client'），在渲染时直接抛错：

// page.tsx
export default function RootPage() {
  throw new Error('服务器渲染错误');
  return <div>页面内容</div>;
}

访问该页面时，error.tsx会被触发并渲染错误信息。

场景2：客户端组件初始 hydration 错误 #

在客户端组件的初始渲染阶段抛错：

// page.tsx
'use client';

export default function RootPage() {
  // 组件挂载时直接抛错，属于初始渲染流程
  throw new Error('水合阶段错误');
  return <button>Error</button>;
}

页面加载时会触发error.tsx。

处理客户端交互错误的方案 #

如果要捕获按钮点击这类运行时交互错误，需要使用React 自定义 ErrorBoundary，示例代码如下：

'use client';
import { Component, ErrorInfo, ReactNode } from 'react';

class ClientErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean; error: Error | null }> {
  constructor(props: { children: ReactNode }) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error('客户端运行时错误:', error, errorInfo);
  }

  resetError = () => {
    this.setState({ hasError: false, error: null });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <p>{this.state.error?.message}</p>
          <button onClick={this.resetError}>重试</button>
        </div>
      );
    }
    return this.props.children;
  }
}

export default function RootPage() {
  return (
    <ClientErrorBoundary>
      <button onClick={() => { throw new Error('Test'); }}>触发错误</button>
    </ClientErrorBoundary>
  );
}

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