Whats the correct way to opt in tracing after Cookie consent is given?

[Speedy1991]

Currently, I'm doing something similar to this:

Sentry.init(SENTRY_OPTIONS);
...
// on cookie consent given
Sentry.getCurrentHub().bindClient(
      new BrowserClient({
        ...SENTRY_OPTIONS,
        integrations: [new Integrations.BrowserTracing()],
      }),
    );

With SENTRY_OPTIONS as BrowserOptions
But after upgrading to 7.19.0 this code errors, because the Browserclient want's BrowserClientOptions which is obviously not the same object as I call in my Sentry.init (BrowserOptions)

So is this even the right approach? Or is there a completely different way to correctly opt-in BrowserTracing?

[AbhiPrasad]

BrowserTracing should not be adding any cookies - any reason why you need this logic?

Interesting this is a problem though, BrowserClientOptions should be a superset of BrowserOptions, so BrowserClientOptions can be passed in anywhere BrowserOptions is used.

[Speedy1991]

Thats true, sentry does not send any cookie

But I only activate tracing when the user give "Performance" tracking consent. I think this is good behaviour.

Before upgrading from 6.x to 7.19.0 the pasted code worked as expected (but i would prefer a Flag/callback to enable/disable tracing conditionally like events in e.g. a beforeSend callback

[AbhiPrasad]

I would recommend filtering them out using beforeSendTransaction - this is a new option we introduced with the newest version of the SDK. Still being documented, see: https://github.com/getsentry/sentry-docs/pull/5814/files

But I only activate tracing when the user give "Performance" tracking consent. I think this is good behaviour.

Fair, but important to note that you might be missing information from pageload transactions if this is the case - you might not be getting a representative LCP or transaction duration for certain pages then. Sentry collect performance data with no PII by default - so there is nothing leaking to users.

[lforst]

I ran into a similar problem for an internal project and went with a custom transport that waits for a promise to resolve before events are actually sent. It could look like this:

import { makeXHRTransport } from '@sentry/browser';

async function waitForConsent() { ... };

const hasConsentPromise = waitForConsent();

Sentry.getCurrentHub().bindClient(
  new BrowserClient({
    transport: (transportOptions) => {
      const xhrTransport = makeXHRTransport(transportOptions);
      return {
        flush: (timeout) => xhrTransport.flush(timeout),
        send: async (request) => {
          const hasConsent = await hasConsentPromise;
          if (hasConsent) {
            return xhrTransport.send(request);
          } else {
            return undefined;
          }
        },
      };
    },
  })
);