Next.js开发模式下如何自定义服务端错误处理及调试？

一、覆写错误格式化逻辑，清除[object Object]冗余内容 #

通过Webpack别名替换Next.js默认的错误处理模块，自定义格式化逻辑解析[object Object]为可读内容：

• 在next.config.js中添加Webpack配置：

  // next.config.js
  const path = require('path');
  
  module.exports = {
    webpack: (config, { dev }) => {
      if (dev) {
        // 替换Next.js内置的错误处理模块
        config.resolve.alias['next/dist/server/error'] = path.resolve(__dirname, './custom-error-handler.js');
      }
      return config;
    },
  };
  

• 创建custom-error-handler.js，重写错误格式化函数：

  // custom-error-handler.js
  const originalErrorModule = require.requireActual('next/dist/server/error');
  
  function formatError(err) {
    const formatted = originalErrorModule.formatError(err);
    // 将栈追踪中的[object Object]替换为错误的具体JSON结构
    formatted.stack = formatted.stack?.replace(/\[object Object\]/g, () => {
      try {
        return JSON.stringify(err.cause || err, null, 2);
      } catch (e) {
        return '[object Object]';
      }
    });
    return formatted;
  }
  
  module.exports = {
    ...originalErrorModule,
    formatError,
  };
  

二、用Node.js调试器步入Next.js内部代码 #

直接断点到Next.js的错误处理逻辑，追踪[object Object]的生成源头：

• 启动带调试参数的开发服务器：

  node --inspect-brk node_modules/next/dist/bin/next dev
  

• 打开Chrome浏览器并访问chrome://inspect，点击"Configure"添加本地调试端口（默认9229），然后连接到调试进程
• 在Sources面板中定位到Next.js的错误处理文件（如next/dist/server/error.js），设置断点后触发错误，即可逐步排查问题

三、使用本地补丁修改Next.js源码 #

通过patch-package给Next.js打临时补丁，直接修正内部错误处理逻辑：

1. 安装依赖：

   npm install patch-package --save-dev
   

2. 找到node_modules/next/dist/server/error.js中生成栈追踪的代码，修改[object Object]的处理逻辑（比如将对象转为JSON字符串）
3. 生成补丁文件：

   npx patch-package next
   

4. 后续执行npm install时，补丁会自动应用到Next.js源码中

四、缓解开发服务器性能问题 #

• 临时关闭React严格模式：在next.config.js中设置reactStrictMode: false，减少重复渲染导致的错误触发频率
• 清理Next.js缓存：执行rm -rf .next后重启开发服务器，清除堆积的错误日志缓存

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