Sentry-javascript: Issue while using sentry to log exceptions in embedded applications

[mondalbidisha]

• [x] Review the documentation: https://docs.sentry.io/
• [x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• [x] Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• [x] Provide a link to the affected event from your Sentry account

Package + Version

• [x] @sentry/browser - 5.19.2
• [x] @sentry/integrations - 5.19.2

Version:

5.19.2

Description

We are using @sentry/broswer for error logging in two different javascript applications where one app is embedded in the other. The minified javascript files of the embedded application are loaded in the host application via CDN links. What we would like to achieve is that the exceptions triggered in these two applications should be logged in their respective sentry projects.

However, exceptions triggered in the embedded application are captured as part of the host application ( Seems like Sentry definition in host application is overriding the one in the embedded app ). We tried whitelisting the CDN link ( through which the minified js files are loaded ) in the host application using the 'denyUrls' and 'allowUrls' properties [https://docs.sentry.io/error-reporting/configuration/?platform=browser#deny-urls] while initializing sentry, but it was not of any help.

We were using Raven.js prior to @sentry/broswer and were not facing similar issues. Is this expected behavior for the new SDK or a bug?

[mondalbidisha]

Having scoured through the issues, I came across #2541 and #1764 threads. Using a separate sentry client instance on the embedded application does solve our initial problem but creates new ones.

I would like the sentry client to capture all exceptions and errors triggered across the embedded application and not only the ones logged by captureException/captureMessage explicitly.

Tried using getCurrentHub() to initialize a global client instance but that causes all errors in the embedded app to be intercepted by the host app sentry instance which was the problem I was trying to solve in the first place.

This is my config using getCurrentHub() -

Sentry = require('@sentry/browser');

const client = new Sentry.BrowserClient({ 
  dsn: 'https://[email protected]/1528318',
  environment: 'production', 
  integrations: [new Sentry.Integrations.GlobalHandlers()]
});
Sentry.getCurrentHub().bindClient(client);
Sentry.getCurrentHub().configureScope(scope => { 
  scope.setUser(userData);
});

and this is my config without it -

const client = new Sentry.BrowserClient({ 
  dsn: 'https://[email protected]/1528318',
  environment: 'production', 
  integrations: [new Sentry.Integrations.GlobalHandlers()]
});
var sentryContext = new Sentry.Hub(client);
sentryContext.configureScope(scope => { 
  scope.setUser(userData);
});

[mondalbidisha]

This noConflict behavior did not seem to be a problem with Raven.js. Any help in this direction will be welcome. Thanks!

[mondalbidisha]

I understand that this is an open-source project but we are using the paid plan and our decision to renew rests on your suggestions for any workarounds that can fix the problem that we are facing. It's been more than a month since this issue was filed with no response, any help will be greatly appreciated. Thanks!

[cmackay]

I am also interested in this issue. We have used sentry in an embedded application for multiple years and it doesn't appear that the latest @sentry/browser version supports having multiple instances running within a page at the same time. When I have attempted to, I received errors (_mergeOptions not a function) https://github.com/getsentry/sentry-javascript/issues/2622 . I need to find a way to make this work or look into other options. Are there any plans to bring back support for this so that multiple sentry instances do not conflict? Thanks!

[rohitvc]

@mondalbidisha @cmackay
I am also facing same issue. Not able to figure out the way to configure multiple sentry clients on same website. In my case, i am using parent Vue SPA which has Sentry.init() initialized and i am adding multiple web-components (micro-frontend) to the Vue app which has there own sentry setup.
But this setup fails, the last Sentry.Init() overrides everything else and breaks the error capturing in other web-components, also in main Vue app.
Can you guys guide me how can i capture the errors seperately for each service without conflicting with each other. Thanks