[Question/Bug] Can't report Transactions on multiple instances with different DSNs

[mitzafon-wix]

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

Package + Version

• @sentry/browser
• @sentry/node
• raven-js
• raven-node (raven for node)
• other: @sentry/react

Version:

@sentry/browser: 6.15.0
@sentry/react: 6.15.0

Description

My client consists of a platform with a global Sentry (using Sentry.init) and micro services that each has its own Sentry Hub with a different DSN (using new Sentry.Hub).

When I try and use transactions, I see that only the global Sentry can send transactions, and all of my micro services transactions reporting are "failing silently" (I don't see any request on the Network Tab).

I also tried to reproduce it on the same app and I encountered the issue.
Is it by design? Can I make it work somehow?

// App.ts

import * as Sentry from '@sentry/react'; // tried with @sentry/browser as well

Sentry.init({
  dsn: 'XXXXXXXXXXXXXXXX',
  integrations: [
    new Integrations.BrowserTracing(),
  ],

  // for the sake of debugging
  tracesSampleRate: 1.0,
  beforeSend(event) {
     // some unrelated logic
     return event;
  },
});

This component reports transactions for the global/main Sentry:

// AmazingComponent.ts
import * as Sentry from '@sentry/react';

const transaction = Sentry.startTransaction({ name: 'shopCheckout' });
console.log('After transaction start, before finish');
transaction.finish(); // Reports this transaction!

This component doesn't reports transactions for the a Sentry Hub:

// CoolComponent.ts
import * as Sentry from '@sentry/react';

const newHub = new Sentry.Hub(
      new Sentry.BrowserClient({
        dsn: 'YYYYYYYYYYYYYYYYY', // different DSN than the Sentry.init one
        integrations: [
          new Integrations.BrowserTracing(),
        ],
      }),
    );

const newHubTransaction = newHub.startTransaction({
    name: 'InnerTransaction',
});

console.log('After Hub transaction start, before finish');
newHubTransaction.finish(); // nothing is reported to Sentry

P.S

I can report exceptions via the Hub (i.e using newHub.captureException(...) is being reported successfully).

P.S 2 🎮 😉

I don't think a solution involving makeMain each time I want to report a transaction is valid, because I have many micro services that can report at the same time...

[AbhiPrasad]

This component doesn't reports transactions for the a Sentry Hub:

Could you turn on debug mode and post the logs here?

const newHub = new Sentry.Hub(
  new Sentry.BrowserClient({
    debug: true, // use debug mode
    dsn: 'YYYYYYYYYYYYYYYYY', // different DSN than the Sentry.init one
    integrations: [
      new Integrations.BrowserTracing(),
    ],
  }),
);

BrowserTracing would not work with multiple hubs, this is a known issue. See https://github.com/getsentry/sentry-javascript/issues?q=is%3Aopen+is%3Aissue+label%3A%22Feature%3A+Multiple+hubs%2Fclients%22

[mitzafon-wix]

BrowserTracing would not work with multiple hubs, this is a known issue. See https://github.com/getsentry/sentry-javascript/issues?q=is%3Aopen+is%3Aissue+label%3A%22Feature%3A+Multiple+hubs%2Fclients%22

@AbhiPrasad - Without setting BrowserTracing integration, manual Transactions don't work at all...
You're saying I need to use BrowserTracing only on the Sentry.init?
Further more, can I not use BrowserTracing at all and just report Transactions on my own?

Could you turn on debug mode and post the logs here?

Added it, I don't see any logs what so ever..
I tried adding it to the Sentry.init one and I do see logs for the shopCheckout Transaction.

Sentry Logger [Log]: Integration installed: InboundFilters
logger.js?b6a1:62 Sentry Logger [Log]: Integration installed: FunctionToString
logger.js?b6a1:62 Sentry Logger [Log]: Integration installed: TryCatch
logger.js?b6a1:62 Sentry Logger [Log]: Integration installed: Breadcrumbs
logger.js?b6a1:62 Sentry Logger [Log]: Global Handler attached: onerror
logger.js?b6a1:62 Sentry Logger [Log]: Global Handler attached: onunhandledrejection
logger.js?b6a1:62 Sentry Logger [Log]: Integration installed: GlobalHandlers
logger.js?b6a1:62 Sentry Logger [Log]: Integration installed: LinkedErrors
logger.js?b6a1:62 Sentry Logger [Log]: Integration installed: Dedupe
logger.js?b6a1:62 Sentry Logger [Log]: Integration installed: UserAgent
logger.js?b6a1:75 Sentry Logger [Warn]: [Tracing] You need to define `tracingOrigins` in the options. Set an array of urls or patterns to trace.
logger.js?b6a1:75 Sentry Logger [Warn]: [Tracing] We added a reasonable default for you: localhost,/^\//
logger.js?b6a1:62 Sentry Logger [Log]: Integration installed: BrowserTracing
logger.js?b6a1:75 Sentry Logger [Warn]: Discarded session because of missing or non-string release
logger.js?b6a1:62 Sentry Logger [Log]: [Measurements] Adding FID
logger.js?b6a1:62 Sentry Logger [Log]: [Measurements] Adding LCP
logger.js?b6a1:62 Sentry Logger [Log]: [Tracing] starting undefined transaction - shopCheckout
logger.js?b6a1:62 Sentry Logger [Log]: [Tracing] Finishing undefined transaction: shopCheckout.
logger.js?b6a1:62 Sentry Logger [Log]: [Tracing] Discarding transaction because its trace was not chosen to be sampled.
logger.js?b6a1:62 Sentry Logger [Log]: Adding outcome: transaction:sample_rate
logger.js?b6a1:62 Sentry Logger [Log]: [Measurements] Adding CLS
logger.js?b6a1:62 Sentry Logger [Log]: Flushing outcomes:
{
  "transaction:sample_rate": 1
}

[mitzafon-wix]

@AbhiPrasad - ?

[github-actions]

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 🥀

[mitzafon-wix]

@AbhiPrasad - do you have any insights?

[galElmalah]

+1 on this issue.

[AbhiPrasad]

Hey sorry for the delay on this, we've been busy working on the new major version so this fell out of sight.

It's important to note that in order to get tracing working, you'll have to import @sentry/tracing to enable it's side effect. See the information on our docs: https://docs.sentry.io/platforms/javascript/performance/

// If you're using one of our integration packages, like `@sentry/angular`,
// substitute its name for `@sentry/browser` here
import * as Sentry from "@sentry/browser";

// If taking advantage of automatic instrumentation (highly recommended)
import { BrowserTracing } from "@sentry/tracing";
// Or, if only manually tracing
// import * as _ from "@sentry/tracing"
// Note: You MUST import the package in some way for tracing to work

At the current moment, BrowserTracing (like many other integration at Sentry), leverages a global hub, which means that it has undefined behaviour when there are multiple hubs on a page. We still have to figure out if all the hubs create automatic transactions (this means you the user will have to pay for all of those transactions if you are on the Sentry paid service). We also have to figure out if a span is created (let's say from a fetch/xhr), how to best decide what hub's transaction it belongs to.

All of this will be addressed as part of the upcoming major bump #4240 (along with some bundle size savings!), but it's important to note that this is all about implicit behaviour from automatic instrumentation.

Manual instrumentation should work fine though. If you import the side effect: import * as _ from "@sentry/tracing", you control exactly when a transaction is created and finished, along with the child spans attached to it. The automatic instrumentation though will not work as expected due to BrowserTracing relying on a single hub.

const hub1 = new Sentry.Hub(...);
const hub2 = new Sentry.Hub(...);

// do whatever you want with the transaction, record any child spans you want
const transactionFromHub1 = hub1.startTransaction(...);

// have multiple transactions going on
const transactionFromHub2 = hub2.startTransaction(...);

// can be sent to a different dsn
transactionFromHub2.finish();
// can be sent to a different dsn
transactionFromHub1.finish();

[mitzafon-wix]

Hey @AbhiPrasad, thx for the reply it's better late than never :)
As I mentioned in the initial comment, I did try to use manual transactions and unfortunately it didn't work.

Can it be because I have a Sentry.init and a Hub?

** Edit **
I now realized that you're saying that BrowserTracing can mess it up.
Trying with importing @sentry/tracing without using BrowserTracing.

[mitzafon-wix]

The solution you offered is not complete, if I remove BrowserTracing from Sentry.init I'll get undefined returned every time I use startTransaction.
Please look at the code below.

What works for me is if I use Sentry.init then I must use BrowserTracing only inside the Sentry.init.
@AbhiPrasad - Is there a way to make it work without the BrowserTracing?

Look at the code below please

// App.ts

import * as Sentry from '@sentry/react'; // tried with @sentry/browser as well
import * as _ from '@sentry/tracing';

Sentry.init({
  dsn: 'XXXXXXXXXXXXXXXX',

  // for the sake of debugging
  tracesSampleRate: 1.0,
  beforeSend(event) {
     // some unrelated logic
     return event;
  },
});

This component throws an error for transaction is undefined (finish of undefined)

// AmazingComponent.ts
import * as Sentry from '@sentry/react';
import * as _ from '@sentry/tracing';

const transaction = Sentry.startTransaction({ name: 'shopCheckout' });
console.log('After transaction start, before finish');
transaction.finish(); // Doesn't report this transaction! error is thrown because transaction is undefined

This component doesn't reports transactions for the a Sentry Hub:

// CoolComponent.ts
import * as Sentry from '@sentry/react';
import * as _ from '@sentry/tracing';

const newHub = new Sentry.Hub(
      new Sentry.BrowserClient({
        dsn: 'YYYYYYYYYYYYYYYYY', // different DSN than the Sentry.init one
      }),
    );

const newHubTransaction = newHub.startTransaction({
    name: 'InnerTransaction',
});

newHubTransaction.finish(); // error is thrown, newHubTransaction is undefined

[AbhiPrasad]

https://codesandbox.io/s/hub-tracing-test-j90xw?file=/src/index.js

I made a quick codesandbox with the example you put - I was able to use newHubTransaction.finish() without throwing an error.

Perhaps you need to change your tracing import to import '@sentry/tracing';?

[mitzafon-wix]

import '@sentry/tracing' does the trick perfectly.
Thank you! 🙌

[source-xm]

Maybe you should try Sentry.BrowserClient + Sentry.Hub +Sentry.makeMain(hub),
Don't use it at the same time Sentry.init + Sentry.hub。