Sentry V7 - Breadcrumbs (& other Integrations) not sending from BrowserClient or Hub

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry SAAS (sentry.io)

Which package are you using?

@sentry/react

SDK Version

7.0.0

Framework Version

“@sentry/react”: “^7.0.0”, “@sentry/tracing”: “^7.0.0”,

Link to Sentry event

Can provide via DM.

Steps to Reproduce

We have a Micro-frontend application that is split horizontally. Each application is handled by a team hence wanting different Sentry projects for each microfrontend. Each project provides a DSN therefore needing different instances.

Using Sentry.init with their respective DSN’s at the top level of each microfrontend didn’t work. It was working (sending logs to different projects) on a fresh load, but not when switching between them without refreshing the browser. After adding debug: true we noticed there was an issue with how the internals of Sentry worked - one of the functions was resolving a promise with null (which is strange because when looking at window.__SENTRY__ the DSN seemed to update correctly and the parameters were also passed correctly).

Anyway, we decided to look for other solutions and have found BrowserClient, which works… almost. When calling the following helper function:

function createClient(dsn: string, stage: string) {
  return new BrowserClient({
    dsn,
    environment: stage,
    transport: makeFetchTransport,
    stackParser: defaultStackParser,
    tracesSampleRate: getTracesSampleRate(stage),
    integrations: integrations,
  });
}

with…

const monitoring = createClient(config.SENTRY_DSN, config.STAGE);

monitoring.captureException(`This is an exception from ${APP_NAME}`);

… in two different microfrontend applications, the logs are appearing in the Sentry UI when you navigate between them, but some of the Integrations such as breadcrumbs are not appearing in the UI, which is obviously not acceptable as it’s the main feature we wanted when signing up so that we can easily replicate any bugs that appear.

Checking the Sentry docs (“SDKs automatically start recording breadcrumbs by enabling integrations.”) - you shouldn’t even have to specify the Breadcrumbs in the integrations, so this must therefore be a bug on the latest version 7, which was said to be fixed here by a Sentry dev.

Please advise if this has indeed been fixed, and if so is there any implementation detail missing? If not are there any plans to do so as used to be the case, and are there any workarounds?

Thanks in advance!

Expected Result

Breadcrumbs in UI (see explanation above) when using BrowserClient to capture an exception.

Actual Result

No breadcrumbs in UI (see explanation above)

[Lms24]

Hi @apswak and thanks for reporting!

To start the triaging process, I wanted to ask if your integrations variable contains the Breadcrumbs integration? I’m asking because in v7, we refactored the options you pass to the BrowserClient constructor to the BrowserClientOptions interface. This new interface requires all integrations you want to use to be explicitly listed in the integrations property. Take a look at our migration guide for more information.

Note that this interface change only affects the options you pass to the BrowserClient constructor, not the options you would pass to Sentry.init.

If you want to go with all default integrations (which includes breadcrumbs), you can add them to your config like so:

import { BrowserClient, defaultStackParser, defaultIntegrations, makeFetchTransport } from '@sentry/react';

function createClient(dsn: string, stage: string) {
  return new BrowserClient({
    dsn,
    environment: stage,
    transport: makeFetchTransport,
    stackParser: defaultStackParser,
    tracesSampleRate: getTracesSampleRate(stage),
    integrations: defaultIntegrations,
  });
}

BTW, the reason why we made the change to specify integrations explicitly was to make them tree-shakable as described in our docs here.

[github-actions[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone … forever!

---

“A weed is but an unloved flower.” ― Ella Wheeler Wilcox 🥀