[webpack] 第2039天 在webpack中，怎么做错误上报？

[haizhilin2013]

第2039天 在webpack中，怎么做错误上报？

3+1官网

我也要出题

[Elylicery]

在使用 Webpack 进行项目构建时，错误上报通常涉及到监听编译过程中的错误，并将这些错误信息发送到一个服务器或日志系统中。可以通过使用 Webpack 的钩子和插件来实现这一功能。

1. 利用webpack的compiler.hooks 监听事件在构建过程中的多个生命周期钩子上注册自定义函数，例如

const webpack = require('webpack');
const MyWebpackErrorReporter = require('./myErrorReporter'); // 假设这是一个上报错误的模块

module.exports = {
  // 你的其他 Webpack 配置
  plugins: [
    {
      apply: (compiler) => {
        // 监听 `done` 事件（当编译完成时）
        compiler.hooks.done.tap('MyDonePlugin', (stats) => {
          if (stats.hasErrors()) {
            const errors = stats.compilation.errors.map(err => err.message).join('\n');
            MyWebpackErrorReporter.report(errors); // 调用你的错误上报方法
          }
        });
      }
    }
  ]
};

2. 使用自定义插件plugin上报错误

class ErrorReporterPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('ErrorReporterPlugin', (stats) => {
      if (stats.hasErrors()) {
        const errors = stats.compilation.errors.map(err => err.message).join('\n');
        this.reportErrors(errors); // 上报错误
      }
    });
  }

  reportErrors(errors) {
    // 这里实现错误上报的逻辑，例如发送 HTTP 请求
    console.error(errors); // 输出到控制台
    // 实际上你可能想发送到一个服务器
  }
}

module.exports = {
  // 你的其他 Webpack 配置
  plugins: [
    new ErrorReporterPlugin()
  ]
};