@sentry/react - npm Package Compare versions

Comparing version 8.0.0-alpha.2 to 8.0.0-alpha.3

cjs/errorboundary.js

@@ -112,3 +112,5 @@ Object.defineProperty(exports, '__esModule', { value: true });
         },
-        mechanism: { handled: false },
+        // If users provide a fallback component we can assume they are handling the error.
+        // Therefore, we set the mechanism depending on the presence of the fallback prop.
+        mechanism: { handled: !!this.props.fallback },
       });
@@ -163,3 +165,3 @@
       if (typeof fallback === 'function') {
-        element = fallback({
+        element = React__namespace.createElement(fallback, {
           error: state.error,
@@ -202,4 +204,4 @@ componentStack: state.componentStack,
   const Wrapped = (props) => (
-    React__namespace.createElement(ErrorBoundary, { ...errorBoundaryOptions, __self: this, __source: {fileName: _jsxFileName, lineNumber: 237}}
-      , React__namespace.createElement(WrappedComponent, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 238}} )
+    React__namespace.createElement(ErrorBoundary, { ...errorBoundaryOptions, __self: this, __source: {fileName: _jsxFileName, lineNumber: 239}}
+      , React__namespace.createElement(WrappedComponent, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 240}} )
     )
@@ -206,0 +208,0 @@ );

cjs/index.js

@@ -29,5 +29,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 exports.wrapUseRoutes = reactrouterv6.wrapUseRoutes;
-for (const k in browser) {
-  if (k !== 'default' && !exports.hasOwnProperty(k)) exports[k] = browser[k];
-}
+Object.prototype.hasOwnProperty.call(browser, '__proto__') &&
+  !Object.prototype.hasOwnProperty.call(exports, '__proto__') &&
+  Object.defineProperty(exports, '__proto__', {
+    enumerable: true,
+    value: browser['__proto__']
+  });
+
+Object.keys(browser).forEach(k => {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = browser[k];
+});
 //# sourceMappingURL=index.js.map

cjs/reactrouter.js

@@ -29,4 +29,2 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
-let activeTransaction;
-
 /**
@@ -52,17 +50,11 @@ * A browser tracing integration that uses React Router v4 to instrument navigations.
 
-      const startPageloadCallback = (startSpanOptions) => {
-        browser.startBrowserTracingPageLoadSpan(client, startSpanOptions);
-        return undefined;
-      };
-
-      const startNavigationCallback = (startSpanOptions) => {
-        browser.startBrowserTracingNavigationSpan(client, startSpanOptions);
-        return undefined;
-      };
-
-      const instrumentation = createReactRouterInstrumentation(history, 'reactrouter_v4', routes, matchPath);
-
-      // Now instrument page load & navigation with correct settings
-      instrumentation(startPageloadCallback, instrumentPageLoad, false);
-      instrumentation(startNavigationCallback, false, instrumentNavigation);
+      instrumentReactRouter(
+        client,
+        instrumentPageLoad,
+        instrumentNavigation,
+        history,
+        'reactrouter_v4',
+        routes,
+        matchPath,
+      );
     },
@@ -85,3 +77,3 @@ };
 
-  const { history, routes, matchPath } = options;
+  const { history, routes, matchPath, instrumentPageLoad = true, instrumentNavigation = true } = options;
 
@@ -93,17 +85,11 @@ return {
 
-      const startPageloadCallback = (startSpanOptions) => {
-        browser.startBrowserTracingPageLoadSpan(client, startSpanOptions);
-        return undefined;
-      };
-
-      const startNavigationCallback = (startSpanOptions) => {
-        browser.startBrowserTracingNavigationSpan(client, startSpanOptions);
-        return undefined;
-      };
-
-      const instrumentation = createReactRouterInstrumentation(history, 'reactrouter_v5', routes, matchPath);
-
-      // Now instrument page load & navigation with correct settings
-      instrumentation(startPageloadCallback, options.instrumentPageLoad, false);
-      instrumentation(startNavigationCallback, false, options.instrumentNavigation);
+      instrumentReactRouter(
+        client,
+        instrumentPageLoad,
+        instrumentNavigation,
+        history,
+        'reactrouter_v5',
+        routes,
+        matchPath,
+      );
     },
@@ -113,3 +99,6 @@ };
 
-function createReactRouterInstrumentation(
+function instrumentReactRouter(
+  client,
+  instrumentPageLoad,
+  instrumentNavigation,
   history,
@@ -154,8 +143,7 @@ instrumentationName,
 
-  return (customStartTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true) => {
+  if (instrumentPageLoad) {
     const initPathName = getInitPathName();
-
-    if (startTransactionOnPageLoad && initPathName) {
+    if (initPathName) {
       const [name, source] = normalizeTransactionName(initPathName);
-      activeTransaction = customStartTransaction({
+      browser.startBrowserTracingPageLoadSpan(client, {
         name,
@@ -169,23 +157,19 @@ attributes: {
     }
+  }
 
-    if (startTransactionOnLocationChange && history.listen) {
-      history.listen((location, action) => {
-        if (action && (action === 'PUSH' || action === 'POP')) {
-          if (activeTransaction) {
-            activeTransaction.end();
-          }
-
-          const [name, source] = normalizeTransactionName(location.pathname);
-          activeTransaction = customStartTransaction({
-            name,
-            attributes: {
-              [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
-              [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.${instrumentationName}`,
-              [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
-            },
-          });
-        }
-      });
-    }
-  };
+  if (instrumentNavigation && history.listen) {
+    history.listen((location, action) => {
+      if (action && (action === 'PUSH' || action === 'POP')) {
+        const [name, source] = normalizeTransactionName(location.pathname);
+        browser.startBrowserTracingNavigationSpan(client, {
+          name,
+          attributes: {
+            [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+            [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.${instrumentationName}`,
+            [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
+          },
+        });
+      }
+    });
+  }
 }
@@ -235,5 +219,9 @@
   const WrappedRoute = (props) => {
-    if (activeRootSpan && props && props.computedMatch && props.computedMatch.isExact) {
-      activeRootSpan.updateName(props.computedMatch.path);
-      activeRootSpan.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+    if (props && props.computedMatch && props.computedMatch.isExact) {
+      core.getCurrentScope().setTransactionName(props.computedMatch.path);
+
+      if (activeRootSpan) {
+        activeRootSpan.updateName(props.computedMatch.path);
+        activeRootSpan.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+      }
     }
@@ -244,3 +232,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: 253}} );
+    return React__namespace.createElement(Route, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 242}} );
   };
@@ -258,9 +246,4 @@
 function getActiveRootSpan() {
-  // Legacy behavior for "old" react router instrumentation
-  if (activeTransaction) {
-    return activeTransaction;
-  }
-
   const span = core.getActiveSpan();
-  const rootSpan = span ? core.getRootSpan(span) : undefined;
+  const rootSpan = span && core.getRootSpan(span);
 
@@ -267,0 +250,0 @@ if (!rootSpan) {

cjs/reactrouterv3.js

@@ -29,17 +29,41 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
-      const startPageloadCallback = (startSpanOptions) => {
-        browser.startBrowserTracingPageLoadSpan(client, startSpanOptions);
-        return undefined;
-      };
+      if (instrumentPageLoad && browser.WINDOW && browser.WINDOW.location) {
+        normalizeTransactionName(
+          routes,
+          browser.WINDOW.location ,
+          match,
+          (localName, source = 'url') => {
+            browser.startBrowserTracingPageLoadSpan(client, {
+              name: localName,
+              attributes: {
+                [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+                [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v3',
+                [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
+              },
+            });
+          },
+        );
+      }
 
-      const startNavigationCallback = (startSpanOptions) => {
-        browser.startBrowserTracingNavigationSpan(client, startSpanOptions);
-        return undefined;
-      };
-
-      const instrumentation = reactRouterV3Instrumentation(history, routes, match);
-
-      // Now instrument page load & navigation with correct settings
-      instrumentation(startPageloadCallback, instrumentPageLoad, false);
-      instrumentation(startNavigationCallback, false, instrumentNavigation);
+      if (instrumentNavigation && history.listen) {
+        history.listen(location => {
+          if (location.action === 'PUSH' || location.action === 'POP') {
+            normalizeTransactionName(
+              routes,
+              location,
+              match,
+              (localName, source = 'url') => {
+                browser.startBrowserTracingNavigationSpan(client, {
+                  name: localName,
+                  attributes: {
+                    [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+                    [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v3',
+                    [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
+                  },
+                });
+              },
+            );
+          }
+        });
+      }
     },
@@ -50,65 +74,2 @@ };
 /**
- * Creates routing instrumentation for React Router v3
- * Works for React Router >= 3.2.0 and < 4.0.0
- *
- * @param history object from the `history` library
- * @param routes a list of all routes, should be
- * @param match `Router.match` utility
- */
-function reactRouterV3Instrumentation(history, routes, match) {
-  return (
-    startTransaction,
-    startTransactionOnPageLoad = true,
-    startTransactionOnLocationChange = true,
-  ) => {
-    let activeTransaction;
-    let prevName;
-
-    // Have to use window.location because history.location might not be defined.
-    if (startTransactionOnPageLoad && browser.WINDOW && browser.WINDOW.location) {
-      normalizeTransactionName(
-        routes,
-        browser.WINDOW.location ,
-        match,
-        (localName, source = 'url') => {
-          prevName = localName;
-          activeTransaction = startTransaction({
-            name: prevName,
-            attributes: {
-              [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
-              [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v3',
-              [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
-            },
-          });
-        },
-      );
-    }
-
-    if (startTransactionOnLocationChange && history.listen) {
-      history.listen(location => {
-        if (location.action === 'PUSH' || location.action === 'POP') {
-          if (activeTransaction) {
-            activeTransaction.end();
-          }
-          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,
-              attributes,
-            });
-          });
-        }
-      });
-    }
-  };
-}
-
-/**
  * Normalize transaction names using `Router.match`
@@ -115,0 +76,0 @@ */

cjs/reactrouterv6.js

@@ -27,6 +27,4 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
-const _jsxFileName = "/home/runner/work/sentry-javascript/sentry-javascript/packages/react/src/reactrouterv6.tsx";/* eslint-disable max-lines */
+const _jsxFileName = "/home/runner/work/sentry-javascript/sentry-javascript/packages/react/src/reactrouterv6.tsx";// Inspired from Donnie McNeal's solution:
 
-let activeTransaction;
-
 let _useEffect;
@@ -37,6 +35,6 @@ let _useLocation;
 let _matchRoutes;
-let _customStartTransaction;
-let _startTransactionOnLocationChange;
 let _stripBasename = false;
 
+const CLIENTS_WITH_INSTRUMENT_NAVIGATION = [];
+
 /**
@@ -71,7 +69,2 @@ * A browser tracing integration that uses React Router v3 to instrument navigations.
 
-      const startNavigationCallback = (startSpanOptions) => {
-        browser.startBrowserTracingNavigationSpan(client, startSpanOptions);
-        return undefined;
-      };
-
       const initPathName = browser.WINDOW && browser.WINDOW.location && browser.WINDOW.location.pathname;
@@ -96,4 +89,5 @@ if (instrumentPageLoad && initPathName) {
 
-      _customStartTransaction = startNavigationCallback;
-      _startTransactionOnLocationChange = instrumentNavigation;
+      if (instrumentNavigation) {
+        CLIENTS_WITH_INSTRUMENT_NAVIGATION.push(client);
+      }
     },
@@ -189,6 +183,11 @@ };
 
-  if (activeRootSpan && branches) {
+  if (branches) {
     const [name, source] = getNormalizedName(routes, location, branches, basename);
-    activeRootSpan.updateName(name);
-    activeRootSpan.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+
+    core.getCurrentScope().setTransactionName(name);
+
+    if (activeRootSpan) {
+      activeRootSpan.updateName(name);
+      activeRootSpan.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+    }
   }
@@ -206,9 +205,11 @@ }
 
-  if (_startTransactionOnLocationChange && (navigationType === 'PUSH' || navigationType === 'POP') && branches) {
-    if (activeTransaction) {
-      activeTransaction.end();
-    }
+  const client = core.getClient();
+  if (!client || !CLIENTS_WITH_INSTRUMENT_NAVIGATION.includes(client)) {
+    return;
+  }
 
+  if ((navigationType === 'PUSH' || navigationType === 'POP') && branches) {
     const [name, source] = getNormalizedName(routes, location, branches, basename);
-    activeTransaction = _customStartTransaction({
+
+    browser.startBrowserTracingNavigationSpan(client, {
       name,
@@ -226,14 +227,7 @@ attributes: {
 function withSentryReactRouterV6Routing(Routes) {
-  if (
-    !_useEffect ||
-    !_useLocation ||
-    !_useNavigationType ||
-    !_createRoutesFromChildren ||
-    !_matchRoutes ||
-    !_customStartTransaction
-  ) {
+  if (!_useEffect || !_useLocation || !_useNavigationType || !_createRoutesFromChildren || !_matchRoutes) {
     debugBuild.DEBUG_BUILD &&
       utils.logger.warn(`reactRouterV6Instrumentation was unable to wrap Routes because of one or more missing parameters.
       useEffect: ${_useEffect}. useLocation: ${_useLocation}. useNavigationType: ${_useNavigationType}.
-      createRoutesFromChildren: ${_createRoutesFromChildren}. matchRoutes: ${_matchRoutes}. customStartTransaction: ${_customStartTransaction}.`);
+      createRoutesFromChildren: ${_createRoutesFromChildren}. matchRoutes: ${_matchRoutes}.`);
 
@@ -267,3 +261,3 @@ return Routes;
     // will break advanced type inference done by react router params
-    return React__namespace.createElement(Routes, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 329}} );
+    return React__namespace.createElement(Routes, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 277}} );
   };
@@ -279,3 +273,3 @@
 function wrapUseRoutes(origUseRoutes) {
-  if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes || !_customStartTransaction) {
+  if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes) {
     debugBuild.DEBUG_BUILD &&
@@ -324,3 +318,3 @@ utils.logger.warn(
   return (routes, locationArg) => {
-    return React__namespace.createElement(SentryRoutes, { routes: routes, locationArg: locationArg, __self: this, __source: {fileName: _jsxFileName, lineNumber: 386}} );
+    return React__namespace.createElement(SentryRoutes, { routes: routes, locationArg: locationArg, __self: this, __source: {fileName: _jsxFileName, lineNumber: 334}} );
   };
@@ -350,3 +344,3 @@ }
       const location = state.location;
-      if (_startTransactionOnLocationChange && (state.historyAction === 'PUSH' || state.historyAction === 'POP')) {
+      if (state.historyAction === 'PUSH' || state.historyAction === 'POP') {
         handleNavigation(location, routes, state.historyAction, undefined, basename);
@@ -361,7 +355,2 @@ }
 function getActiveRootSpan() {
-  // Legacy behavior for "old" react router instrumentation
-  if (activeTransaction) {
-    return activeTransaction;
-  }
-
   const span = core.getActiveSpan();
@@ -368,0 +357,0 @@ const rootSpan = span ? core.getRootSpan(span) : undefined;

esm/errorboundary.js

@@ -93,3 +93,5 @@ import { getClient, showReportDialog, withScope, captureException } from '@sentry/browser';
         },
-        mechanism: { handled: false },
+        // If users provide a fallback component we can assume they are handling the error.
+        // Therefore, we set the mechanism depending on the presence of the fallback prop.
+        mechanism: { handled: !!this.props.fallback },
       });
@@ -144,3 +146,3 @@
       if (typeof fallback === 'function') {
-        element = fallback({
+        element = React.createElement(fallback, {
           error: state.error,
@@ -183,4 +185,4 @@ componentStack: state.componentStack,
   const Wrapped = (props) => (
-    React.createElement(ErrorBoundary, { ...errorBoundaryOptions, __self: this, __source: {fileName: _jsxFileName, lineNumber: 237}}
-      , React.createElement(WrappedComponent, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 238}} )
+    React.createElement(ErrorBoundary, { ...errorBoundaryOptions, __self: this, __source: {fileName: _jsxFileName, lineNumber: 239}}
+      , React.createElement(WrappedComponent, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 240}} )
     )
@@ -187,0 +189,0 @@ );

esm/reactrouter.js

 import { browserTracingIntegration, startBrowserTracingPageLoadSpan, startBrowserTracingNavigationSpan, WINDOW } from '@sentry/browser';
-import { getActiveSpan, getRootSpan, spanToJSON, SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
+import { SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, getActiveSpan, getRootSpan, spanToJSON, getCurrentScope } from '@sentry/core';
 import hoistNonReactStatics from 'hoist-non-react-statics';
@@ -10,4 +10,2 @@ import * as React from 'react';
 
-let activeTransaction;
-
 /**
@@ -33,17 +31,11 @@ * A browser tracing integration that uses React Router v4 to instrument navigations.
 
-      const startPageloadCallback = (startSpanOptions) => {
-        startBrowserTracingPageLoadSpan(client, startSpanOptions);
-        return undefined;
-      };
-
-      const startNavigationCallback = (startSpanOptions) => {
-        startBrowserTracingNavigationSpan(client, startSpanOptions);
-        return undefined;
-      };
-
-      const instrumentation = createReactRouterInstrumentation(history, 'reactrouter_v4', routes, matchPath);
-
-      // Now instrument page load & navigation with correct settings
-      instrumentation(startPageloadCallback, instrumentPageLoad, false);
-      instrumentation(startNavigationCallback, false, instrumentNavigation);
+      instrumentReactRouter(
+        client,
+        instrumentPageLoad,
+        instrumentNavigation,
+        history,
+        'reactrouter_v4',
+        routes,
+        matchPath,
+      );
     },
@@ -66,3 +58,3 @@ };
 
-  const { history, routes, matchPath } = options;
+  const { history, routes, matchPath, instrumentPageLoad = true, instrumentNavigation = true } = options;
 
@@ -74,17 +66,11 @@ return {
 
-      const startPageloadCallback = (startSpanOptions) => {
-        startBrowserTracingPageLoadSpan(client, startSpanOptions);
-        return undefined;
-      };
-
-      const startNavigationCallback = (startSpanOptions) => {
-        startBrowserTracingNavigationSpan(client, startSpanOptions);
-        return undefined;
-      };
-
-      const instrumentation = createReactRouterInstrumentation(history, 'reactrouter_v5', routes, matchPath);
-
-      // Now instrument page load & navigation with correct settings
-      instrumentation(startPageloadCallback, options.instrumentPageLoad, false);
-      instrumentation(startNavigationCallback, false, options.instrumentNavigation);
+      instrumentReactRouter(
+        client,
+        instrumentPageLoad,
+        instrumentNavigation,
+        history,
+        'reactrouter_v5',
+        routes,
+        matchPath,
+      );
     },
@@ -94,3 +80,6 @@ };
 
-function createReactRouterInstrumentation(
+function instrumentReactRouter(
+  client,
+  instrumentPageLoad,
+  instrumentNavigation,
   history,
@@ -135,8 +124,7 @@ instrumentationName,
 
-  return (customStartTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true) => {
+  if (instrumentPageLoad) {
     const initPathName = getInitPathName();
-
-    if (startTransactionOnPageLoad && initPathName) {
+    if (initPathName) {
       const [name, source] = normalizeTransactionName(initPathName);
-      activeTransaction = customStartTransaction({
+      startBrowserTracingPageLoadSpan(client, {
         name,
@@ -150,23 +138,19 @@ attributes: {
     }
+  }
 
-    if (startTransactionOnLocationChange && history.listen) {
-      history.listen((location, action) => {
-        if (action && (action === 'PUSH' || action === 'POP')) {
-          if (activeTransaction) {
-            activeTransaction.end();
-          }
-
-          const [name, source] = normalizeTransactionName(location.pathname);
-          activeTransaction = customStartTransaction({
-            name,
-            attributes: {
-              [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
-              [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.${instrumentationName}`,
-              [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
-            },
-          });
-        }
-      });
-    }
-  };
+  if (instrumentNavigation && history.listen) {
+    history.listen((location, action) => {
+      if (action && (action === 'PUSH' || action === 'POP')) {
+        const [name, source] = normalizeTransactionName(location.pathname);
+        startBrowserTracingNavigationSpan(client, {
+          name,
+          attributes: {
+            [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+            [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.${instrumentationName}`,
+            [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
+          },
+        });
+      }
+    });
+  }
 }
@@ -216,5 +200,9 @@
   const WrappedRoute = (props) => {
-    if (activeRootSpan && props && props.computedMatch && props.computedMatch.isExact) {
-      activeRootSpan.updateName(props.computedMatch.path);
-      activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+    if (props && props.computedMatch && props.computedMatch.isExact) {
+      getCurrentScope().setTransactionName(props.computedMatch.path);
+
+      if (activeRootSpan) {
+        activeRootSpan.updateName(props.computedMatch.path);
+        activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+      }
     }
@@ -225,3 +213,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: 253}} );
+    return React.createElement(Route, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 242}} );
   };
@@ -239,9 +227,4 @@
 function getActiveRootSpan() {
-  // Legacy behavior for "old" react router instrumentation
-  if (activeTransaction) {
-    return activeTransaction;
-  }
-
   const span = getActiveSpan();
-  const rootSpan = span ? getRootSpan(span) : undefined;
+  const rootSpan = span && getRootSpan(span);
 
@@ -248,0 +231,0 @@ if (!rootSpan) {

esm/reactrouterv3.js

@@ -1,2 +0,2 @@
-import { browserTracingIntegration, startBrowserTracingPageLoadSpan, startBrowserTracingNavigationSpan, 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';
@@ -27,17 +27,41 @@
 
-      const startPageloadCallback = (startSpanOptions) => {
-        startBrowserTracingPageLoadSpan(client, startSpanOptions);
-        return undefined;
-      };
+      if (instrumentPageLoad && WINDOW && WINDOW.location) {
+        normalizeTransactionName(
+          routes,
+          WINDOW.location ,
+          match,
+          (localName, source = 'url') => {
+            startBrowserTracingPageLoadSpan(client, {
+              name: localName,
+              attributes: {
+                [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+                [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v3',
+                [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
+              },
+            });
+          },
+        );
+      }
 
-      const startNavigationCallback = (startSpanOptions) => {
-        startBrowserTracingNavigationSpan(client, startSpanOptions);
-        return undefined;
-      };
-
-      const instrumentation = reactRouterV3Instrumentation(history, routes, match);
-
-      // Now instrument page load & navigation with correct settings
-      instrumentation(startPageloadCallback, instrumentPageLoad, false);
-      instrumentation(startNavigationCallback, false, instrumentNavigation);
+      if (instrumentNavigation && history.listen) {
+        history.listen(location => {
+          if (location.action === 'PUSH' || location.action === 'POP') {
+            normalizeTransactionName(
+              routes,
+              location,
+              match,
+              (localName, source = 'url') => {
+                startBrowserTracingNavigationSpan(client, {
+                  name: localName,
+                  attributes: {
+                    [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+                    [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v3',
+                    [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
+                  },
+                });
+              },
+            );
+          }
+        });
+      }
     },
@@ -48,65 +72,2 @@ };
 /**
- * Creates routing instrumentation for React Router v3
- * Works for React Router >= 3.2.0 and < 4.0.0
- *
- * @param history object from the `history` library
- * @param routes a list of all routes, should be
- * @param match `Router.match` utility
- */
-function reactRouterV3Instrumentation(history, routes, match) {
-  return (
-    startTransaction,
-    startTransactionOnPageLoad = true,
-    startTransactionOnLocationChange = true,
-  ) => {
-    let activeTransaction;
-    let prevName;
-
-    // Have to use window.location because history.location might not be defined.
-    if (startTransactionOnPageLoad && WINDOW && WINDOW.location) {
-      normalizeTransactionName(
-        routes,
-        WINDOW.location ,
-        match,
-        (localName, source = 'url') => {
-          prevName = localName;
-          activeTransaction = startTransaction({
-            name: prevName,
-            attributes: {
-              [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
-              [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v3',
-              [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
-            },
-          });
-        },
-      );
-    }
-
-    if (startTransactionOnLocationChange && history.listen) {
-      history.listen(location => {
-        if (location.action === 'PUSH' || location.action === 'POP') {
-          if (activeTransaction) {
-            activeTransaction.end();
-          }
-          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,
-              attributes,
-            });
-          });
-        }
-      });
-    }
-  };
-}
-
-/**
  * Normalize transaction names using `Router.match`
@@ -113,0 +74,0 @@ */

