Skip to content

ref(tracing): Implement changes to new browserTracingIntegration#10393

Merged
mydea merged 1 commit intodevelopfrom
fn/browserTracing-adjustments
Jan 29, 2024
Merged

ref(tracing): Implement changes to new browserTracingIntegration#10393
mydea merged 1 commit intodevelopfrom
fn/browserTracing-adjustments

Conversation

@mydea
Copy link
Copy Markdown
Member

@mydea mydea commented Jan 29, 2024

This implements changes to the new integration, based on feedback from the team.

The main thing this addresses is the way we disable the default span creation. The original idea was to make this work with custom router instrumentations (e.g. for react router) that may be added as separate integrations. This required us to keep track of if another, non-default implementation has been added, to opt out of the defaults.

With this change, we do not do this anymore. Instead, the defaults should be configured by wrapping integrations. Some examples for how this should then work:

  1. Angular:
export function browserTracingIntegration(
  options?: Parameters<typeof originalBrowserTracingIntegration>[0],
): Integration {
  // do not use default navigation, as we provide our own
  // actual code for this is in the angular service
  options.instrumentNavigation = false;
  return originalBrowserTracingIntegration(options);
}
  1. Vue
export function browserTracingIntegration(
  options?: Parameters<typeof originalBrowserTracingIntegration>[0] & { router?: VueRouter },
): Integration {

  if (options.router) {
    options.instrumentNavigation = false;
    const integration = originalBrowserTracingIntegration(options);
    const originalSetupAfterAll = integration.setupAfterAll;
    integration.setupAfterAll = (client: Client) => {
      setupVueRoutingInstrumentation(client); // some method
      originalSetupAfterAll(client);
    }
  }

  return originalBrowserTracingIntegration(options);
}
  1. React
export function browserTracingIntegration(
  options?: Parameters<typeof originalBrowserTracingIntegration>[0] & { router?: ReactRouterInstrumentation },
): Integration {

  if (options.router) {
    options.instrumentNavigation = false;
    options.instrumentPageLoad = false;
    const integration = originalBrowserTracingIntegration(options);
    const originalSetupAfterAll = integration.setupAfterAll;
    integration.setupAfterAll = (client: Client) => {
      // setup custom routing instrumentation
      options.router(client); // or whatever API we want there
      originalSetupAfterAll(client);
    }
  }

  return originalBrowserTracingIntegration(options);
}

This implements changes to the new integration, based on feedback from the team.
@mydea mydea requested review from AbhiPrasad, Lms24 and lforst January 29, 2024 13:33
@mydea mydea self-assigned this Jan 29, 2024
Copy link
Copy Markdown
Contributor

@lforst lforst left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome. Thank you!

@github-actions
Copy link
Copy Markdown
Contributor

size-limit report 📦

Path Size
@sentry/browser (incl. Tracing, Replay, Feedback) - Webpack (gzipped) 78.14 KB (0%)
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped) 69.34 KB (0%)
@sentry/browser (incl. Tracing, Replay with Canvas) - Webpack (gzipped) 73.24 KB (0%)
@sentry/browser (incl. Tracing, Replay) - Webpack with treeshaking flags (gzipped) 62.97 KB (0%)
@sentry/browser (incl. Tracing) - Webpack (gzipped) 33.38 KB (0%)
@sentry/browser (incl. browserTracingIntegration) - Webpack (gzipped) 33.24 KB (-0.11% 🔽)
@sentry/browser (incl. Feedback) - Webpack (gzipped) 31.32 KB (0%)
@sentry/browser (incl. sendFeedback) - Webpack (gzipped) 31.33 KB (0%)
@sentry/browser - Webpack (gzipped) 22.6 KB (0%)
@sentry/browser (incl. Tracing, Replay, Feedback) - ES6 CDN Bundle (gzipped) 75.96 KB (0%)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped) 67.5 KB (0%)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped) 33.37 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped) 24.52 KB (0%)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed) 212.55 KB (0%)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed) 100.56 KB (0%)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed) 73.35 KB (0%)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped) 36.46 KB (0%)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped) 69.76 KB (0%)
@sentry/react - Webpack (gzipped) 22.63 KB (0%)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped) 86.43 KB (0%)
@sentry/nextjs Client - Webpack (gzipped) 50.73 KB (0%)
@sentry-internal/feedback - Webpack (gzipped) 17.21 KB (0%)

Copy link
Copy Markdown
Member

@Lms24 Lms24 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good change!

@mydea mydea merged commit 7dc9260 into develop Jan 29, 2024
@mydea mydea deleted the fn/browserTracing-adjustments branch January 29, 2024 16:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants