微前端架构下如何统一收集各子应用的错误日志？

主应用的 window.onerror 和 window.onunhandledrejection 确实收不到子应用内部的错误，这是因为子应用有自己的沙箱环境，错误被隔离了。直接用 try-catch 包裹渲染逻辑也不行，因为组件内的错误不一定能被捕获到。

稳妥的办法是让每个子应用自己上报错误，同时在性能上不要增加太多开销。可以在每个子应用的入口文件里加一个全局错误捕获器：

// 子应用入口文件

window.addEventListener('error', (event) => {

  reportError(event.error); // 调用你的错误上报函数

  event.preventDefault(); // 阻止默认行为，避免页面崩溃

});



window.addEventListener('unhandledrejection', (event) => {

  reportError(event.reason);

  event.preventDefault();

});



function reportError(error) {

  // 这里实现你的上报逻辑，比如发到服务器

  console.error('子应用错误:', error);

}

每个子应用都加上这段代码，就能保证错误被拦截并上报。 PERFORMANCE 上注意：reportError 要异步执行，别阻塞主线程。

另外，你也可以封装一个错误监控 SDK，在所有子应用中引入，这样更方便统一管理。主应用只需要提供一个上报接口给子应用调用就行。

问题应该出在子应用的错误捕获机制和微前端架构的隔离性上。single-spa为了保证子应用的独立性，会把每个子应用封装在一个独立的作用域里，所以主应用的window.onerror和window.onunhandledrejection无法直接捕获到子应用内部的错误。

要解决这个问题，可以试试以下方案：

### 1. 在子应用中主动上报错误
让每个子应用自己绑定window.onerror和window.onunhandledrejection，然后通过一个公共的日志上报接口把错误信息发出去。比如：

window.onerror = function(message, source, lineno, colno, error) {

  sendErrorToServer({

    message,

    source,

    lineno,

    colno,

    stack: error?.stack

  });

};



window.onunhandledrejection = function(event) {

  sendErrorToServer({

    reason: event.reason,

    stack: event.reason?.stack

  });

};



function sendErrorToServer(data) {

  // 这里可以调用你的日志收集服务

  console.log('上报错误:', data);

}

### 2. 使用单例日志管理器
在主应用中提供一个全局的日志管理器，子应用启动时注入这个管理器。这样所有子应用都可以通过主应用的日志管理器来上报错误。

比如在主应用定义一个日志工具：

class Logger {

  logError(errorInfo) {

    console.log('主应用收到错误:', errorInfo);

    // 发送到后端

  }

}



const loggerInstance = new Logger();

window.__globalLogger__ = loggerInstance; // 挂载到全局

然后在子应用中使用：

if (window.__globalLogger__) {

  window.onerror = function(message, source, lineno, colno, error) {

    window.__globalLogger__.logError({

      message,

      source,

      lineno,

      colno,

      stack: error?.stack

    });

  };



  window.onunhandledrejection = function(event) {

    window.__globalLogger__.logError({

      reason: event.reason,

      stack: event.reason?.stack

    });

  };

}

### 3. 避免白屏问题
你提到的try-catch导致白屏，可能是你在入口处把整个渲染逻辑都包起来了。这种做法确实会捕获异常，但也会阻止页面继续渲染。建议只对特定的业务逻辑进行try-catch，而不是整个渲染流程。

比如：

export default {

  methods: {

    testError() {

      try {

        const nonexistentFunc(); // 这里会报错

      } catch (e) {

        console.error('捕获到错误:', e);

        // 上报错误

      }

    }

  }

};

### 总结
最推荐的是第二种方案，通过主应用提供一个全局的日志管理器，让子应用主动上报错误。这种方式既不会破坏single-spa的隔离性，也能实现统一的错误监控。记得测试一下边界情况，比如子应用未加载完成时发生错误怎么处理。