在html-webpack-plugin中为生成的script标签添加onerror事件处理

html-webpack-plugin是Webpack生态中一个非常实用的插件，它能够自动将打包生成的JavaScript文件注入到HTML模板中。在实际开发中，我们有时需要为这些自动生成的script标签添加自定义的错误处理逻辑，比如当脚本加载失败时执行特定的回调函数。

为什么需要onerror事件处理

在现代前端开发中，脚本加载失败是一个需要优雅处理的情况。可能的原因包括：

• 网络问题导致资源加载失败
• CDN节点故障
• 脚本文件被误删除或路径错误
• 内容安全策略(CSP)阻止了脚本加载

为script标签添加onerror事件处理器可以让我们在这些情况下执行备用逻辑或向用户显示友好的错误提示。

实现方法

html-webpack-plugin提供了强大的钩子系统，允许我们在生成最终HTML前修改内容。我们可以通过创建一个自定义插件来实现为script标签添加onerror属性：

class ScriptErrorHandlerPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('ScriptErrorHandlerPlugin', (compilation) => {
      compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(
        'ScriptErrorHandlerPlugin',
        (data, cb) => {
          // 遍历所有script标签
          data.head = data.head.map(tag => {
            if (tag.tagName === 'script' && tag.attributes) {
              tag.attributes.onerror = 'handleError()';
            }
            return tag;
          });
          
          data.body = data.body.map(tag => {
            if (tag.tagName === 'script' && tag.attributes) {
              tag.attributes.onerror = 'handleError()';
            }
            return tag;
          });
          
          cb(null, data);
        }
      );
    });
  }
}

使用示例

在webpack配置中，我们需要先实例化这个自定义插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptErrorHandlerPlugin = require('./ScriptErrorHandlerPlugin');

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin(),
    new ScriptErrorHandlerPlugin()
  ]
};

注意事项

1. 确保全局作用域中定义了handleError函数，或者使用更安全的命名空间方式调用
2. 考虑使用try-catch包裹错误处理逻辑，避免错误处理函数本身抛出异常
3. 在生产环境中，建议将错误信息上报到服务器以便监控
4. 对于关键脚本，可以考虑实现自动重试机制

更健壮的实现方案

对于企业级应用，我们可以实现更完善的错误处理：

tag.attributes.onerror = `
  if (typeof window.globalErrorHandler === 'function') {
    window.globalErrorHandler({
      type: 'script',
      src: '${tag.attributes.src}',
      timestamp: Date.now()
    });
  }
`;

这种方式提供了更详细的错误上下文信息，便于后续分析和处理。

通过这种方式，我们可以为html-webpack-plugin生成的脚本添加强大的错误处理能力，提升应用的健壮性和用户体验。