如何阻止React在生产环境中隐藏错误信息？

我太懂这种排查生产环境错误的痛苦了——React把Server Components的错误信息遮得严严实实，连第三方包抛的错都看不到完整栈，用Rollbar也只能拿到模糊的提示，排查起来真的头大！

针对你遇到的问题，尤其是要覆盖所有未处理异常和第三方包报错的场景，给你两个实用的解决方案：

方案一：Node.js全局异常捕获，绕过React的错误包装 #

直接在Node.js层面捕获所有未处理的异常，在React对错误信息做模糊处理之前，就把原始错误上报给Rollbar。这种方法能覆盖所有类型的错误，包括你自己代码、第三方包甚至Node.js本身的未捕获异常。

在你的Next.js项目根目录创建一个server-error-catcher.js文件，然后在next.config.js或者项目入口引入它：

// server-error-catcher.js
import Rollbar from 'rollbar';

// 初始化Rollbar
const rollbar = new Rollbar({
  accessToken: '你的Rollbar Token',
  captureUncaught: false, // 手动捕获，避免重复上报
  captureUnhandledRejections: false,
});

// 捕获未处理的同步异常
process.on('uncaughtException', (error) => {
  // 直接上报原始错误信息和栈追踪
  rollbar.error('未捕获同步异常', error);
  // 生产环境建议退出进程，避免不稳定状态
  process.exit(1);
});

// 捕获未处理的异步拒绝
process.on('unhandledRejection', (reason, promise) => {
  rollbar.error('未捕获异步拒绝', { reason, promise });
});

然后在next.config.js顶部引入这个文件：

// next.config.js
import './server-error-catcher.js';

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 你的其他配置
};

export default nextConfig;

方案二：利用Next.js实验性Server Components错误处理器 #

Next.js 14+提供了实验性的Server Components错误处理器配置，能在React包装错误之前拿到原始异常，非常适合你的场景：

在next.config.js中添加如下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsErrorHandler: (error) => {
      // 这里拿到的是未被React模糊处理的原始错误
      rollbar.error('Server Components 错误', error);
      // 继续抛出错误，让React完成后续的错误流程（比如显示错误页面）
      throw error;
    },
  },
};

export default nextConfig;

这个方法专门针对Server Components的错误，能覆盖组件渲染过程中抛出的所有异常，包括第三方依赖的报错。

关键提醒 #

这两个方案的核心思路都是在React对错误信息做模糊处理之前，提前捕获并上报原始错误，完美解决你自定义ServerError覆盖范围有限的问题。不需要修改React的默认行为，也不会泄露敏感信息（只要你确保上报给Rollbar的信息是经过筛选的，或者Rollbar的访问权限是安全的）。

备注：内容来源于stack exchange，提问作者Ricardo Andrés Bello