巧用 Sentry，解决 Qiankun 微前端下异常上报难题
2023-11-04 13:22:16
缘起：Sentry 入驻
最近，项目组决定告别 Fundebug，转而拥抱 Sentry 作为我们的前端异常监控解决方案。这一切换过程可谓轻松加愉悦，只需部署一个后台服务，再将 Sentry SDK 集成到前端应用中，大功告成。在随后的使用中，一切看似风平浪静，直到……
困局：Qiankun 的挑战
随着微前端架构的兴起，Qiankun 作为一款备受推崇的解决方案，自然也出现在了我们的技术栈中。然而，当我们将 Sentry 与 Qiankun 结合使用时，一个棘手的难题迎面而来：如何区分不同项目的异常？
在传统的单体应用中，异常上报轻而易举，因为只有一个代码库。但在微前端架构下，多个应用并存，每个应用都有自己的代码库，这使得异常上报变得复杂。更确切地说，问题在于：如何确保每个异常都上报到正确的项目，避免混淆和误报？
破局：巧用 parent-frame
经过一番头脑风暴，我们找到了一个巧妙的解决方案：利用 parent-frame。在 Qiankun 中，每个子应用都被渲染在主应用的 <iframe> 中。因此，我们可以利用 parent-frame 来获取主应用的信息，并将其附加到异常报告中。
具体来说，我们修改了 Sentry SDK 的配置，在 beforeSend 回调中添加了以下代码：
beforeSend(event, hint) {
if (window.parent !== window) {
event.fingerprint = [
{
name: 'qiankun-parent-app',
value: window.parent.location.pathname,
},
];
}
return event;
}
这段代码的作用是：如果当前窗口不是顶级窗口（即子应用），则将主应用的路径名添加到异常事件的指纹信息中。这样，Sentry 就可以根据指纹信息区分不同的项目，并准确地将异常上报到相应的项目。
实践：一步一步
为了帮助你轻松实现这一解决方案，我将提供一个分步指南：
- 安装 Sentry SDK ：按照 Sentry 官方文档集成 Sentry SDK。
- 修改
beforeSend回调 ：在 Sentry SDK 的配置中，添加上述beforeSend回调。 - 部署 Sentry 后端服务 ：部署 Sentry 后端服务，以接收和处理异常报告。
- 验证异常上报 ：触发异常并验证它们是否已正确上报到相应的项目。
收获：一劳永逸
通过巧用 parent-frame，我们成功解决了 Qiankun 微前端架构下的 Sentry 异常上报难题。现在，每个异常都能准确地上报到相应的项目，为我们提供了清晰、可操作的异常信息，帮助我们快速定位和解决问题，从而提高了项目的稳定性和可靠性。
值得注意的是，这种解决方案不仅限于 Sentry，它也同样可以应用于其他异常监控工具。只要这些工具支持自定义指纹信息，你就可以使用 parent-frame 来区分不同项目的异常。
