单页面应用错误处理：捕获SystemJS初始化执行错误的最佳实践

在基于single-spa构建的微前端架构中，SystemJS作为模块加载器扮演着重要角色。当JavaScript文件下载成功但在顶层执行阶段失败时，SystemJS会抛出Error#3错误。这类错误通常发生在React等框架的初始化阶段，开发者需要有效捕获并记录这些错误以进行问题诊断。

错误场景分析

SystemJS Error#3错误表明模块文件已成功下载，但在初始执行阶段失败。常见原因包括：

1. React组件初始化时的类型错误
2. 全局变量污染导致的冲突
3. 依赖项未正确加载
4. 代码语法错误（如ES6+特性在不支持的浏览器中运行）

这类错误仅在浏览器控制台可见，缺乏后端日志记录，给问题排查带来困难。

解决方案：使用SystemJS钩子函数

SystemJS提供了onload钩子函数，允许开发者在模块加载的不同阶段注入自定义逻辑。通过这个机制，我们可以捕获初始化阶段的错误。

System.hooks.onload = function(url, source, integrity) {
  try {
    // 原始加载逻辑
    const originalLoad = System.constructor.prototype.load;
    return originalLoad.call(this, url, source, integrity);
  } catch (err) {
    // 捕获并处理错误
    logErrorToBackend({
      errorType: 'SystemJS Initialization Error',
      message: err.message,
      stack: err.stack,
      moduleUrl: url
    });
    throw err; // 重新抛出以保持原有行为
  }
};

增强型错误处理策略

1. 上下文增强：在错误日志中加入用户环境信息（浏览器版本、设备类型等）
2. 错误聚合：对相似错误进行归并，避免日志爆炸
3. 错误分类：根据错误类型（语法错误、引用错误等）采取不同处理策略
4. 开发/生产差异化处理：开发环境展示详细错误，生产环境提供友好提示

实际应用建议

在single-spa架构中，建议将错误处理逻辑封装为共享模块，供所有微前端应用使用：

// error-handler.js
export function setupSystemJSErrorHandling() {
  System.hooks.onload = function(url, source, integrity) {
    try {
      const originalLoad = System.constructor.prototype.load;
      return originalLoad.call(this, url, source, integrity);
    } catch (err) {
      // 统一错误处理逻辑
      sendToErrorTrackingService(err, { module: url });
      if (process.env.NODE_ENV === 'development') {
        showDevOverlay(err);
      }
      throw err;
    }
  };
}

// 在根应用中初始化
import { setupSystemJSErrorHandling } from 'shared-modules/error-handler';
setupSystemJSErrorHandling();

监控与告警

建立完整的监控体系：

1. 实时错误仪表盘
2. 错误频率阈值告警
3. 影响用户数统计
4. 错误自动分类与优先级划分

通过以上措施，开发者可以全面掌握SystemJS初始化阶段的错误情况，快速定位和解决问题，提升微前端应用的稳定性和用户体验。