@sentry/react - npm Package Compare versions

Comparing version 7.99.0 to 7.100.0

cjs/index.js

@@ -21,6 +21,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 exports.createReduxEnhancer = redux.createReduxEnhancer;
+exports.reactRouterV3BrowserTracingIntegration = reactrouterv3.reactRouterV3BrowserTracingIntegration;
 exports.reactRouterV3Instrumentation = reactrouterv3.reactRouterV3Instrumentation;
+exports.reactRouterV4BrowserTracingIntegration = reactrouter.reactRouterV4BrowserTracingIntegration;
 exports.reactRouterV4Instrumentation = reactrouter.reactRouterV4Instrumentation;
+exports.reactRouterV5BrowserTracingIntegration = reactrouter.reactRouterV5BrowserTracingIntegration;
 exports.reactRouterV5Instrumentation = reactrouter.reactRouterV5Instrumentation;
 exports.withSentryRouting = reactrouter.withSentryRouting;
+exports.reactRouterV6BrowserTracingIntegration = reactrouterv6.reactRouterV6BrowserTracingIntegration;
 exports.reactRouterV6Instrumentation = reactrouterv6.reactRouterV6Instrumentation;
@@ -27,0 +31,0 @@ exports.withSentryReactRouterV6Routing = reactrouterv6.withSentryReactRouterV6Routing;

cjs/reactrouter.js

@@ -29,6 +29,87 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
- // eslint-disable-line @typescript-eslint/no-explicit-any
-
 let activeTransaction;
 
+/**
+ * A browser tracing integration that uses React Router v4 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+function reactRouterV4BrowserTracingIntegration(
+  options,
+) {
+  const integration = browser.browserTracingIntegration({
+    ...options,
+    instrumentPageLoad: false,
+    instrumentNavigation: false,
+  });
+
+  const { history, routes, matchPath, instrumentPageLoad = true, instrumentNavigation = true } = options;
+
+  return {
+    ...integration,
+    afterAllSetup(client) {
+      integration.afterAllSetup(client);
+
+      const startPageloadCallback = (startSpanOptions) => {
+        browser.startBrowserTracingPageLoadSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      const startNavigationCallback = (startSpanOptions) => {
+        browser.startBrowserTracingNavigationSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      // eslint-disable-next-line deprecation/deprecation
+      const instrumentation = reactRouterV4Instrumentation(history, routes, matchPath);
+
+      // Now instrument page load & navigation with correct settings
+      instrumentation(startPageloadCallback, instrumentPageLoad, false);
+      instrumentation(startNavigationCallback, false, instrumentNavigation);
+    },
+  };
+}
+
+/**
+ * A browser tracing integration that uses React Router v5 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+function reactRouterV5BrowserTracingIntegration(
+  options,
+) {
+  const integration = browser.browserTracingIntegration({
+    ...options,
+    instrumentPageLoad: false,
+    instrumentNavigation: false,
+  });
+
+  const { history, routes, matchPath } = options;
+
+  return {
+    ...integration,
+    afterAllSetup(client) {
+      integration.afterAllSetup(client);
+
+      const startPageloadCallback = (startSpanOptions) => {
+        browser.startBrowserTracingPageLoadSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      const startNavigationCallback = (startSpanOptions) => {
+        browser.startBrowserTracingNavigationSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      // eslint-disable-next-line deprecation/deprecation
+      const instrumentation = reactRouterV5Instrumentation(history, routes, matchPath);
+
+      // Now instrument page load & navigation with correct settings
+      instrumentation(startPageloadCallback, options.instrumentPageLoad, false);
+      instrumentation(startNavigationCallback, false, options.instrumentNavigation);
+    },
+  };
+}
+
+/**
+ * @deprecated Use `browserTracingReactRouterV4()` instead.
+ */
 function reactRouterV4Instrumentation(
@@ -39,5 +120,8 @@ history,
 ) {
-  return createReactRouterInstrumentation(history, 'react-router-v4', routes, matchPath);
+  return createReactRouterInstrumentation(history, 'reactrouter_v4', routes, matchPath);
 }
 
+/**
+ * @deprecated Use `browserTracingReactRouterV5()` instead.
+ */
 function reactRouterV5Instrumentation(
@@ -48,3 +132,3 @@ history,
 ) {
-  return createReactRouterInstrumentation(history, 'react-router-v5', routes, matchPath);
+  return createReactRouterInstrumentation(history, 'reactrouter_v5', routes, matchPath);
 }
@@ -54,3 +138,3 @@
   history,
-  name,
+  instrumentationName,
   allRoutes = [],
@@ -93,8 +177,5 @@ matchPath,
 
