微前端的哨兵

如何解决微前端的哨兵

有没有可能在一个页面上初始化 Sentry 两次？用例是对作为微前端插入的应用部分进行错误跟踪。

因此应用程序的这部分发生的错误应该发送到团队自己的哨兵项目。我还想知道是否有任何方法可以过滤错误，以便仅发送与微前端相关的错误，并过滤掉其他错误。我们可以为此使用 reacts 错误边界吗？

解决方法

看起来有一种方法可以像这样用第二个 Hub 初始化名为 dsn 的东西：

import {BrowserClient,Hub} from '@sentry/browser';

const client = new BrowserClient({
dsn: 'micorFrontEndSntryInstance'
});
const hub = new Hub(client)

此集线器可以传递给包装组件的 ErrorBoundary。 在每个 componentDidCatch 中，我们都可以将错误发送到微前端哨兵：

componentDidCatch(error,errorInfo) {
    this.props.hub.run(currentHub => {
      currentHub.withScope((scope) => {
          scope.setExtras(errorInfo);
          currentHub.captureException(error);
      });
    })
  }

所有代码都来自this example implementation。