我的JavaScript异常监控策略：保护前端应用免受错误的困扰！

// 导出一个函数，用于创建 JS 错误监视器
export function createJsErrorMonitor(options: JsErrorMonitorOptions) {


  function getBrowserWindow() {
    return window;
  }
    // 获取浏览器窗口
    const window = getBrowserWindow();
  
  // 如果没有windown，则返回
  if (!window) {
    return;
  }

  // 定义处理错误和拒绝的函数
  const handleError = (e: ErrorEvent) => {
    // 调用 onReport 函数，报告 JS 错误
    options.onReport({
      eventType: EventType.JS_ERROR,
      data: formatError(e),
    });
  };

  const handleRejection = (e: PromiseRejectionEvent) => {
    // 调用 onReport 函数，报告 JS 错误
    options.onReport({
      eventType: EventType.JS_ERROR,
      data: formatError(e),
    });
  };

  // 定义销毁监听器的函数
  const destroyListeners = () => {
    // 移除 error 事件监听器
    window.removeEventListener('error', handleError);
    // 移除 unhandledrejection 事件监听器
    window.removeEventListener('unhandledrejection', handleRejection);
  };

  // 捕获异步 error
  // 添加 error 事件监听器
  window.addEventListener('error', handleError);
  // 添加 unhandledrejection 事件监听器
  window.addEventListener('unhandledrejection', handleRejection);

  // 返回销毁监听器的函数
  return {
    destroy: destroyListeners,
  };
}

    <!-- 监控脚本 -->
    <script src="监控代码"></script>

    <script>
        // 创建 JavaScript 错误监控
        Monitor.createJsErrorMonitor({
            onReport: (e) => {
                console.log(e);
            }
        });
    </script>

    <!-- 示例脚本，模拟跨域错误 -->
   <script src="https://example.com/another-nonexistent.js"></script>

    <!-- 带 crossorigin 属性的示例脚本 -->
    <script src="https://example.com/another-nonexistent.j" crossorigin="anonymous"></script>

<script src="xxxxx.js" crossorigin="anonymous"></script>

import webpack from 'webpack';
import { Hooks } from 'html-webpack-plugin';

export class AddAnonymousWebpackPlugin {
  apply(compiler: webpack.Compiler) {
    compiler.hooks.compilation.tap('AddAnonymousWebpackPlugin', (compilation) => {
      // 通过最终的 webpack 配置的 plugins 属性，根据插件的 constructor.name 拿到 html-webpack-plugin 实例
     const HtmlWebpackPluginInstance: any = compiler.options.plugins
       // 获取插件构造函数
       .map(({ constructor }) => constructor)
        // 查找HtmlWebpackPlugin构造函数
        .find(constructor => constructor && constructor.name === 'HtmlWebpackPlugin');

      if (HtmlWebpackPluginInstance) {
        // 获取 html-webpack-plugin 所有的 hooks
        const hooks = HtmlWebpackPluginInstance.getHooks(compilation) as Hooks;

        // 在插入标签之前做些什么
        hooks.alterAssetTagGroups.tap(
          'AddAnonymousWebpackPlugin', (data) => {
            // 拿到所有的标签，如果是 script 标签，并且满足我们的匹配函数，则将其 attributes.crossorigin = "anonymous"
          data.headTags.forEach(tag => {
              if (tag.tagName === 'script') {
                // 为script标签添加crossorigin属性
                tag.attributes.crossorigin = "anonymous";
              }
            });
            return data;
          },
        );
      }
    });
  }
}