Sentry Hubs on Microfrontends with Module Federation

readme.md

Remote that shares the components defines a Sentry.hub instance defining some tags that will be used by the host during the dispatch of the logs to Sentry server

import * as Sentry from "@sentry/browser";

const hub = new Sentry.Hub();

hub.configureScope((scope) => {
  scope.setTag("Host", "shop");
  scope.setTag("Team", "shop-team");
});

export default hub;

Some shared/federated component on the same remote as the hub.

import { ErrorInfo } from "react";
import { ErrorBoundary } from "react-error-boundary";
import hub from './hub';

function Content(props: any) {
  function onError(error: Error, errorInfo: ErrorInfo) {
    hub.withScope((scope) => {
      scope.setExtra('remote', 'checkout');
      scope.setExtra('errorInfo', errorInfo);
      hub.captureException(error);
    });
  }

  return (
    <ErrorBoundary
      onError={onError}
      fallback={<div>An error occured while rendering checkout.</div>}
    >
      <Checkout />
    </ErrorBoundary>
  );
}