esm/reactrouterv6.js

 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 { SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, getActiveSpan, getRootSpan, spanToJSON, getCurrentScope, getClient } from '@sentry/core';
 import { logger, getNumberOfUrlSegments } from '@sentry/utils';
@@ -8,6 +8,4 @@ import hoistNonReactStatics from 'hoist-non-react-statics';
 
-const _jsxFileName = "/home/runner/work/sentry-javascript/sentry-javascript/packages/react/src/reactrouterv6.tsx";/* eslint-disable max-lines */
+const _jsxFileName = "/home/runner/work/sentry-javascript/sentry-javascript/packages/react/src/reactrouterv6.tsx";// Inspired from Donnie McNeal's solution:
 
-let activeTransaction;
-
 let _useEffect;
@@ -18,6 +16,6 @@ let _useLocation;
 let _matchRoutes;
-let _customStartTransaction;
-let _startTransactionOnLocationChange;
 let _stripBasename = false;
 
+const CLIENTS_WITH_INSTRUMENT_NAVIGATION = [];
+
 /**
@@ -52,7 +50,2 @@ * A browser tracing integration that uses React Router v3 to instrument navigations.
 
-      const startNavigationCallback = (startSpanOptions) => {
-        startBrowserTracingNavigationSpan(client, startSpanOptions);
-        return undefined;
-      };
-
       const initPathName = WINDOW && WINDOW.location && WINDOW.location.pathname;
@@ -77,4 +70,5 @@ if (instrumentPageLoad && initPathName) {
 
-      _customStartTransaction = startNavigationCallback;
-      _startTransactionOnLocationChange = instrumentNavigation;
+      if (instrumentNavigation) {
+        CLIENTS_WITH_INSTRUMENT_NAVIGATION.push(client);
+      }
     },
@@ -170,6 +164,11 @@ };
 
-  if (activeRootSpan && branches) {
+  if (branches) {
     const [name, source] = getNormalizedName(routes, location, branches, basename);
-    activeRootSpan.updateName(name);
-    activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+
+    getCurrentScope().setTransactionName(name);
+
+    if (activeRootSpan) {
+      activeRootSpan.updateName(name);
+      activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
+    }
   }
@@ -187,9 +186,11 @@ }
 
-  if (_startTransactionOnLocationChange && (navigationType === 'PUSH' || navigationType === 'POP') && branches) {
-    if (activeTransaction) {
-      activeTransaction.end();
-    }
+  const client = getClient();
+  if (!client || !CLIENTS_WITH_INSTRUMENT_NAVIGATION.includes(client)) {
+    return;
+  }
 
+  if ((navigationType === 'PUSH' || navigationType === 'POP') && branches) {
     const [name, source] = getNormalizedName(routes, location, branches, basename);
-    activeTransaction = _customStartTransaction({
+
+    startBrowserTracingNavigationSpan(client, {
       name,
@@ -207,14 +208,7 @@ attributes: {
 function withSentryReactRouterV6Routing(Routes) {
-  if (
-    !_useEffect ||
-    !_useLocation ||
-    !_useNavigationType ||
-    !_createRoutesFromChildren ||
-    !_matchRoutes ||
-    !_customStartTransaction
-  ) {
+  if (!_useEffect || !_useLocation || !_useNavigationType || !_createRoutesFromChildren || !_matchRoutes) {
     DEBUG_BUILD &&
       logger.warn(`reactRouterV6Instrumentation was unable to wrap Routes because of one or more missing parameters.
       useEffect: ${_useEffect}. useLocation: ${_useLocation}. useNavigationType: ${_useNavigationType}.
-      createRoutesFromChildren: ${_createRoutesFromChildren}. matchRoutes: ${_matchRoutes}. customStartTransaction: ${_customStartTransaction}.`);
+      createRoutesFromChildren: ${_createRoutesFromChildren}. matchRoutes: ${_matchRoutes}.`);
 
@@ -248,3 +242,3 @@ return Routes;
     // will break advanced type inference done by react router params
-    return React.createElement(Routes, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 329}} );
+    return React.createElement(Routes, { ...props, __self: this, __source: {fileName: _jsxFileName, lineNumber: 277}} );
   };
@@ -260,3 +254,3 @@
 function wrapUseRoutes(origUseRoutes) {
-  if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes || !_customStartTransaction) {
+  if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes) {
     DEBUG_BUILD &&
@@ -305,3 +299,3 @@ logger.warn(
   return (routes, locationArg) => {
-    return React.createElement(SentryRoutes, { routes: routes, locationArg: locationArg, __self: this, __source: {fileName: _jsxFileName, lineNumber: 386}} );
+    return React.createElement(SentryRoutes, { routes: routes, locationArg: locationArg, __self: this, __source: {fileName: _jsxFileName, lineNumber: 334}} );
   };
@@ -331,3 +325,3 @@ }
       const location = state.location;
-      if (_startTransactionOnLocationChange && (state.historyAction === 'PUSH' || state.historyAction === 'POP')) {
+      if (state.historyAction === 'PUSH' || state.historyAction === 'POP') {
         handleNavigation(location, routes, state.historyAction, undefined, basename);
@@ -342,7 +336,2 @@ }
 function getActiveRootSpan() {
-  // Legacy behavior for "old" react router instrumentation
-  if (activeTransaction) {
-    return activeTransaction;
-  }
-
   const span = getActiveSpan();
@@ -349,0 +338,0 @@ const rootSpan = span ? getRootSpan(span) : undefined;

package.json

 {
   "name": "@sentry/react",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Official Sentry SDK for React.js",
@@ -10,3 +10,3 @@ "repository": "git://github.com/getsentry/sentry-javascript.git",
   "engines": {
-    "node": ">=14.8"
+    "node": ">=14.18"
   },
@@ -22,2 +22,15 @@ "files": [
   "types": "types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": {
+        "types": "./types/index.d.ts",
+        "default": "./esm/index.js"
+      },
+      "require": {
+        "types": "./types/index.d.ts",
+        "default": "./cjs/index.js"
+      }
+    }
+  },
   "typesVersions": {
@@ -34,6 +47,6 @@ "<4.9": {
   "dependencies": {
-    "@sentry/browser": "8.0.0-alpha.2",
-    "@sentry/core": "8.0.0-alpha.2",
-    "@sentry/types": "8.0.0-alpha.2",
-    "@sentry/utils": "8.0.0-alpha.2",
+    "@sentry/browser": "8.0.0-alpha.3",
+    "@sentry/core": "8.0.0-alpha.3",
+    "@sentry/types": "8.0.0-alpha.3",
+    "@sentry/utils": "8.0.0-alpha.3",
     "hoist-non-react-statics": "^3.3.2"
@@ -40,0 +53,0 @@ },

types-ts3.8/reactrouterv6.d.ts

 import { browserTracingIntegration } from '@sentry/browser';
-import { Integration, Transaction, TransactionContext } from '@sentry/types';
+import { Integration } from '@sentry/types';
 import * as React from 'react';
@@ -18,6 +18,2 @@ import { CreateRouterFunction, CreateRoutesFromChildren, MatchRoutes, Router, RouterState, UseEffect, UseLocation, UseNavigationType, UseRoutes } from './types';
 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;
 export declare function withSentryReactRouterV6Routing<P extends Record<string, any>, R extends React.FC<P>>(Routes: R): R;
@@ -24,0 +20,0 @@ export declare function wrapUseRoutes(origUseRoutes: UseRoutes): UseRoutes;

types-ts3.8/types.d.ts

 /// <reference types="react" />
-import { Transaction, TransactionContext } from '@sentry/types';
 export type Action = 'PUSH' | 'REPLACE' | 'POP';
@@ -8,3 +7,2 @@ export type Location = {
 } & Record<string, any>;
-export type ReactRouterInstrumentation = <T extends Transaction>(startTransaction: (context: TransactionContext) => T | undefined, startTransactionOnPageLoad?: boolean, startTransactionOnLocationChange?: boolean) => void;
 export interface NonIndexRouteObject {
@@ -11,0 +9,0 @@ caseSensitive?: boolean;

types/reactrouterv6.d.ts

 import { browserTracingIntegration } from '@sentry/browser';
-import type { Integration, Transaction, TransactionContext } from '@sentry/types';
+import type { Integration } from '@sentry/types';
 import * as React from 'react';
@@ -18,6 +18,2 @@ import type { CreateRouterFunction, CreateRoutesFromChildren, MatchRoutes, Router, RouterState, UseEffect, UseLocation, UseNavigationType, UseRoutes } from './types';
 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;
 export declare function withSentryReactRouterV6Routing<P extends Record<string, any>, R extends React.FC<P>>(Routes: R): R;
@@ -24,0 +20,0 @@ export declare function wrapUseRoutes(origUseRoutes: UseRoutes): UseRoutes;

types/types.d.ts

 /// <reference types="react" />
-import type { Transaction, TransactionContext } from '@sentry/types';
 export type Action = 'PUSH' | 'REPLACE' | 'POP';
@@ -8,3 +7,2 @@ export type Location = {
 } & Record<string, any>;
-export type ReactRouterInstrumentation = <T extends Transaction>(startTransaction: (context: TransactionContext) => T | undefined, startTransactionOnPageLoad?: boolean, startTransactionOnLocationChange?: boolean) => void;
 export interface NonIndexRouteObject {
@@ -11,0 +9,0 @@ caseSensitive?: boolean;

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

Number of package files

77

increased by1.32%

Worsened metrics

Total package byte prevSize

308746

decreased by-6.08%

Lines of code

3132

decreased by-3.33%

Dependency changes

• + Added@sentry-internal/feedback@8.0.0-alpha.3(transitive)

• + Added@sentry-internal/replay-canvas@8.0.0-alpha.3(transitive)

• + Added@sentry-internal/tracing@8.0.0-alpha.3(transitive)

• + Added@sentry/browser@8.0.0-alpha.3(transitive)

• + Added@sentry/core@8.0.0-alpha.3(transitive)

• + Added@sentry/replay@8.0.0-alpha.3(transitive)

• + Added@sentry/types@8.0.0-alpha.3(transitive)

• + Added@sentry/utils@8.0.0-alpha.3(transitive)

• + Addedpreact@10.24.3(transitive)

• - Removed@sentry-internal/feedback@8.0.0-alpha.2(transitive)

• - Removed@sentry-internal/replay-canvas@8.0.0-alpha.2(transitive)

• - Removed@sentry-internal/tracing@8.0.0-alpha.2(transitive)

• - Removed@sentry/browser@8.0.0-alpha.2(transitive)

• - Removed@sentry/core@8.0.0-alpha.2(transitive)

• - Removed@sentry/replay@8.0.0-alpha.2(transitive)

• - Removed@sentry/types@8.0.0-alpha.2(transitive)

• - Removed@sentry/utils@8.0.0-alpha.2(transitive)

• Updated@sentry/browser@8.0.0-alpha.3

• Updated@sentry/core@8.0.0-alpha.3

• Updated@sentry/types@8.0.0-alpha.3

• Updated@sentry/utils@8.0.0-alpha.3