-  const tags = {
-    'routing.instrumentation': name,
-  };
-
   return (customStartTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true) => {
     const initPathName = getInitPathName();
+
     if (startTransactionOnPageLoad && initPathName) {
@@ -104,7 +185,6 @@ const [name, source] = normalizeTransactionName(initPathName);
         name,
-        op: 'pageload',
-        origin: 'auto.pageload.react.reactrouter',
-        tags,
-        metadata: {
-          source,
+        attributes: {
+          [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+          [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.pageload.react.${instrumentationName}`,
+          [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
         },
@@ -124,7 +204,6 @@ });
             name,
-            op: 'navigation',
-            origin: 'auto.navigation.react.reactrouter',
-            tags,
-            metadata: {
-              source,
+            attributes: {
+              [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+              [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.${instrumentationName}`,
+              [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
             },
@@ -177,6 +256,8 @@ });
 
+  const activeRootSpan = getActiveRootSpan();
+
   const WrappedRoute = (props) => {
-    if (activeTransaction && props && props.computedMatch && props.computedMatch.isExact) {
-      activeTransaction.updateName(props.computedMatch.path);
-      activeTransaction.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+    if (activeRootSpan && props && props.computedMatch && props.computedMatch.isExact) {
+      activeRootSpan.updateName(props.computedMatch.path);
+      activeRootSpan.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
     }
@@ -187,3 +268,3 @@
     // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/13dc4235c069e25fe7ee16e11f529d909f9f3ff8/types/react-router/index.d.ts#L154-L164
-    return React__namespace.createElement(Route, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 176}} );
+    return React__namespace.createElement(Route, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 277}} );
   };
@@ -200,5 +281,26 @@
 
+function getActiveRootSpan() {
+  // Legacy behavior for "old" react router instrumentation
+  if (activeTransaction) {
+    return activeTransaction;
+  }
+
+  const span = core.getActiveSpan();
+  const rootSpan = span ? core.getRootSpan(span) : undefined;
+
+  if (!rootSpan) {
+    return undefined;
+  }
+
+  const op = core.spanToJSON(rootSpan).op;
+
+  // Only use this root span if it is a pageload or navigation span
+  return op === 'navigation' || op === 'pageload' ? rootSpan : undefined;
+}
+
+exports.reactRouterV4BrowserTracingIntegration = reactRouterV4BrowserTracingIntegration;
 exports.reactRouterV4Instrumentation = reactRouterV4Instrumentation;
+exports.reactRouterV5BrowserTracingIntegration = reactRouterV5BrowserTracingIntegration;
 exports.reactRouterV5Instrumentation = reactRouterV5Instrumentation;
 exports.withSentryRouting = withSentryRouting;
 //# sourceMappingURL=reactrouter.js.map

cjs/reactrouterv3.js

 Object.defineProperty(exports, '__esModule', { value: true });
 
 const browser = require('@sentry/browser');
+const core = require('@sentry/core');
 
@@ -9,2 +10,42 @@ // Many of the types below had to be mocked out to prevent typescript issues
 /**
+ * A browser tracing integration that uses React Router v3 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+function reactRouterV3BrowserTracingIntegration(
+  options,
+) {
+  const integration = browser.browserTracingIntegration({
+    ...options,
+    instrumentPageLoad: false,
+    instrumentNavigation: false,
+  });
+
+  const { history, routes, match, instrumentPageLoad = true, instrumentNavigation = true } = options;
+
+  return {
+    ...integration,
+    afterAllSetup(client) {
+      integration.afterAllSetup(client);
+
+      const startPageloadCallback = (startSpanOptions) => {
+        browser.startBrowserTracingPageLoadSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      const startNavigationCallback = (startSpanOptions) => {
+        browser.startBrowserTracingNavigationSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      // eslint-disable-next-line deprecation/deprecation
+      const instrumentation = reactRouterV3Instrumentation(history, routes, match);
+
+      // Now instrument page load & navigation with correct settings
+      instrumentation(startPageloadCallback, instrumentPageLoad, false);
+      instrumentation(startNavigationCallback, false, instrumentNavigation);
+    },
+  };
+}
+
+/**
  * Creates routing instrumentation for React Router v3
@@ -16,2 +57,4 @@ * Works for React Router >= 3.2.0 and < 4.0.0
  * @param match `Router.match` utility
+ *
+ * @deprecated Use `reactRouterV3BrowserTracingIntegration()` instead
  */
@@ -41,10 +84,7 @@ function reactRouterV3Instrumentation(
             name: prevName,
-            op: 'pageload',
-            origin: 'auto.pageload.react.reactrouterv3',
-            tags: {
-              'routing.instrumentation': 'react-router-v3',
+            attributes: {
+              [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+              [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v3',
+              [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
             },
-            metadata: {
-              source,
-            },
           });
@@ -61,18 +101,14 @@ },
           }
-          const tags = {
-            'routing.instrumentation': 'react-router-v3',
-          };
-          if (prevName) {
-            tags.from = prevName;
-          }
           normalizeTransactionName(routes, location, match, (localName, source = 'url') => {
             prevName = localName;
+
+            const attributes = {
+              [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+              [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v3',
+              [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
+            };
+
             activeTransaction = startTransaction({
               name: prevName,
-              op: 'navigation',
-              origin: 'auto.navigation.react.reactrouterv3',
-              tags,
-              metadata: {
-                source,
-              },
+              attributes,
             });
@@ -143,3 +179,4 @@ });
 
+exports.reactRouterV3BrowserTracingIntegration = reactRouterV3BrowserTracingIntegration;
 exports.reactRouterV3Instrumentation = reactRouterV3Instrumentation;
 //# sourceMappingURL=reactrouterv3.js.map

cjs/reactrouterv6.js

@@ -27,3 +27,3 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
-const _jsxFileName = "/home/runner/work/sentry-javascript/sentry-javascript/packages/react/src/reactrouterv6.tsx";// Inspired from Donnie McNeal's solution:
+const _jsxFileName = "/home/runner/work/sentry-javascript/sentry-javascript/packages/react/src/reactrouterv6.tsx";/* eslint-disable max-lines */
 
@@ -41,6 +41,64 @@ let activeTransaction;
 
-const SENTRY_TAGS = {
-  'routing.instrumentation': 'react-router-v6',
-};
+/**
+ * A browser tracing integration that uses React Router v3 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+function reactRouterV6BrowserTracingIntegration(
+  options,
+) {
+  const integration = browser.browserTracingIntegration({
+    ...options,
+    instrumentPageLoad: false,
+    instrumentNavigation: false,
+  });
 
+  const {
+    useEffect,
+    useLocation,
+    useNavigationType,
+    createRoutesFromChildren,
+    matchRoutes,
+    stripBasename,
+    instrumentPageLoad = true,
+    instrumentNavigation = true,
+  } = options;
+
+  return {
+    ...integration,
+    afterAllSetup(client) {
+      integration.afterAllSetup(client);
+
+      const startNavigationCallback = (startSpanOptions) => {
+        browser.startBrowserTracingNavigationSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      const initPathName = browser.WINDOW && browser.WINDOW.location && browser.WINDOW.location.pathname;
+      if (instrumentPageLoad && initPathName) {
+        browser.startBrowserTracingPageLoadSpan(client, {
+          name: initPathName,
+          attributes: {
+            [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+            [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+            [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v6',
+          },
+        });
+      }
+
+      _useEffect = useEffect;
+      _useLocation = useLocation;
+      _useNavigationType = useNavigationType;
+      _matchRoutes = matchRoutes;
+      _createRoutesFromChildren = createRoutesFromChildren;
+      _stripBasename = stripBasename || false;
+
+      _customStartTransaction = startNavigationCallback;
+      _startTransactionOnLocationChange = instrumentNavigation;
+    },
+  };
+}
+
+/**
+ * @deprecated Use `reactRouterV6BrowserTracingIntegration()` instead.
+ */
 function reactRouterV6Instrumentation(
@@ -63,7 +121,6 @@ useEffect,
         name: initPathName,
-        op: 'pageload',
-        origin: 'auto.pageload.react.reactrouterv6',
-        tags: SENTRY_TAGS,
-        metadata: {
-          source: 'url',
+        attributes: {
+          [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+          [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+          [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v6',
         },
@@ -161,2 +218,3 @@ });
 function updatePageloadTransaction(
+  activeRootSpan,
   location,
@@ -171,6 +229,6 @@ routes,
 
-  if (activeTransaction && branches) {
+  if (activeRootSpan && branches) {
     const [name, source] = getNormalizedName(routes, location, branches, basename);
-    activeTransaction.updateName(name);
-    activeTransaction.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+    activeRootSpan.updateName(name);
+    activeRootSpan.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
   }
@@ -196,7 +254,6 @@ }
       name,
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouterv6',
-      tags: SENTRY_TAGS,
-      metadata: {
-        source,
+      attributes: {
+        [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
+        [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+        [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v6',
       },
@@ -236,3 +293,3 @@ });
         if (isMountRenderPass) {
-          updatePageloadTransaction(location, routes);
+          updatePageloadTransaction(getActiveRootSpan(), location, routes);
           isMountRenderPass = false;
@@ -250,3 +307,3 @@ } else {
     // will break advanced type inference done by react router params
-    return React__namespace.createElement(Routes, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 243}} );
+    return React__namespace.createElement(Routes, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 329}} );
   };
@@ -294,3 +351,3 @@
       if (isMountRenderPass) {
-        updatePageloadTransaction(normalizedLocation, routes);
+        updatePageloadTransaction(getActiveRootSpan(), normalizedLocation, routes);
         isMountRenderPass = false;
@@ -307,3 +364,3 @@ } else {
   return (routes, locationArg) => {
-    return React__namespace.createElement(SentryRoutes, { routes: routes, locationArg: locationArg, __self: this, __source: {fileName: _jsxFileName, lineNumber: 300}} );
+    return React__namespace.createElement(SentryRoutes, { routes: routes, locationArg: locationArg, __self: this, __source: {fileName: _jsxFileName, lineNumber: 386}} );
   };
@@ -322,7 +379,9 @@ }
 
+    const activeRootSpan = getActiveRootSpan();
+
     // The initial load ends when `createBrowserRouter` is called.
     // This is the earliest convenient time to update the transaction name.
     // Callbacks to `router.subscribe` are not called for the initial load.
-    if (router.state.historyAction === 'POP' && activeTransaction) {
-      updatePageloadTransaction(router.state.location, routes, undefined, basename);
+    if (router.state.historyAction === 'POP' && activeRootSpan) {
+      updatePageloadTransaction(activeRootSpan, router.state.location, routes, undefined, basename);
     }
@@ -332,8 +391,3 @@
       const location = state.location;
-
-      if (
-        _startTransactionOnLocationChange &&
-        (state.historyAction === 'PUSH' || state.historyAction === 'POP') &&
-        activeTransaction
-      ) {
+      if (_startTransactionOnLocationChange && (state.historyAction === 'PUSH' || state.historyAction === 'POP')) {
         handleNavigation(location, routes, state.historyAction, undefined, basename);
@@ -347,2 +401,22 @@ }
 
+function getActiveRootSpan() {
+  // Legacy behavior for "old" react router instrumentation
+  if (activeTransaction) {
+    return activeTransaction;
+  }
+
+  const span = core.getActiveSpan();
+  const rootSpan = span ? core.getRootSpan(span) : undefined;
+
+  if (!rootSpan) {
+    return undefined;
+  }
+
+  const op = core.spanToJSON(rootSpan).op;
+
+  // Only use this root span if it is a pageload or navigation span
+  return op === 'navigation' || op === 'pageload' ? rootSpan : undefined;
+}
+
+exports.reactRouterV6BrowserTracingIntegration = reactRouterV6BrowserTracingIntegration;
 exports.reactRouterV6Instrumentation = reactRouterV6Instrumentation;
@@ -349,0 +423,0 @@ exports.withSentryReactRouterV6Routing = withSentryReactRouterV6Routing;

esm/index.js

@@ -6,5 +6,5 @@ export * from '@sentry/browser';
 export { createReduxEnhancer } from './redux.js';
-export { reactRouterV3Instrumentation } from './reactrouterv3.js';
-export { reactRouterV4Instrumentation, reactRouterV5Instrumentation, withSentryRouting } from './reactrouter.js';
-export { reactRouterV6Instrumentation, withSentryReactRouterV6Routing, wrapCreateBrowserRouter, wrapUseRoutes } from './reactrouterv6.js';
+export { reactRouterV3BrowserTracingIntegration, reactRouterV3Instrumentation } from './reactrouterv3.js';
+export { reactRouterV4BrowserTracingIntegration, reactRouterV4Instrumentation, reactRouterV5BrowserTracingIntegration, reactRouterV5Instrumentation, withSentryRouting } from './reactrouter.js';
+export { reactRouterV6BrowserTracingIntegration, reactRouterV6Instrumentation, withSentryReactRouterV6Routing, wrapCreateBrowserRouter, wrapUseRoutes } from './reactrouterv6.js';
 //# sourceMappingURL=index.js.map

esm/reactrouter.js

@@ -1,3 +0,3 @@
-import { WINDOW } from '@sentry/browser';
-import { SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
+import { browserTracingIntegration, startBrowserTracingPageLoadSpan, startBrowserTracingNavigationSpan, WINDOW } from '@sentry/browser';
+import { SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, getActiveSpan, getRootSpan, spanToJSON } from '@sentry/core';
 import hoistNonReactStatics from 'hoist-non-react-statics';
@@ -10,6 +10,87 @@ import * as React from 'react';
 
- // eslint-disable-line @typescript-eslint/no-explicit-any
-
 let activeTransaction;
 
+/**
+ * A browser tracing integration that uses React Router v4 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+function reactRouterV4BrowserTracingIntegration(
+  options,
+) {
+  const integration = browserTracingIntegration({
+    ...options,
+    instrumentPageLoad: false,
+    instrumentNavigation: false,
+  });
+
+  const { history, routes, matchPath, instrumentPageLoad = true, instrumentNavigation = true } = options;
+
+  return {
+    ...integration,
+    afterAllSetup(client) {
+      integration.afterAllSetup(client);
+
+      const startPageloadCallback = (startSpanOptions) => {
+        startBrowserTracingPageLoadSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      const startNavigationCallback = (startSpanOptions) => {
+        startBrowserTracingNavigationSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      // eslint-disable-next-line deprecation/deprecation
+      const instrumentation = reactRouterV4Instrumentation(history, routes, matchPath);
+
+      // Now instrument page load & navigation with correct settings
+      instrumentation(startPageloadCallback, instrumentPageLoad, false);
+      instrumentation(startNavigationCallback, false, instrumentNavigation);
+    },
+  };
+}
+
+/**
+ * A browser tracing integration that uses React Router v5 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+function reactRouterV5BrowserTracingIntegration(
+  options,
+) {
+  const integration = browserTracingIntegration({
+    ...options,
+    instrumentPageLoad: false,
+    instrumentNavigation: false,
+  });
+
+  const { history, routes, matchPath } = options;
+
+  return {
+    ...integration,
+    afterAllSetup(client) {
+      integration.afterAllSetup(client);
+
+      const startPageloadCallback = (startSpanOptions) => {
+        startBrowserTracingPageLoadSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      const startNavigationCallback = (startSpanOptions) => {
+        startBrowserTracingNavigationSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      // eslint-disable-next-line deprecation/deprecation
+      const instrumentation = reactRouterV5Instrumentation(history, routes, matchPath);
+
+      // Now instrument page load & navigation with correct settings
+      instrumentation(startPageloadCallback, options.instrumentPageLoad, false);
+      instrumentation(startNavigationCallback, false, options.instrumentNavigation);
+    },
+  };
+}
+
+/**
+ * @deprecated Use `browserTracingReactRouterV4()` instead.
+ */
 function reactRouterV4Instrumentation(
@@ -20,5 +101,8 @@ history,
 ) {
-  return createReactRouterInstrumentation(history, 'react-router-v4', routes, matchPath);
+  return createReactRouterInstrumentation(history, 'reactrouter_v4', routes, matchPath);
 }
 
+/**
+ * @deprecated Use `browserTracingReactRouterV5()` instead.
+ */
 function reactRouterV5Instrumentation(
@@ -29,3 +113,3 @@ history,
 ) {
-  return createReactRouterInstrumentation(history, 'react-router-v5', routes, matchPath);
+  return createReactRouterInstrumentation(history, 'reactrouter_v5', routes, matchPath);
 }
@@ -35,3 +119,3 @@
   history,
-  name,
+  instrumentationName,
   allRoutes = [],
@@ -74,8 +158,5 @@ matchPath,
 
-  const tags = {
-    'routing.instrumentation': name,
-  };
-
   return (customStartTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true) => {
     const initPathName = getInitPathName();
+
     if (startTransactionOnPageLoad && initPathName) {
@@ -85,7 +166,6 @@ const [name, source] = normalizeTransactionName(initPathName);
         name,
-        op: 'pageload',
-        origin: 'auto.pageload.react.reactrouter',
-        tags,
-        metadata: {
-          source,
+        attributes: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.pageload.react.${instrumentationName}`,
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
         },
@@ -105,7 +185,6 @@ });
             name,
-            op: 'navigation',
-            origin: 'auto.navigation.react.reactrouter',
-            tags,
-            metadata: {
-              source,
+            attributes: {
+              [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+              [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.${instrumentationName}`,
+              [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
             },
@@ -158,6 +237,8 @@ });
 
+  const activeRootSpan = getActiveRootSpan();
+
   const WrappedRoute = (props) => {
-    if (activeTransaction && props && props.computedMatch && props.computedMatch.isExact) {
-      activeTransaction.updateName(props.computedMatch.path);
-      activeTransaction.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+    if (activeRootSpan && props && props.computedMatch && props.computedMatch.isExact) {
+      activeRootSpan.updateName(props.computedMatch.path);
+      activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
     }
@@ -168,3 +249,3 @@
     // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/13dc4235c069e25fe7ee16e11f529d909f9f3ff8/types/react-router/index.d.ts#L154-L164
-    return React.createElement(Route, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 176}} );
+    return React.createElement(Route, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 277}} );
   };
@@ -181,3 +262,22 @@
 
-export { reactRouterV4Instrumentation, reactRouterV5Instrumentation, withSentryRouting };
+function getActiveRootSpan() {
+  // Legacy behavior for "old" react router instrumentation
+  if (activeTransaction) {
+    return activeTransaction;
+  }
+
+  const span = getActiveSpan();
+  const rootSpan = span ? getRootSpan(span) : undefined;
+
+  if (!rootSpan) {
+    return undefined;
+  }
+
+  const op = spanToJSON(rootSpan).op;
+
+  // Only use this root span if it is a pageload or navigation span
+  return op === 'navigation' || op === 'pageload' ? rootSpan : undefined;
+}
+
+export { reactRouterV4BrowserTracingIntegration, reactRouterV4Instrumentation, reactRouterV5BrowserTracingIntegration, reactRouterV5Instrumentation, withSentryRouting };
 //# sourceMappingURL=reactrouter.js.map

esm/reactrouterv3.js

@@ -1,2 +0,3 @@
-import { WINDOW } from '@sentry/browser';
+import { browserTracingIntegration, WINDOW, startBrowserTracingPageLoadSpan, startBrowserTracingNavigationSpan } from '@sentry/browser';
+import { SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
 
@@ -7,2 +8,42 @@ // Many of the types below had to be mocked out to prevent typescript issues
 /**
+ * A browser tracing integration that uses React Router v3 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+function reactRouterV3BrowserTracingIntegration(
+  options,
+) {
+  const integration = browserTracingIntegration({
+    ...options,
+    instrumentPageLoad: false,
+    instrumentNavigation: false,
+  });
+
+  const { history, routes, match, instrumentPageLoad = true, instrumentNavigation = true } = options;
+
+  return {
+    ...integration,
+    afterAllSetup(client) {
+      integration.afterAllSetup(client);
+
+      const startPageloadCallback = (startSpanOptions) => {
+        startBrowserTracingPageLoadSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      const startNavigationCallback = (startSpanOptions) => {
+        startBrowserTracingNavigationSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      // eslint-disable-next-line deprecation/deprecation
+      const instrumentation = reactRouterV3Instrumentation(history, routes, match);
+
+      // Now instrument page load & navigation with correct settings
+      instrumentation(startPageloadCallback, instrumentPageLoad, false);
+      instrumentation(startNavigationCallback, false, instrumentNavigation);
+    },
+  };
+}
+
+/**
  * Creates routing instrumentation for React Router v3
@@ -14,2 +55,4 @@ * Works for React Router >= 3.2.0 and < 4.0.0
  * @param match `Router.match` utility
+ *
+ * @deprecated Use `reactRouterV3BrowserTracingIntegration()` instead
  */
@@ -39,10 +82,7 @@ function reactRouterV3Instrumentation(
             name: prevName,
-            op: 'pageload',
-            origin: 'auto.pageload.react.reactrouterv3',
-            tags: {
-              'routing.instrumentation': 'react-router-v3',
+            attributes: {
+              [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+              [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v3',
+              [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
             },
-            metadata: {
-              source,
-            },
           });
@@ -59,18 +99,14 @@ },
           }
-          const tags = {
-            'routing.instrumentation': 'react-router-v3',
-          };
-          if (prevName) {
-            tags.from = prevName;
-          }
           normalizeTransactionName(routes, location, match, (localName, source = 'url') => {
             prevName = localName;
+
+            const attributes = {
+              [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+              [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v3',
+              [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
+            };
+
             activeTransaction = startTransaction({
               name: prevName,
-              op: 'navigation',
-              origin: 'auto.navigation.react.reactrouterv3',
-              tags,
-              metadata: {
-                source,
-              },
+              attributes,
             });
@@ -141,3 +177,3 @@ });
 
-export { reactRouterV3Instrumentation };
+export { reactRouterV3BrowserTracingIntegration, reactRouterV3Instrumentation };
 //# sourceMappingURL=reactrouterv3.js.map

esm/reactrouterv6.js

@@ -1,3 +0,3 @@
-import { WINDOW } from '@sentry/browser';
-import { SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
+import { browserTracingIntegration, WINDOW, startBrowserTracingPageLoadSpan, startBrowserTracingNavigationSpan } from '@sentry/browser';
+import { SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, getActiveSpan, getRootSpan, spanToJSON } from '@sentry/core';
 import { logger, getNumberOfUrlSegments } from '@sentry/utils';
@@ -8,3 +8,3 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 
-const _jsxFileName = "/home/runner/work/sentry-javascript/sentry-javascript/packages/react/src/reactrouterv6.tsx";// Inspired from Donnie McNeal's solution:
+const _jsxFileName = "/home/runner/work/sentry-javascript/sentry-javascript/packages/react/src/reactrouterv6.tsx";/* eslint-disable max-lines */
 
@@ -22,6 +22,64 @@ let activeTransaction;
 
-const SENTRY_TAGS = {
-  'routing.instrumentation': 'react-router-v6',
-};
+/**
+ * A browser tracing integration that uses React Router v3 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+function reactRouterV6BrowserTracingIntegration(
+  options,
+) {
+  const integration = browserTracingIntegration({
+    ...options,
+    instrumentPageLoad: false,
+    instrumentNavigation: false,
+  });
 
+  const {
+    useEffect,
+    useLocation,
+    useNavigationType,
+    createRoutesFromChildren,
+    matchRoutes,
+    stripBasename,
+    instrumentPageLoad = true,
+    instrumentNavigation = true,
+  } = options;
+
+  return {
+    ...integration,
+    afterAllSetup(client) {
+      integration.afterAllSetup(client);
+
+      const startNavigationCallback = (startSpanOptions) => {
+        startBrowserTracingNavigationSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      const initPathName = WINDOW && WINDOW.location && WINDOW.location.pathname;
+      if (instrumentPageLoad && initPathName) {
+        startBrowserTracingPageLoadSpan(client, {
+          name: initPathName,
+          attributes: {
+            [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+            [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+            [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v6',
+          },
+        });
+      }
+
+      _useEffect = useEffect;
+      _useLocation = useLocation;
+      _useNavigationType = useNavigationType;
+      _matchRoutes = matchRoutes;
+      _createRoutesFromChildren = createRoutesFromChildren;
+      _stripBasename = stripBasename || false;
+
+      _customStartTransaction = startNavigationCallback;
+      _startTransactionOnLocationChange = instrumentNavigation;
+    },
+  };
+}
+
+/**
+ * @deprecated Use `reactRouterV6BrowserTracingIntegration()` instead.
+ */
 function reactRouterV6Instrumentation(
@@ -44,7 +102,6 @@ useEffect,
         name: initPathName,
-        op: 'pageload',
-        origin: 'auto.pageload.react.reactrouterv6',
-        tags: SENTRY_TAGS,
-        metadata: {
-          source: 'url',
+        attributes: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v6',
         },
@@ -142,2 +199,3 @@ });
 function updatePageloadTransaction(
+  activeRootSpan,
   location,
@@ -152,6 +210,6 @@ routes,
 
-  if (activeTransaction && branches) {
+  if (activeRootSpan && branches) {
     const [name, source] = getNormalizedName(routes, location, branches, basename);
-    activeTransaction.updateName(name);
-    activeTransaction.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+    activeRootSpan.updateName(name);
+    activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
   }
@@ -177,7 +235,6 @@ }
       name,
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouterv6',
-      tags: SENTRY_TAGS,
-      metadata: {
-        source,
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v6',
       },
@@ -217,3 +274,3 @@ });
         if (isMountRenderPass) {
-          updatePageloadTransaction(location, routes);
+          updatePageloadTransaction(getActiveRootSpan(), location, routes);
           isMountRenderPass = false;
@@ -231,3 +288,3 @@ } else {
     // will break advanced type inference done by react router params
-    return React.createElement(Routes, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 243}} );
+    return React.createElement(Routes, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 329}} );
   };
@@ -275,3 +332,3 @@
       if (isMountRenderPass) {
-        updatePageloadTransaction(normalizedLocation, routes);
+        updatePageloadTransaction(getActiveRootSpan(), normalizedLocation, routes);
         isMountRenderPass = false;
@@ -288,3 +345,3 @@ } else {
   return (routes, locationArg) => {
-    return React.createElement(SentryRoutes, { routes: routes, locationArg: locationArg, __self: this, __source: {fileName: _jsxFileName, lineNumber: 300}} );
+    return React.createElement(SentryRoutes, { routes: routes, locationArg: locationArg, __self: this, __source: {fileName: _jsxFileName, lineNumber: 386}} );
   };
@@ -303,7 +360,9 @@ }
 
+    const activeRootSpan = getActiveRootSpan();
+
     // The initial load ends when `createBrowserRouter` is called.
     // This is the earliest convenient time to update the transaction name.
     // Callbacks to `router.subscribe` are not called for the initial load.
-    if (router.state.historyAction === 'POP' && activeTransaction) {
-      updatePageloadTransaction(router.state.location, routes, undefined, basename);
+    if (router.state.historyAction === 'POP' && activeRootSpan) {
+      updatePageloadTransaction(activeRootSpan, router.state.location, routes, undefined, basename);
     }
@@ -313,8 +372,3 @@
       const location = state.location;
-
-      if (
-        _startTransactionOnLocationChange &&
-        (state.historyAction === 'PUSH' || state.historyAction === 'POP') &&
-        activeTransaction
-      ) {
+      if (_startTransactionOnLocationChange && (state.historyAction === 'PUSH' || state.historyAction === 'POP')) {
         handleNavigation(location, routes, state.historyAction, undefined, basename);
@@ -328,3 +382,22 @@ }
 
-export { reactRouterV6Instrumentation, withSentryReactRouterV6Routing, wrapCreateBrowserRouter, wrapUseRoutes };
+function getActiveRootSpan() {
+  // Legacy behavior for "old" react router instrumentation
+  if (activeTransaction) {
+    return activeTransaction;
+  }
+
+  const span = getActiveSpan();
+  const rootSpan = span ? getRootSpan(span) : undefined;
+
+  if (!rootSpan) {
+    return undefined;
+  }
+
+  const op = spanToJSON(rootSpan).op;
+
+  // Only use this root span if it is a pageload or navigation span
+  return op === 'navigation' || op === 'pageload' ? rootSpan : undefined;
+}
+
+export { reactRouterV6BrowserTracingIntegration, reactRouterV6Instrumentation, withSentryReactRouterV6Routing, wrapCreateBrowserRouter, wrapUseRoutes };
 //# sourceMappingURL=reactrouterv6.js.map

package.json

 {
   "name": "@sentry/react",
-  "version": "7.99.0",
+  "version": "7.100.0",
   "description": "Official Sentry SDK for React.js",
@@ -32,6 +32,6 @@ "repository": "git://github.com/getsentry/sentry-javascript.git",
   "dependencies": {
-    "@sentry/browser": "7.99.0",
-    "@sentry/core": "7.99.0",
-    "@sentry/types": "7.99.0",
-    "@sentry/utils": "7.99.0",
+    "@sentry/browser": "7.100.0",
+    "@sentry/core": "7.100.0",
+    "@sentry/types": "7.100.0",
+    "@sentry/utils": "7.100.0",
     "hoist-non-react-statics": "^3.3.2"
@@ -38,0 +38,0 @@ },

types-ts3.8/index.d.ts

@@ -7,5 +7,5 @@ export * from '@sentry/browser';
 export { createReduxEnhancer } from './redux';
-export { reactRouterV3Instrumentation } from './reactrouterv3';
-export { reactRouterV4Instrumentation, reactRouterV5Instrumentation, withSentryRouting } from './reactrouter';
-export { reactRouterV6Instrumentation, withSentryReactRouterV6Routing, wrapUseRoutes, wrapCreateBrowserRouter, } from './reactrouterv6';
+export { reactRouterV3Instrumentation, reactRouterV3BrowserTracingIntegration, } from './reactrouterv3';
+export { reactRouterV4Instrumentation, reactRouterV5Instrumentation, withSentryRouting, reactRouterV4BrowserTracingIntegration, reactRouterV5BrowserTracingIntegration, } from './reactrouter';
+export { reactRouterV6Instrumentation, reactRouterV6BrowserTracingIntegration, withSentryReactRouterV6Routing, wrapUseRoutes, wrapCreateBrowserRouter, } from './reactrouterv6';
 //# sourceMappingURL=index.d.ts.map

types-ts3.8/reactrouter.d.ts

@@ -0,1 +1,3 @@
+import { browserTracingIntegration } from '@sentry/browser';
+import { Integration } from '@sentry/types';
 import * as React from 'react';
@@ -20,4 +22,25 @@ import { Action, Location, ReactRouterInstrumentation } from './types';
 };
-type MatchPath = (pathname: string, props: string | string[] | any, parent?: Match | null) => Match | null;
+export type MatchPath = (pathname: string, props: string | string[] | any, parent?: Match | null) => Match | null;
+interface ReactRouterOptions {
+    history: RouterHistory;
+    routes?: RouteConfig[];
+    matchPath?: MatchPath;
+}
+/**
+ * A browser tracing integration that uses React Router v4 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+export declare function reactRouterV4BrowserTracingIntegration(options: Parameters<typeof browserTracingIntegration>[0] & ReactRouterOptions): Integration;
+/**
+ * A browser tracing integration that uses React Router v5 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+export declare function reactRouterV5BrowserTracingIntegration(options: Parameters<typeof browserTracingIntegration>[0] & ReactRouterOptions): Integration;
+/**
+ * @deprecated Use `browserTracingReactRouterV4()` instead.
+ */
 export declare function reactRouterV4Instrumentation(history: RouterHistory, routes?: RouteConfig[], matchPath?: MatchPath): ReactRouterInstrumentation;
+/**
+ * @deprecated Use `browserTracingReactRouterV5()` instead.
+ */
 export declare function reactRouterV5Instrumentation(history: RouterHistory, routes?: RouteConfig[], matchPath?: MatchPath): ReactRouterInstrumentation;
@@ -24,0 +47,0 @@ export declare function withSentryRouting<P extends Record<string, any>, R extends React.ComponentType<P>>(Route: R): R;

types-ts3.8/reactrouterv3.d.ts

@@ -0,1 +1,3 @@
+import { browserTracingIntegration } from '@sentry/browser';
+import { Integration } from '@sentry/types';
 import { Location, ReactRouterInstrumentation } from './types';
@@ -16,3 +18,13 @@ type HistoryV3 = {
 }) => void) => void;
+interface ReactRouterOptions {
+    history: HistoryV3;
+    routes: Route[];
+    match: Match;
+}
 /**
+ * A browser tracing integration that uses React Router v3 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+export declare function reactRouterV3BrowserTracingIntegration(options: Parameters<typeof browserTracingIntegration>[0] & ReactRouterOptions): Integration;
+/**
  * Creates routing instrumentation for React Router v3
@@ -24,2 +36,4 @@ * Works for React Router >= 3.2.0 and < 4.0.0
  * @param match `Router.match` utility
+ *
+ * @deprecated Use `reactRouterV3BrowserTracingIntegration()` instead
  */
@@ -26,0 +40,0 @@ export declare function reactRouterV3Instrumentation(history: HistoryV3, routes: Route[], match: Match): ReactRouterInstrumentation;

types-ts3.8/reactrouterv6.d.ts

@@ -1,4 +0,21 @@
-import { Transaction, TransactionContext } from '@sentry/types';
+import { browserTracingIntegration } from '@sentry/browser';
+import { Integration, Transaction, TransactionContext } from '@sentry/types';
 import * as React from 'react';
 import { CreateRouterFunction, CreateRoutesFromChildren, MatchRoutes, Router, RouterState, UseEffect, UseLocation, UseNavigationType, UseRoutes } from './types';
+interface ReactRouterOptions {
+    useEffect: UseEffect;
+    useLocation: UseLocation;
+    useNavigationType: UseNavigationType;
+    createRoutesFromChildren: CreateRoutesFromChildren;
+    matchRoutes: MatchRoutes;
+    stripBasename?: boolean;
+}
+/**
+ * A browser tracing integration that uses React Router v3 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+export declare function reactRouterV6BrowserTracingIntegration(options: Parameters<typeof browserTracingIntegration>[0] & ReactRouterOptions): Integration;
+/**
+ * @deprecated Use `reactRouterV6BrowserTracingIntegration()` instead.
+ */
 export declare function reactRouterV6Instrumentation(useEffect: UseEffect, useLocation: UseLocation, useNavigationType: UseNavigationType, createRoutesFromChildren: CreateRoutesFromChildren, matchRoutes: MatchRoutes, stripBasename?: boolean): (customStartTransaction: (context: TransactionContext) => Transaction | undefined, startTransactionOnPageLoad?: boolean, startTransactionOnLocationChange?: boolean) => void;
@@ -8,2 +25,3 @@ export declare function withSentryReactRouterV6Routing<P extends Record<string, any>, R extends React.FC<P>>(Routes: R): R;
 export declare function wrapCreateBrowserRouter<TState extends RouterState = RouterState, TRouter extends Router<TState> = Router<TState>>(createRouterFunction: CreateRouterFunction<TState, TRouter>): CreateRouterFunction<TState, TRouter>;
+export {};
 //# sourceMappingURL=reactrouterv6.d.ts.map

types/index.d.ts

@@ -7,5 +7,5 @@ export * from '@sentry/browser';
 export { createReduxEnhancer } from './redux';
-export { reactRouterV3Instrumentation } from './reactrouterv3';
-export { reactRouterV4Instrumentation, reactRouterV5Instrumentation, withSentryRouting } from './reactrouter';
-export { reactRouterV6Instrumentation, withSentryReactRouterV6Routing, wrapUseRoutes, wrapCreateBrowserRouter, } from './reactrouterv6';
+export { reactRouterV3Instrumentation, reactRouterV3BrowserTracingIntegration, } from './reactrouterv3';
+export { reactRouterV4Instrumentation, reactRouterV5Instrumentation, withSentryRouting, reactRouterV4BrowserTracingIntegration, reactRouterV5BrowserTracingIntegration, } from './reactrouter';
+export { reactRouterV6Instrumentation, reactRouterV6BrowserTracingIntegration, withSentryReactRouterV6Routing, wrapUseRoutes, wrapCreateBrowserRouter, } from './reactrouterv6';
 //# sourceMappingURL=index.d.ts.map

types/reactrouter.d.ts

@@ -0,1 +1,3 @@
+import { browserTracingIntegration } from '@sentry/browser';
+import type { Integration } from '@sentry/types';
 import * as React from 'react';
@@ -20,4 +22,25 @@ import type { Action, Location, ReactRouterInstrumentation } from './types';
 };
-type MatchPath = (pathname: string, props: string | string[] | any, parent?: Match | null) => Match | null;
+export type MatchPath = (pathname: string, props: string | string[] | any, parent?: Match | null) => Match | null;
+interface ReactRouterOptions {
+    history: RouterHistory;
+    routes?: RouteConfig[];
+    matchPath?: MatchPath;
+}
+/**
+ * A browser tracing integration that uses React Router v4 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+export declare function reactRouterV4BrowserTracingIntegration(options: Parameters<typeof browserTracingIntegration>[0] & ReactRouterOptions): Integration;
+/**
+ * A browser tracing integration that uses React Router v5 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+export declare function reactRouterV5BrowserTracingIntegration(options: Parameters<typeof browserTracingIntegration>[0] & ReactRouterOptions): Integration;
+/**
+ * @deprecated Use `browserTracingReactRouterV4()` instead.
+ */
 export declare function reactRouterV4Instrumentation(history: RouterHistory, routes?: RouteConfig[], matchPath?: MatchPath): ReactRouterInstrumentation;
+/**
+ * @deprecated Use `browserTracingReactRouterV5()` instead.
+ */
 export declare function reactRouterV5Instrumentation(history: RouterHistory, routes?: RouteConfig[], matchPath?: MatchPath): ReactRouterInstrumentation;
@@ -24,0 +47,0 @@ export declare function withSentryRouting<P extends Record<string, any>, R extends React.ComponentType<P>>(Route: R): R;

types/reactrouterv3.d.ts

@@ -0,1 +1,3 @@
+import { browserTracingIntegration } from '@sentry/browser';
+import type { Integration } from '@sentry/types';
 import type { Location, ReactRouterInstrumentation } from './types';
@@ -16,3 +18,13 @@ type HistoryV3 = {
 }) => void) => void;
+interface ReactRouterOptions {
+    history: HistoryV3;
+    routes: Route[];
+    match: Match;
+}
 /**
+ * A browser tracing integration that uses React Router v3 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+export declare function reactRouterV3BrowserTracingIntegration(options: Parameters<typeof browserTracingIntegration>[0] & ReactRouterOptions): Integration;
+/**
  * Creates routing instrumentation for React Router v3
@@ -24,2 +36,4 @@ * Works for React Router >= 3.2.0 and < 4.0.0
  * @param match `Router.match` utility
+ *
+ * @deprecated Use `reactRouterV3BrowserTracingIntegration()` instead
  */
@@ -26,0 +40,0 @@ export declare function reactRouterV3Instrumentation(history: HistoryV3, routes: Route[], match: Match): ReactRouterInstrumentation;

types/reactrouterv6.d.ts

@@ -1,4 +0,21 @@
-import type { Transaction, TransactionContext } from '@sentry/types';
+import { browserTracingIntegration } from '@sentry/browser';
+import type { Integration, Transaction, TransactionContext } from '@sentry/types';
 import * as React from 'react';
 import type { CreateRouterFunction, CreateRoutesFromChildren, MatchRoutes, Router, RouterState, UseEffect, UseLocation, UseNavigationType, UseRoutes } from './types';
+interface ReactRouterOptions {
+    useEffect: UseEffect;
+    useLocation: UseLocation;
+    useNavigationType: UseNavigationType;
+    createRoutesFromChildren: CreateRoutesFromChildren;
+    matchRoutes: MatchRoutes;
+    stripBasename?: boolean;
+}
+/**
+ * A browser tracing integration that uses React Router v3 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+export declare function reactRouterV6BrowserTracingIntegration(options: Parameters<typeof browserTracingIntegration>[0] & ReactRouterOptions): Integration;
+/**
+ * @deprecated Use `reactRouterV6BrowserTracingIntegration()` instead.
+ */
 export declare function reactRouterV6Instrumentation(useEffect: UseEffect, useLocation: UseLocation, useNavigationType: UseNavigationType, createRoutesFromChildren: CreateRoutesFromChildren, matchRoutes: MatchRoutes, stripBasename?: boolean): (customStartTransaction: (context: TransactionContext) => Transaction | undefined, startTransactionOnPageLoad?: boolean, startTransactionOnLocationChange?: boolean) => void;
@@ -8,2 +25,3 @@ export declare function withSentryReactRouterV6Routing<P extends Record<string, any>, R extends React.FC<P>>(Routes: R): R;
 export declare function wrapCreateBrowserRouter<TState extends RouterState = RouterState, TRouter extends Router<TState> = Router<TState>>(createRouterFunction: CreateRouterFunction<TState, TRouter>): CreateRouterFunction<TState, TRouter>;
+export {};
 //# sourceMappingURL=reactrouterv6.d.ts.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

339459

increased by17.96%

Lines of code

3402

increased by15.56%

Dependency changes

• + Added@sentry-internal/feedback@7.100.0(transitive)

• + Added@sentry-internal/replay-canvas@7.100.0(transitive)

• + Added@sentry-internal/tracing@7.100.0(transitive)

• + Added@sentry/browser@7.100.0(transitive)

• + Added@sentry/core@7.100.0(transitive)

• + Added@sentry/replay@7.100.0(transitive)

• + Added@sentry/types@7.100.0(transitive)

• + Added@sentry/utils@7.100.0(transitive)

• - Removed@sentry-internal/feedback@7.99.0(transitive)

• - Removed@sentry-internal/replay-canvas@7.99.0(transitive)

• - Removed@sentry-internal/tracing@7.99.0(transitive)

• - Removed@sentry/browser@7.99.0(transitive)

• - Removed@sentry/core@7.99.0(transitive)

• - Removed@sentry/replay@7.99.0(transitive)

• - Removed@sentry/types@7.99.0(transitive)

• - Removed@sentry/utils@7.99.0(transitive)

• Updated@sentry/browser@7.100.0

• Updated@sentry/core@7.100.0

• Updated@sentry/types@7.100.0

• Updated@sentry/utils@7.100.0