How to ensure secure context boundaries when integrating multiple components that all use Sentry

SDKs
1

Hello… I am new to Sentry and our team is in the process of adding Sentry to our React web app, which is a “super-widget” that is hosted inside of a larger app which runs its own Sentry instance. Additionally, this larger app can contain other teams components that also use Sentry.

Each team has its own DSN and logic for filtering events and sanitizing actions / state, but currently it looks like our events are being intercepted by the larger app’s implementation and ignoring ours. Also, the breadcrumbs that are being captured and sent to their DSN include both our apps React actions plus external console.log events for heartbeat monitoring, which we would like to exclude.

Finally, we are wrapping our root App component in a Sentry ErrorBoundary, but even our React component errors are being captured and logged to the wrong endpoint.

We need to be able to automatically capture and log all unhandled errors that are specific to our apps context, while ignoring any other app’s errors. Is this possible?

I found this “no-conflict” issue from back in 2018 and someone posted a workaround they are using, but wanted to know if this is the right fix or if there is a better approach?

Any help would be appreciated. Thanks!

2

Also, here is an example of our UI initialization code for reference:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { createReduxEnhancer, init, withErrorBoundary } from '@sentry/react';

const env = process.env.NODE_ENV;
const isProd = env === 'production';

const sentryConfig = {
    beforeSend: (...) => {...},
    debug: !isProd,
    dsn: getSentryDSN(isProd),  // depends on environment, but always team specific
    environment: env,
    normalizeDepth: 10,
    release: `@parent-repo/our-package@${currentVersion}`,
};

const storeEnhancers = [
    createReduxEnhancer({
        stateTransformer: sanitizeStateForLogging,
        actionTransformer: sanitizeActionForLogging,
    })
];

store = createStore(reducer, initialState, compose(..., ...storeEnhancers));

init(sentryConfig)

const WidgetRoot = withErrorBoundary(OurAppWidget, { fallback: getErrorPage });

ReactDOM.render(
    <Provider store={store}>
        <WidgetRoot ... />
    </Provider>,
    domNode // this is a container DIV passed down by the host app
);