New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@sentry/react

Package Overview
Dependencies
Maintainers
11
Versions
433
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@sentry/react - npm Package Compare versions

Comparing version 8.41.0 to 8.42.0

build/cjs/reactrouterv6-compat-utils.js
build/cjs/reactrouterv6-compat-utils.js.map
build/cjs/reactrouterv7.js
build/cjs/reactrouterv7.js.map
build/esm/reactrouterv6-compat-utils.js
build/esm/reactrouterv6-compat-utils.js.map
build/esm/reactrouterv7.js
build/esm/reactrouterv7.js.map
build/types-ts3.8/reactrouterv6-compat-utils.d.ts
build/types-ts3.8/reactrouterv7.d.ts
build/types/reactrouterv6-compat-utils.d.ts
build/types/reactrouterv6-compat-utils.d.ts.map
build/types/reactrouterv7.d.ts
build/types/reactrouterv7.d.ts.map

7

build/cjs/index.js

@@ -13,2 +13,3 @@ Object.defineProperty(exports, '__esModule', { value: true });

const reactrouterv6 = require('./reactrouterv6.js');
const reactrouterv7 = require('./reactrouterv7.js');

@@ -33,3 +34,9 @@

exports.wrapCreateBrowserRouter = reactrouterv6.wrapCreateBrowserRouter;
exports.wrapCreateBrowserRouterV6 = reactrouterv6.wrapCreateBrowserRouterV6;
exports.wrapUseRoutes = reactrouterv6.wrapUseRoutes;
exports.wrapUseRoutesV6 = reactrouterv6.wrapUseRoutesV6;
exports.reactRouterV7BrowserTracingIntegration = reactrouterv7.reactRouterV7BrowserTracingIntegration;
exports.withSentryReactRouterV7Routing = reactrouterv7.withSentryReactRouterV7Routing;
exports.wrapCreateBrowserRouterV7 = reactrouterv7.wrapCreateBrowserRouterV7;
exports.wrapUseRoutesV7 = reactrouterv7.wrapUseRoutesV7;
Object.prototype.hasOwnProperty.call(browser, '__proto__') &&

@@ -36,0 +43,0 @@ !Object.prototype.hasOwnProperty.call(exports, '__proto__') &&

2

build/cjs/reactrouter.js

@@ -206,3 +206,3 @@ Object.defineProperty(exports, '__esModule', { value: true });

