微前端的哨兵

Question

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

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

Answer 1

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

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。