微前端的哨兵

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。