function withSentryRouting(Route) {
const componentDisplayName = (Route ).displayName || (Route ).name;
const componentDisplayName = Route.displayName || Route.name;

@@ -209,0 +209,0 @@ const WrappedRoute = (props) => {

406

build/cjs/reactrouterv6.js
Object.defineProperty(exports, '__esModule', { value: true });
const browser = require('@sentry/browser');
const core = require('@sentry/core');
const hoistNonReactStatics = require('hoist-non-react-statics');
const React = require('react');
const debugBuild = require('./debug-build.js');
const reactrouterv6CompatUtils = require('./reactrouterv6-compat-utils.js');
const _interopDefault = e => e && e.__esModule ? e.default : e;
function _interopNamespace(e) {
if (e && e.__esModule) return e;
const n = Object.create(null);
if (e) {
for (const k in e) {
n[k] = e[k];
}
}
n.default = e;
return n;
}
const hoistNonReactStatics__default = /*#__PURE__*/_interopDefault(hoistNonReactStatics);
const React__namespace = /*#__PURE__*/_interopNamespace(React);
/* eslint-disable max-lines */
// Inspired from Donnie McNeal's solution:
// https://gist.github.com/wontondon/e8c4bdf2888875e4c755712e99279536
let _useEffect;
let _useLocation;
let _useNavigationType;
let _createRoutesFromChildren;
let _matchRoutes;
let _stripBasename = false;
const CLIENTS_WITH_INSTRUMENT_NAVIGATION = new WeakSet();
/**

@@ -47,359 +12,50 @@ * A browser tracing integration that uses React Router v6 to instrument navigations.

) {
const integration = browser.browserTracingIntegration({
...options,
instrumentPageLoad: false,
instrumentNavigation: false,
});
const {
useEffect,
useLocation,
useNavigationType,
createRoutesFromChildren,
matchRoutes,
stripBasename,
instrumentPageLoad = true,
instrumentNavigation = true,
} = options;
return {
...integration,
setup() {
_useEffect = useEffect;
_useLocation = useLocation;
_useNavigationType = useNavigationType;
_matchRoutes = matchRoutes;
_createRoutesFromChildren = createRoutesFromChildren;
_stripBasename = stripBasename || false;
},
afterAllSetup(client) {
integration.afterAllSetup(client);
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',
},
});
}
if (instrumentNavigation) {
CLIENTS_WITH_INSTRUMENT_NAVIGATION.add(client);
}
},
};
return reactrouterv6CompatUtils.createReactRouterV6CompatibleTracingIntegration(options, '6');
}
/**
* Strip the basename from a pathname if exists.
*
* Vendored and modified from `react-router`
* https://github.com/remix-run/react-router/blob/462bb712156a3f739d6139a0f14810b76b002df6/packages/router/utils.ts#L1038
* A wrapper function that adds Sentry routing instrumentation to a React Router v6 useRoutes hook.
* This is used to automatically capture route changes as transactions when using the useRoutes hook.
*/
function stripBasenameFromPathname(pathname, basename) {
if (!basename || basename === '/') {
return pathname;
}
if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {
return pathname;
}
// We want to leave trailing slash behavior in the user's control, so if they
// specify a basename with a trailing slash, we should support it
const startIndex = basename.endsWith('/') ? basename.length - 1 : basename.length;
const nextChar = pathname.charAt(startIndex);
if (nextChar && nextChar !== '/') {
// pathname does not start with basename/
return pathname;
}
return pathname.slice(startIndex) || '/';
function wrapUseRoutesV6(origUseRoutes) {
return reactrouterv6CompatUtils.createV6CompatibleWrapUseRoutes(origUseRoutes, '6');
}
function sendIndexPath(pathBuilder, pathname, basename) {
const reconstructedPath = pathBuilder || _stripBasename ? stripBasenameFromPathname(pathname, basename) : pathname;
/**
* Alias for backwards compatibility
* @deprecated Use `wrapUseRoutesV6` or `wrapUseRoutesV7` instead.
*/
const wrapUseRoutes = wrapUseRoutesV6;
const formattedPath =
// If the path ends with a slash, remove it
reconstructedPath[reconstructedPath.length - 1] === '/'
? reconstructedPath.slice(0, -1)
: // If the path ends with a wildcard, remove it
reconstructedPath.slice(-2) === '/*'
? reconstructedPath.slice(0, -1)
: reconstructedPath;
/**
* A wrapper function that adds Sentry routing instrumentation to a React Router v6 createBrowserRouter function.
* This is used to automatically capture route changes as transactions when using the createBrowserRouter API.
*/
function wrapCreateBrowserRouterV6
return [formattedPath, 'route'];
(createRouterFunction) {
return reactrouterv6CompatUtils.createV6CompatibleWrapCreateBrowserRouter(createRouterFunction, '6');
}
function pathEndsWithWildcard(path, branch) {
return (path.slice(-2) === '/*' && branch.route.children && branch.route.children.length > 0) || false;
}
/**
* Alias for backwards compatibility
* @deprecated Use `wrapCreateBrowserRouterV6` or `wrapCreateBrowserRouterV7` instead.
*/
const wrapCreateBrowserRouter = wrapCreateBrowserRouterV6;
function pathIsWildcardAndHasChildren(path, branch) {
return (path === '*' && branch.route.children && branch.route.children.length > 0) || false;
}
function getNormalizedName(
routes,
location,
branches,
basename = '',
) {
if (!routes || routes.length === 0) {
return [_stripBasename ? stripBasenameFromPathname(location.pathname, basename) : location.pathname, 'url'];
}
let pathBuilder = '';
if (branches) {
for (const branch of branches) {
const route = branch.route;
if (route) {
// Early return if index route
if (route.index) {
return sendIndexPath(pathBuilder, branch.pathname, basename);
}
const path = route.path;
// If path is not a wildcard and has no child routes, append the path
if (path && !pathIsWildcardAndHasChildren(path, branch)) {
const newPath = path[0] === '/' || pathBuilder[pathBuilder.length - 1] === '/' ? path : `/${path}`;
pathBuilder += newPath;
// If the path matches the current location, return the path
if (basename + branch.pathname === location.pathname) {
if (
// If the route defined on the element is something like
// <Route path="/stores/:storeId/products/:productId" element={<div>Product</div>} />
// We should check against the branch.pathname for the number of / separators
// TODO(v9): Put the implementation of `getNumberOfUrlSegments` in this file
// eslint-disable-next-line deprecation/deprecation
core.getNumberOfUrlSegments(pathBuilder) !== core.getNumberOfUrlSegments(branch.pathname) &&
// We should not count wildcard operators in the url segments calculation
pathBuilder.slice(-2) !== '/*'
) {
return [(_stripBasename ? '' : basename) + newPath, 'route'];
}
// if the last character of the pathbuilder is a wildcard and there are children, remove the wildcard
if (pathEndsWithWildcard(pathBuilder, branch)) {
pathBuilder = pathBuilder.slice(0, -1);
}
return [(_stripBasename ? '' : basename) + pathBuilder, 'route'];
}
}
}
}
}
return [_stripBasename ? stripBasenameFromPathname(location.pathname, basename) : location.pathname, 'url'];
}
function updatePageloadTransaction(
activeRootSpan,
location,
routes,
matches,
basename,
) {
const branches = Array.isArray(matches)
? matches
: (_matchRoutes(routes, location, basename) );
if (branches) {
const [name, source] = getNormalizedName(routes, location, branches, basename);
core.getCurrentScope().setTransactionName(name);
if (activeRootSpan) {
activeRootSpan.updateName(name);
activeRootSpan.setAttribute(core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
}
}
}
function handleNavigation(
location,
routes,
navigationType,
matches,
basename,
) {
const branches = Array.isArray(matches) ? matches : _matchRoutes(routes, location, basename);
const client = core.getClient();
if (!client || !CLIENTS_WITH_INSTRUMENT_NAVIGATION.has(client)) {
return;
}
if ((navigationType === 'PUSH' || navigationType === 'POP') && branches) {
const [name, source] = getNormalizedName(routes, location, branches, basename);
browser.startBrowserTracingNavigationSpan(client, {
name,
attributes: {
[core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
[core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
[core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v6',
},
});
}
}
/**
* A higher-order component that adds Sentry routing instrumentation to a React Router v6 Route component.
* This is used to automatically capture route changes as transactions.
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function withSentryReactRouterV6Routing(Routes) {
if (!_useEffect || !_useLocation || !_useNavigationType || !_createRoutesFromChildren || !_matchRoutes) {
debugBuild.DEBUG_BUILD &&
core.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}.`);
return Routes;
}
let isMountRenderPass = true;
const SentryRoutes = (props) => {
const location = _useLocation();
const navigationType = _useNavigationType();
_useEffect(
() => {
const routes = _createRoutesFromChildren(props.children) ;
if (isMountRenderPass) {
updatePageloadTransaction(getActiveRootSpan(), location, routes);
isMountRenderPass = false;
} else {
handleNavigation(location, routes, navigationType);
}
},
// `props.children` is purposely not included in the dependency array, because we do not want to re-run this effect
// when the children change. We only want to start transactions when the location or navigation type change.
[location, navigationType],
);
// @ts-expect-error Setting more specific React Component typing for `R` generic above
// will break advanced type inference done by react router params
return React__namespace.createElement(Routes, { ...props,} );
};
hoistNonReactStatics__default(SentryRoutes, Routes);
// @ts-expect-error Setting more specific React Component typing for `R` generic above
// will break advanced type inference done by react router params
return SentryRoutes;
function withSentryReactRouterV6Routing(routes) {
return reactrouterv6CompatUtils.createV6CompatibleWithSentryReactRouterRouting(routes, '6');
}
function wrapUseRoutes(origUseRoutes) {
if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes) {
debugBuild.DEBUG_BUILD &&
core.logger.warn(
'reactRouterV6Instrumentation was unable to wrap `useRoutes` because of one or more missing parameters.',
);
return origUseRoutes;
}
let isMountRenderPass = true;
const SentryRoutes
= (props) => {
const { routes, locationArg } = props;
const Routes = origUseRoutes(routes, locationArg);
const location = _useLocation();
const navigationType = _useNavigationType();
// A value with stable identity to either pick `locationArg` if available or `location` if not
const stableLocationParam =
typeof locationArg === 'string' || (locationArg && locationArg.pathname)
? (locationArg )
: location;
_useEffect(() => {
const normalizedLocation =
typeof stableLocationParam === 'string' ? { pathname: stableLocationParam } : stableLocationParam;
if (isMountRenderPass) {
updatePageloadTransaction(getActiveRootSpan(), normalizedLocation, routes);
isMountRenderPass = false;
} else {
handleNavigation(normalizedLocation, routes, navigationType);
}
}, [navigationType, stableLocationParam]);
return Routes;
};
// eslint-disable-next-line react/display-name
return (routes, locationArg) => {
return React__namespace.createElement(SentryRoutes, { routes: routes, locationArg: locationArg,} );
};
}
function wrapCreateBrowserRouter
(createRouterFunction) {
if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes) {
debugBuild.DEBUG_BUILD &&
core.logger.warn(
'reactRouterV6Instrumentation was unable to wrap the `createRouter` function because of one or more missing parameters.',
);
return createRouterFunction;
}
// `opts` for createBrowserHistory and createMemoryHistory are different, but also not relevant for us at the moment.
// `basename` is the only option that is relevant for us, and it is the same for all.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return function (routes, opts) {
const router = createRouterFunction(routes, opts);
const basename = opts && opts.basename;
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' && activeRootSpan) {
updatePageloadTransaction(activeRootSpan, router.state.location, routes, undefined, basename);
}
router.subscribe((state) => {
const location = state.location;
if (state.historyAction === 'PUSH' || state.historyAction === 'POP') {
handleNavigation(location, routes, state.historyAction, undefined, basename);
}
});
return router;
};
}
function getActiveRootSpan() {
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.withSentryReactRouterV6Routing = withSentryReactRouterV6Routing;
exports.wrapCreateBrowserRouter = wrapCreateBrowserRouter;
exports.wrapCreateBrowserRouterV6 = wrapCreateBrowserRouterV6;
exports.wrapUseRoutes = wrapUseRoutes;
exports.wrapUseRoutesV6 = wrapUseRoutesV6;
//# sourceMappingURL=reactrouterv6.js.map

2

build/cjs/redux.js

@@ -5,4 +5,2 @@ Object.defineProperty(exports, '__esModule', { value: true });

/* eslint-disable @typescript-eslint/no-explicit-any */
const ACTION_BREADCRUMB_CATEGORY = 'redux.action';

@@ -9,0 +7,0 @@ const ACTION_BREADCRUMB_TYPE = 'info';

3

build/esm/index.js

@@ -10,3 +10,4 @@ export * from '@sentry/browser';

export { reactRouterV4BrowserTracingIntegration, reactRouterV5BrowserTracingIntegration, withSentryRouting } from './reactrouter.js';
export { reactRouterV6BrowserTracingIntegration, withSentryReactRouterV6Routing, wrapCreateBrowserRouter, wrapUseRoutes } from './reactrouterv6.js';
export { reactRouterV6BrowserTracingIntegration, withSentryReactRouterV6Routing, wrapCreateBrowserRouter, wrapCreateBrowserRouterV6, wrapUseRoutes, wrapUseRoutesV6 } from './reactrouterv6.js';
export { reactRouterV7BrowserTracingIntegration, withSentryReactRouterV7Routing, wrapCreateBrowserRouterV7, wrapUseRoutesV7 } from './reactrouterv7.js';
//# sourceMappingURL=index.js.map

2

build/esm/package.json

@@ -1,1 +0,1 @@

{"type":"module","version":"8.41.0","sideEffects":false}
{"type":"module","version":"8.42.0","sideEffects":false}

2

build/esm/reactrouter.js

@@ -187,3 +187,3 @@ import { browserTracingIntegration, startBrowserTracingPageLoadSpan, startBrowserTracingNavigationSpan, WINDOW } from '@sentry/browser';

function withSentryRouting(Route) {
const componentDisplayName = (Route ).displayName || (Route ).name;
const componentDisplayName = Route.displayName || Route.name;

@@ -190,0 +190,0 @@ const WrappedRoute = (props) => {

389

build/esm/reactrouterv6.js

@@ -1,21 +0,3 @@

import { browserTracingIntegration, WINDOW, startBrowserTracingPageLoadSpan, startBrowserTracingNavigationSpan } from '@sentry/browser';
import { SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, logger, getActiveSpan, getRootSpan, spanToJSON, getCurrentScope, getClient, getNumberOfUrlSegments } from '@sentry/core';
import hoistNonReactStatics from 'hoist-non-react-statics';
import * as React from 'react';
import { DEBUG_BUILD } from './debug-build.js';
import { createReactRouterV6CompatibleTracingIntegration, createV6CompatibleWrapUseRoutes, createV6CompatibleWrapCreateBrowserRouter, createV6CompatibleWithSentryReactRouterRouting } from './reactrouterv6-compat-utils.js';
/* eslint-disable max-lines */
// Inspired from Donnie McNeal's solution:
// https://gist.github.com/wontondon/e8c4bdf2888875e4c755712e99279536
let _useEffect;
let _useLocation;
let _useNavigationType;
let _createRoutesFromChildren;
let _matchRoutes;
let _stripBasename = false;
const CLIENTS_WITH_INSTRUMENT_NAVIGATION = new WeakSet();
/**

@@ -28,356 +10,45 @@ * A browser tracing integration that uses React Router v6 to instrument navigations.

) {
const integration = browserTracingIntegration({
...options,
instrumentPageLoad: false,
instrumentNavigation: false,
});
const {
useEffect,
useLocation,
useNavigationType,
createRoutesFromChildren,
matchRoutes,
stripBasename,
instrumentPageLoad = true,
instrumentNavigation = true,
} = options;
return {
...integration,
setup() {
_useEffect = useEffect;
_useLocation = useLocation;
_useNavigationType = useNavigationType;
_matchRoutes = matchRoutes;
_createRoutesFromChildren = createRoutesFromChildren;
_stripBasename = stripBasename || false;
},
afterAllSetup(client) {
integration.afterAllSetup(client);
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',
},
});
}
if (instrumentNavigation) {
CLIENTS_WITH_INSTRUMENT_NAVIGATION.add(client);
}
},
};
return createReactRouterV6CompatibleTracingIntegration(options, '6');
}
/**
* Strip the basename from a pathname if exists.
*
* Vendored and modified from `react-router`
* https://github.com/remix-run/react-router/blob/462bb712156a3f739d6139a0f14810b76b002df6/packages/router/utils.ts#L1038
* A wrapper function that adds Sentry routing instrumentation to a React Router v6 useRoutes hook.
* This is used to automatically capture route changes as transactions when using the useRoutes hook.
*/
function stripBasenameFromPathname(pathname, basename) {
if (!basename || basename === '/') {
return pathname;
}
if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {
return pathname;
}
// We want to leave trailing slash behavior in the user's control, so if they
// specify a basename with a trailing slash, we should support it
const startIndex = basename.endsWith('/') ? basename.length - 1 : basename.length;
const nextChar = pathname.charAt(startIndex);
if (nextChar && nextChar !== '/') {
// pathname does not start with basename/
return pathname;
}
return pathname.slice(startIndex) || '/';
function wrapUseRoutesV6(origUseRoutes) {
return createV6CompatibleWrapUseRoutes(origUseRoutes, '6');
}
function sendIndexPath(pathBuilder, pathname, basename) {
const reconstructedPath = pathBuilder || _stripBasename ? stripBasenameFromPathname(pathname, basename) : pathname;
/**
* Alias for backwards compatibility
* @deprecated Use `wrapUseRoutesV6` or `wrapUseRoutesV7` instead.
*/
const wrapUseRoutes = wrapUseRoutesV6;
const formattedPath =
// If the path ends with a slash, remove it
reconstructedPath[reconstructedPath.length - 1] === '/'
? reconstructedPath.slice(0, -1)
: // If the path ends with a wildcard, remove it
reconstructedPath.slice(-2) === '/*'
? reconstructedPath.slice(0, -1)
: reconstructedPath;
/**
* A wrapper function that adds Sentry routing instrumentation to a React Router v6 createBrowserRouter function.
* This is used to automatically capture route changes as transactions when using the createBrowserRouter API.
*/
function wrapCreateBrowserRouterV6
return [formattedPath, 'route'];
(createRouterFunction) {
return createV6CompatibleWrapCreateBrowserRouter(createRouterFunction, '6');
}
function pathEndsWithWildcard(path, branch) {
return (path.slice(-2) === '/*' && branch.route.children && branch.route.children.length > 0) || false;
}
/**
* Alias for backwards compatibility
* @deprecated Use `wrapCreateBrowserRouterV6` or `wrapCreateBrowserRouterV7` instead.
*/
const wrapCreateBrowserRouter = wrapCreateBrowserRouterV6;
function pathIsWildcardAndHasChildren(path, branch) {
return (path === '*' && branch.route.children && branch.route.children.length > 0) || false;
}
function getNormalizedName(
routes,
location,
branches,
basename = '',
) {
if (!routes || routes.length === 0) {
return [_stripBasename ? stripBasenameFromPathname(location.pathname, basename) : location.pathname, 'url'];
}
let pathBuilder = '';
if (branches) {
for (const branch of branches) {
const route = branch.route;
if (route) {
// Early return if index route
if (route.index) {
return sendIndexPath(pathBuilder, branch.pathname, basename);
}
const path = route.path;
// If path is not a wildcard and has no child routes, append the path
if (path && !pathIsWildcardAndHasChildren(path, branch)) {
const newPath = path[0] === '/' || pathBuilder[pathBuilder.length - 1] === '/' ? path : `/${path}`;
pathBuilder += newPath;
// If the path matches the current location, return the path
if (basename + branch.pathname === location.pathname) {
if (
// If the route defined on the element is something like
// <Route path="/stores/:storeId/products/:productId" element={<div>Product</div>} />
// We should check against the branch.pathname for the number of / separators
// TODO(v9): Put the implementation of `getNumberOfUrlSegments` in this file
// eslint-disable-next-line deprecation/deprecation
getNumberOfUrlSegments(pathBuilder) !== getNumberOfUrlSegments(branch.pathname) &&
// We should not count wildcard operators in the url segments calculation
pathBuilder.slice(-2) !== '/*'
) {
return [(_stripBasename ? '' : basename) + newPath, 'route'];
}
// if the last character of the pathbuilder is a wildcard and there are children, remove the wildcard
if (pathEndsWithWildcard(pathBuilder, branch)) {
pathBuilder = pathBuilder.slice(0, -1);
}
return [(_stripBasename ? '' : basename) + pathBuilder, 'route'];
}
}
}
}
}
return [_stripBasename ? stripBasenameFromPathname(location.pathname, basename) : location.pathname, 'url'];
}
function updatePageloadTransaction(
activeRootSpan,
location,
routes,
matches,
basename,
) {
const branches = Array.isArray(matches)
? matches
: (_matchRoutes(routes, location, basename) );
if (branches) {
const [name, source] = getNormalizedName(routes, location, branches, basename);
getCurrentScope().setTransactionName(name);
if (activeRootSpan) {
activeRootSpan.updateName(name);
activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, source);
}
}
}
function handleNavigation(
location,
routes,
navigationType,
matches,
basename,
) {
const branches = Array.isArray(matches) ? matches : _matchRoutes(routes, location, basename);
const client = getClient();
if (!client || !CLIENTS_WITH_INSTRUMENT_NAVIGATION.has(client)) {
return;
}
if ((navigationType === 'PUSH' || navigationType === 'POP') && branches) {
const [name, source] = getNormalizedName(routes, location, branches, basename);
startBrowserTracingNavigationSpan(client, {
name,
attributes: {
[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
[SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v6',
},
});
}
}
/**
* A higher-order component that adds Sentry routing instrumentation to a React Router v6 Route component.
* This is used to automatically capture route changes as transactions.
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function withSentryReactRouterV6Routing(Routes) {
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}.`);
return Routes;
}
let isMountRenderPass = true;
const SentryRoutes = (props) => {
const location = _useLocation();
const navigationType = _useNavigationType();
_useEffect(
() => {
const routes = _createRoutesFromChildren(props.children) ;
if (isMountRenderPass) {
updatePageloadTransaction(getActiveRootSpan(), location, routes);
isMountRenderPass = false;
} else {
handleNavigation(location, routes, navigationType);
}
},
// `props.children` is purposely not included in the dependency array, because we do not want to re-run this effect
// when the children change. We only want to start transactions when the location or navigation type change.
[location, navigationType],
);
// @ts-expect-error Setting more specific React Component typing for `R` generic above
// will break advanced type inference done by react router params
return React.createElement(Routes, { ...props,} );
};
hoistNonReactStatics(SentryRoutes, Routes);
// @ts-expect-error Setting more specific React Component typing for `R` generic above
// will break advanced type inference done by react router params
return SentryRoutes;
function withSentryReactRouterV6Routing(routes) {
return createV6CompatibleWithSentryReactRouterRouting(routes, '6');
}
function wrapUseRoutes(origUseRoutes) {
if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes) {
DEBUG_BUILD &&
logger.warn(
'reactRouterV6Instrumentation was unable to wrap `useRoutes` because of one or more missing parameters.',
);
return origUseRoutes;
}
let isMountRenderPass = true;
const SentryRoutes
= (props) => {
const { routes, locationArg } = props;
const Routes = origUseRoutes(routes, locationArg);
const location = _useLocation();
const navigationType = _useNavigationType();
// A value with stable identity to either pick `locationArg` if available or `location` if not
const stableLocationParam =
typeof locationArg === 'string' || (locationArg && locationArg.pathname)
? (locationArg )
: location;
_useEffect(() => {
const normalizedLocation =
typeof stableLocationParam === 'string' ? { pathname: stableLocationParam } : stableLocationParam;
if (isMountRenderPass) {
updatePageloadTransaction(getActiveRootSpan(), normalizedLocation, routes);
isMountRenderPass = false;
} else {
handleNavigation(normalizedLocation, routes, navigationType);
}
}, [navigationType, stableLocationParam]);
return Routes;
};
// eslint-disable-next-line react/display-name
return (routes, locationArg) => {
return React.createElement(SentryRoutes, { routes: routes, locationArg: locationArg,} );
};
}
function wrapCreateBrowserRouter
(createRouterFunction) {
if (!_useEffect || !_useLocation || !_useNavigationType || !_matchRoutes) {
DEBUG_BUILD &&
logger.warn(
'reactRouterV6Instrumentation was unable to wrap the `createRouter` function because of one or more missing parameters.',
);
return createRouterFunction;
}
// `opts` for createBrowserHistory and createMemoryHistory are different, but also not relevant for us at the moment.
// `basename` is the only option that is relevant for us, and it is the same for all.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
return function (routes, opts) {
const router = createRouterFunction(routes, opts);
const basename = opts && opts.basename;
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' && activeRootSpan) {
updatePageloadTransaction(activeRootSpan, router.state.location, routes, undefined, basename);
}
router.subscribe((state) => {
const location = state.location;
if (state.historyAction === 'PUSH' || state.historyAction === 'POP') {
handleNavigation(location, routes, state.historyAction, undefined, basename);
}
});
return router;
};
}
function getActiveRootSpan() {
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, withSentryReactRouterV6Routing, wrapCreateBrowserRouter, wrapUseRoutes };
export { reactRouterV6BrowserTracingIntegration, withSentryReactRouterV6Routing, wrapCreateBrowserRouter, wrapCreateBrowserRouterV6, wrapUseRoutes, wrapUseRoutesV6 };
//# sourceMappingURL=reactrouterv6.js.map

2

build/esm/redux.js
import { getGlobalScope, getCurrentScope, addBreadcrumb, getClient, addNonEnumerableProperty } from '@sentry/core';
/* eslint-disable @typescript-eslint/no-explicit-any */
const ACTION_BREADCRUMB_CATEGORY = 'redux.action';

@@ -6,0 +4,0 @@ const ACTION_BREADCRUMB_TYPE = 'info';

2

build/types-ts3.8/error.d.ts

@@ -1,2 +0,2 @@

import { EventHint } from '@sentry/types';
import { EventHint } from '@sentry/core';
import { ErrorInfo } from 'react';

@@ -3,0 +3,0 @@ /**

2

build/types-ts3.8/errorboundary.d.ts
import { ReportDialogOptions } from '@sentry/browser';
import { Scope } from '@sentry/types';
import { Scope } from '@sentry/core';
import * as React from 'react';

@@ -4,0 +4,0 @@ export declare const UNKNOWN_COMPONENT = "unknown";

3

build/types-ts3.8/index.d.ts

@@ -11,3 +11,4 @@ export * from '@sentry/browser';

export { withSentryRouting, reactRouterV4BrowserTracingIntegration, reactRouterV5BrowserTracingIntegration, } from './reactrouter';
export { reactRouterV6BrowserTracingIntegration, withSentryReactRouterV6Routing, wrapUseRoutes, wrapCreateBrowserRouter, } from './reactrouterv6';
export { reactRouterV6BrowserTracingIntegration, withSentryReactRouterV6Routing, wrapUseRoutes, wrapUseRoutesV6, wrapCreateBrowserRouter, wrapCreateBrowserRouterV6, } from './reactrouterv6';
export { reactRouterV7BrowserTracingIntegration, withSentryReactRouterV7Routing, wrapCreateBrowserRouterV7, wrapUseRoutesV7, } from './reactrouterv7';
//# sourceMappingURL=index.d.ts.map

2

build/types-ts3.8/profiler.d.ts

@@ -1,2 +0,2 @@

import { Span } from '@sentry/types';
import { Span } from '@sentry/core';
import * as React from 'react';

@@ -3,0 +3,0 @@ export declare const UNKNOWN_COMPONENT = "unknown";

2

build/types-ts3.8/reactrouter.d.ts
import { browserTracingIntegration } from '@sentry/browser';
import { Integration } from '@sentry/types';
import { Integration } from '@sentry/core';
import * as React from 'react';

@@ -4,0 +4,0 @@ import { ReactElement } from 'react';

2

build/types-ts3.8/reactrouterv3.d.ts
import { browserTracingIntegration } from '@sentry/browser';
import { Integration } from '@sentry/types';
import { Integration } from '@sentry/core';
import { Location } from './types';

@@ -4,0 +4,0 @@ type HistoryV3 = {

44

build/types-ts3.8/reactrouterv6.d.ts

@@ -0,13 +1,6 @@

/// <reference types="react" />
import { browserTracingIntegration } from '@sentry/browser';
import { Integration } 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;
}
import { Integration } from '@sentry/core';
import { ReactRouterOptions } from './reactrouterv6-compat-utils';
import { CreateRouterFunction, Router, RouterState, UseRoutes } from './types';
/**

@@ -18,6 +11,27 @@ * A browser tracing integration that uses React Router v6 to instrument navigations.

export declare function reactRouterV6BrowserTracingIntegration(options: Parameters<typeof browserTracingIntegration>[0] & ReactRouterOptions): Integration;
export declare function withSentryReactRouterV6Routing<P extends Record<string, any>, R extends React.FC<P>>(Routes: R): R;
export declare function wrapUseRoutes(origUseRoutes: UseRoutes): UseRoutes;
export declare function wrapCreateBrowserRouter<TState extends RouterState = RouterState, TRouter extends Router<TState> = Router<TState>>(createRouterFunction: CreateRouterFunction<TState, TRouter>): CreateRouterFunction<TState, TRouter>;
export {};
/**
* A wrapper function that adds Sentry routing instrumentation to a React Router v6 useRoutes hook.
* This is used to automatically capture route changes as transactions when using the useRoutes hook.
*/
export declare function wrapUseRoutesV6(origUseRoutes: UseRoutes): UseRoutes;
/**
* Alias for backwards compatibility
* @deprecated Use `wrapUseRoutesV6` or `wrapUseRoutesV7` instead.
*/
export declare const wrapUseRoutes: typeof wrapUseRoutesV6;
/**
* A wrapper function that adds Sentry routing instrumentation to a React Router v6 createBrowserRouter function.
* This is used to automatically capture route changes as transactions when using the createBrowserRouter API.
*/
export declare function wrapCreateBrowserRouterV6<TState extends RouterState = RouterState, TRouter extends Router<TState> = Router<TState>>(createRouterFunction: CreateRouterFunction<TState, TRouter>): CreateRouterFunction<TState, TRouter>;
/**
* Alias for backwards compatibility
* @deprecated Use `wrapCreateBrowserRouterV6` or `wrapCreateBrowserRouterV7` instead.
*/
export declare const wrapCreateBrowserRouter: typeof wrapCreateBrowserRouterV6;
/**
* A higher-order component that adds Sentry routing instrumentation to a React Router v6 Route component.
* This is used to automatically capture route changes as transactions.
*/
export declare function withSentryReactRouterV6Routing<P extends Record<string, any>, R extends React.FC<P>>(routes: R): R;
//# sourceMappingURL=reactrouterv6.d.ts.map

2

build/types-ts3.8/redux.d.ts

@@ -1,2 +0,2 @@

import { Scope } from '@sentry/types';
import { Scope } from '@sentry/core';
interface Action<T = any> {

@@ -3,0 +3,0 @@ type: T;

2

build/types-ts3.8/sdk.d.ts
import { BrowserOptions } from '@sentry/browser';
import { Client } from '@sentry/types';
import { Client } from '@sentry/core';
/**

@@ -4,0 +4,0 @@ * Inits the React SDK

2

build/types-ts3.8/tanstackrouter.d.ts
import { browserTracingIntegration as originalBrowserTracingIntegration } from '@sentry/browser';
import { Integration } from '@sentry/types';
import { Integration } from '@sentry/core';
/**

@@ -4,0 +4,0 @@ * A custom browser tracing integration for TanStack Router.

2

build/types/error.d.ts

@@ -1,2 +0,2 @@

import type { EventHint } from '@sentry/types';
import type { EventHint } from '@sentry/core';
import type { ErrorInfo } from 'react';

@@ -3,0 +3,0 @@ /**

2

build/types/errorboundary.d.ts
import type { ReportDialogOptions } from '@sentry/browser';
import type { Scope } from '@sentry/types';
import type { Scope } from '@sentry/core';
import * as React from 'react';

@@ -4,0 +4,0 @@ export declare const UNKNOWN_COMPONENT = "unknown";

3

build/types/index.d.ts

@@ -11,3 +11,4 @@ export * from '@sentry/browser';

export { withSentryRouting, reactRouterV4BrowserTracingIntegration, reactRouterV5BrowserTracingIntegration, } from './reactrouter';
export { reactRouterV6BrowserTracingIntegration, withSentryReactRouterV6Routing, wrapUseRoutes, wrapCreateBrowserRouter, } from './reactrouterv6';
export { reactRouterV6BrowserTracingIntegration, withSentryReactRouterV6Routing, wrapUseRoutes, wrapUseRoutesV6, wrapCreateBrowserRouter, wrapCreateBrowserRouterV6, } from './reactrouterv6';
export { reactRouterV7BrowserTracingIntegration, withSentryReactRouterV7Routing, wrapCreateBrowserRouterV7, wrapUseRoutesV7, } from './reactrouterv7';
//# sourceMappingURL=index.d.ts.map

2

build/types/profiler.d.ts

@@ -1,2 +0,2 @@

import type { Span } from '@sentry/types';
import type { Span } from '@sentry/core';
import * as React from 'react';

@@ -3,0 +3,0 @@ export declare const UNKNOWN_COMPONENT = "unknown";

2

build/types/reactrouter.d.ts
import { browserTracingIntegration } from '@sentry/browser';
import type { Integration } from '@sentry/types';
import type { Integration } from '@sentry/core';
import * as React from 'react';

@@ -4,0 +4,0 @@ import type { ReactElement } from 'react';

2

build/types/reactrouterv3.d.ts
import { browserTracingIntegration } from '@sentry/browser';
import type { Integration } from '@sentry/types';
import type { Integration } from '@sentry/core';
import type { Location } from './types';

@@ -4,0 +4,0 @@ type HistoryV3 = {

46

build/types/reactrouterv6.d.ts

@@ -1,13 +0,6 @@

import { browserTracingIntegration } from '@sentry/browser';
import type { Integration } 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;
}
/// <reference types="react" />
import type { browserTracingIntegration } from '@sentry/browser';
import type { Integration } from '@sentry/core';
import type { ReactRouterOptions } from './reactrouterv6-compat-utils';
import type { CreateRouterFunction, Router, RouterState, UseRoutes } from './types';
/**

@@ -18,6 +11,27 @@ * A browser tracing integration that uses React Router v6 to instrument navigations.

export declare function reactRouterV6BrowserTracingIntegration(options: Parameters<typeof browserTracingIntegration>[0] & ReactRouterOptions): Integration;
export declare function withSentryReactRouterV6Routing<P extends Record<string, any>, R extends React.FC<P>>(Routes: R): R;
export declare function wrapUseRoutes(origUseRoutes: UseRoutes): UseRoutes;
export declare function wrapCreateBrowserRouter<TState extends RouterState = RouterState, TRouter extends Router<TState> = Router<TState>>(createRouterFunction: CreateRouterFunction<TState, TRouter>): CreateRouterFunction<TState, TRouter>;
export {};
/**
* A wrapper function that adds Sentry routing instrumentation to a React Router v6 useRoutes hook.
* This is used to automatically capture route changes as transactions when using the useRoutes hook.
*/
export declare function wrapUseRoutesV6(origUseRoutes: UseRoutes): UseRoutes;
/**
* Alias for backwards compatibility
* @deprecated Use `wrapUseRoutesV6` or `wrapUseRoutesV7` instead.
*/
export declare const wrapUseRoutes: typeof wrapUseRoutesV6;
/**
* A wrapper function that adds Sentry routing instrumentation to a React Router v6 createBrowserRouter function.
* This is used to automatically capture route changes as transactions when using the createBrowserRouter API.
*/
export declare function wrapCreateBrowserRouterV6<TState extends RouterState = RouterState, TRouter extends Router<TState> = Router<TState>>(createRouterFunction: CreateRouterFunction<TState, TRouter>): CreateRouterFunction<TState, TRouter>;
/**
* Alias for backwards compatibility
* @deprecated Use `wrapCreateBrowserRouterV6` or `wrapCreateBrowserRouterV7` instead.
*/
export declare const wrapCreateBrowserRouter: typeof wrapCreateBrowserRouterV6;
/**
* A higher-order component that adds Sentry routing instrumentation to a React Router v6 Route component.
* This is used to automatically capture route changes as transactions.
*/
export declare function withSentryReactRouterV6Routing<P extends Record<string, any>, R extends React.FC<P>>(routes: R): R;
//# sourceMappingURL=reactrouterv6.d.ts.map

2

build/types/redux.d.ts

@@ -1,2 +0,2 @@

import type { Scope } from '@sentry/types';
import type { Scope } from '@sentry/core';
interface Action<T = any> {

@@ -3,0 +3,0 @@ type: T;

2

build/types/sdk.d.ts
import type { BrowserOptions } from '@sentry/browser';
import type { Client } from '@sentry/types';
import type { Client } from '@sentry/core';
/**

@@ -4,0 +4,0 @@ * Inits the React SDK

2

build/types/tanstackrouter.d.ts
import { browserTracingIntegration as originalBrowserTracingIntegration } from '@sentry/browser';
import type { Integration } from '@sentry/types';
import type { Integration } from '@sentry/core';
/**

@@ -4,0 +4,0 @@ * A custom browser tracing integration for TanStack Router.

7

package.json
{
"name": "@sentry/react",
"version": "8.41.0",
"version": "8.42.0",
"description": "Official Sentry SDK for React.js",

@@ -42,5 +42,4 @@ "repository": "git://github.com/getsentry/sentry-javascript.git",

"dependencies": {
"@sentry/browser": "8.41.0",
"@sentry/core": "8.41.0",
"@sentry/types": "8.41.0",
"@sentry/browser": "8.42.0",
"@sentry/core": "8.42.0",
"hoist-non-react-statics": "^3.3.2"

@@ -47,0 +46,0 @@ },

build/cjs/error.js.map

Sorry, the diff of this file is not supported yet

build/cjs/errorboundary.js.map

Sorry, the diff of this file is not supported yet

build/cjs/index.js.map

Sorry, the diff of this file is not supported yet

build/cjs/profiler.js.map

Sorry, the diff of this file is not supported yet

build/cjs/reactrouter.js.map

Sorry, the diff of this file is not supported yet

build/cjs/reactrouterv3.js.map

Sorry, the diff of this file is not supported yet

build/cjs/reactrouterv6.js.map

Sorry, the diff of this file is not supported yet

build/cjs/redux.js.map

Sorry, the diff of this file is not supported yet

build/cjs/sdk.js.map

Sorry, the diff of this file is not supported yet

build/cjs/tanstackrouter.js.map

Sorry, the diff of this file is not supported yet

build/esm/error.js.map

Sorry, the diff of this file is not supported yet

build/esm/errorboundary.js.map

Sorry, the diff of this file is not supported yet

build/esm/index.js.map

Sorry, the diff of this file is not supported yet

build/esm/profiler.js.map

Sorry, the diff of this file is not supported yet

build/esm/reactrouter.js.map

Sorry, the diff of this file is not supported yet

build/esm/reactrouterv3.js.map

Sorry, the diff of this file is not supported yet

build/esm/reactrouterv6.js.map

Sorry, the diff of this file is not supported yet

build/esm/redux.js.map

Sorry, the diff of this file is not supported yet

build/esm/sdk.js.map

Sorry, the diff of this file is not supported yet

build/esm/tanstackrouter.js.map

Sorry, the diff of this file is not supported yet

build/types/error.d.ts.map

Sorry, the diff of this file is not supported yet

build/types/errorboundary.d.ts.map

Sorry, the diff of this file is not supported yet

build/types/index.d.ts.map

Sorry, the diff of this file is not supported yet

build/types/profiler.d.ts.map

Sorry, the diff of this file is not supported yet

build/types/reactrouter.d.ts.map

Sorry, the diff of this file is not supported yet

build/types/reactrouterv3.d.ts.map

Sorry, the diff of this file is not supported yet

build/types/reactrouterv6.d.ts.map

Sorry, the diff of this file is not supported yet

build/types/redux.d.ts.map

Sorry, the diff of this file is not supported yet

build/types/sdk.d.ts.map

Sorry, the diff of this file is not supported yet

build/types/tanstackrouter.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc