add integration

Author: chargome

packages/react-router/src/client/sdk.ts

@@ -2,18 +2,29 @@ import type { BrowserOptions } from '@sentry/browser';
 import { init as browserInit } from '@sentry/browser';
 import type { Client } from '@sentry/core';
 import { applySdkMetadata, setTag } from '@sentry/core';
+import { BROWSER_TRACING_INTEGRATION_ID } from '../../../browser/build/npm/types/tracing/browserTracingIntegration';
+import { reactRouterTracingIntegration } from './tracingIntegration';
 
 /**
  * Initializes the client side of the React Router SDK.
  */
 export function init(options: BrowserOptions): Client | undefined {
-  const opts = {
-    ...options,
-  };
+  // If BrowserTracing integration was passed to options, replace it with React Router tracing integration
+  if (options.integrations && Array.isArray(options.integrations)) {
+    const hasBrowserTracing = options.integrations.some(
+      integration => integration.name === BROWSER_TRACING_INTEGRATION_ID,
+    );
+    if (hasBrowserTracing) {
+      options.integrations = options.integrations.filter(
+        integration => integration.name !== BROWSER_TRACING_INTEGRATION_ID,
+      );
+      options.integrations.push(reactRouterTracingIntegration());
+    }
+  }
 
-  applySdkMetadata(opts, 'react-router', ['react-router', 'browser']);
+  applySdkMetadata(options, 'react-router', ['react-router', 'browser']);
 
-  const client = browserInit(opts);
+  const client = browserInit(options);
 
   setTag('runtime', 'browser');
 

packages/react-router/src/client/tracingIntegration.ts

@@ -0,0 +1,22 @@
+import { browserTracingIntegration as originalBrowserTracingIntegration } from '@sentry/browser';
+import type { Integration } from '@sentry/core';
+import { instrumentHydratedRouter } from './hydratedRouter';
+
+/**
+ * Browser tracing integration for React Router (Framework) applications.
+ * This integration will create navigation spans and enhance transactions names with parameterized routes.
+ */
+export function reactRouterTracingIntegration(): Integration {
+  const browserTracingIntegrationInstance = originalBrowserTracingIntegration({
+    // Navigation transactions are started within the hydrated router instrumentation
+    instrumentNavigation: false,
+  });
+
+  return {
+    ...browserTracingIntegrationInstance,
+    afterAllSetup(client) {
+      browserTracingIntegrationInstance.afterAllSetup(client);
+      instrumentHydratedRouter();
+    },
+  };
+}