Next.js 14 Pages Router SSR局部错误捕获方案咨询

针对Pages Router SSR时单个组件出错导致整页返回500的问题，以下是几种可行的替代方案，实现类似App Router的错误隔离效果：

1. 封装支持SSR的错误边界组件 #

React原生Error Boundary不支持SSR，但可以手动扩展，在服务器端渲染阶段通过try/catch捕获组件渲染错误，客户端则复用Error Boundary逻辑：

import React from 'react';

class SsrErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error('客户端组件错误:', error, info);
  }

  render() {
    const { children, fallback = <div>组件加载失败，请稍后重试</div> } = this.props;

    // SSR阶段手动捕获渲染错误
    if (typeof window === 'undefined') {
      try {
        return React.cloneElement(children);
      } catch (error) {
        console.error('SSR组件错误:', error);
        return fallback;
      }
    }

    // 客户端使用Error Boundary
    if (this.state.hasError) {
      return fallback;
    }

    return children;
  }
}

export default SsrErrorBoundary;

使用方式 #

在页面中用该组件包裹易出错的子组件即可：

export default function HomePage() {
  return (
    <div>
      <MyComponent1 />
      <MyComponent2 />
      <SsrErrorBoundary fallback={<div>MyComponent3加载失败</div>}>
        <MyComponent3 />
      </SsrErrorBoundary>
    </div>
  );
}

这个组件会在SSR时单独捕获子组件的渲染错误，返回fallback内容，不影响其他组件；客户端运行时错误也会被原生Error Boundary拦截，实现全链路错误隔离。

2. 提前在getServerSideProps中处理组件依赖错误 #

如果组件的错误来源于数据获取或预渲染逻辑，可以将这部分逻辑移到getServerSideProps中提前捕获错误，再将状态传递给页面组件：

export default function HomePage({ component3Data, isComponent3Error }) {
  return (
    <div>
      <MyComponent1 />
      <MyComponent2 />
      {isComponent3Error ? (
        <div>MyComponent3加载失败</div>
      ) : (
        <MyComponent3 data={component3Data} />
      )}
    </div>
  );
}

export async function getServerSideProps() {
  let component3Data = null;
  let isComponent3Error = false;

  try {
    // 执行MyComponent3依赖的SSR数据获取或预处理逻辑
    component3Data = await fetchComponent3Data();
  } catch (error) {
    isComponent3Error = true;
    console.error('Component3 SSR数据错误:', error);
  }

  return {
    props: { component3Data, isComponent3Error }
  };
}

这种方式适合组件错误与数据强相关的场景，提前在服务端处理错误状态，页面组件根据状态分支渲染，避免组件渲染时抛出错误。

为什么之前的HOC方案失效？ #

多数自定义HOC仅在组件挂载阶段做处理，没有在SSR的同步渲染流程中加入try/catch逻辑。而上面的错误边界组件直接在render方法中针对SSR环境做了错误捕获，能覆盖子组件的渲染错误。

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