feat(react): Add react-router-v6 integration.

[onurtemizkan]

Tracing integration for [email protected]

This implementation will provide a HoC that wraps <Routes> which replaced <Switch> from [email protected].

This approach is similar to @wontondon's solution here.

Usage example:

import ReactDOM from "react-dom";
import {
    Routes,
    BrowserRouter,
    useLocation,
    useNavigationType,
    createRoutesFromChildren,
    matchRoutes,
} from "react-router-dom";
import * as Sentry from "@sentry/react";
import "@sentry/tracing";

Sentry.init({
    dsn: "DSN",
    integrations: [
        new BrowserTracing({
            routingInstrumentation: Sentry.reactRouterV6Instrumentation(
                React.useEffect,
                useLocation,
                useNavigationType,
                createRoutesFromChildren,
                matchRoutes,
            ),
        }),
    ],
    tracesSampleRate: 1.0,
});

const SentryRoutes = Sentry.withSentryV6(Routes)

ReactDOM.render(
    <BrowserRouter>
        <SentryRoutes>
            <Route path="/" element={<div>Home</div>} />
        </SentryRoutes>
    </BrowserRouter>,
);

Resolves: #4118

[github-actions]

size-limit report 📦

Path	Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified)	18.78 KB (-6.77% 🔽)
@sentry/browser - ES5 CDN Bundle (minified)	58.38 KB (-9.65% 🔽)
@sentry/browser - ES6 CDN Bundle (gzipped + minified)	17.54 KB (-6.98% 🔽)
@sentry/browser - ES6 CDN Bundle (minified)	52.61 KB (-9.26% 🔽)
@sentry/browser - Webpack (gzipped + minified)	19.33 KB (-16.83% 🔽)
@sentry/browser - Webpack (minified)	61.47 KB (-24.77% 🔽)
@sentry/react - Webpack (gzipped + minified)	19.35 KB (-16.87% 🔽)
@sentry/nextjs Client - Webpack (gzipped + minified)	42.81 KB (-10.91% 🔽)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified)	24.43 KB (-6.3% 🔽)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified)	23 KB (-6.04% 🔽)

[AbhiPrasad]

Let's lift these up into individual variables instead of being under the instrumentationOptions object. This way we save on bundle size because otherwise object keys like customStartTransaction or startTransactionOnLocationChange cannot be minified.

Suggested change

	instrumentationOptions.useLocation = useLocation;
	instrumentationOptions.useNavigationType = useNavigationType;
	instrumentationOptions.matchRoutes = matchRoutes;
	instrumentationOptions.createRoutesFromChildren = createRoutesFromChildren;
	instrumentationOptions.customStartTransaction = customStartTransaction;
	instrumentationOptions.startTransactionOnLocationChange = startTransactionOnLocationChange;
	instrumentationOptions.startTransactionOnPageLoad = startTransactionOnPageLoad;
	useLocation = useLocation;
	useNavigationType = useNavigationType;
	matchRoutes = matchRoutes;
	createRoutesFromChildren = createRoutesFromChildren;
	customStartTransaction = customStartTransaction;
	startTransactionOnLocationChange = startTransactionOnLocationChange;
	startTransactionOnPageLoad = startTransactionOnPageLoad;

[AbhiPrasad]

Looks good!

Can we add another test case around parameterized paths? Specifically with multi-parameter paths like orgs/:orgid/teams/:teamid

[AbhiPrasad]

Let's call this withSentryReactRouterV6Routing. It's way longer, but it makes it very clear what is happening to users (+ will all get minified in the end anyway).

[AbhiPrasad]

Can we start the transaction here and just update the transaction name in the useeffect call?

Also, is there a way we can listen directly onto history instead of using useEffect?

[onurtemizkan]

Updated to start pageload transaction on init 👍

Tried to find a simple solution to access history but it doesn't look possible without risking reliability (as they're encouraging to use useNavigate and useLocation hooks in v6, so even if we try to use global history, they may conflict?). Combining them with useEffect seems to be the most reliable, but can dig deeper if you like.

[AbhiPrasad]

Ok - no worries, let's keep using the hooks then!

[AbhiPrasad]

Suggested change

	const transactionName = getTransactionName(routes, location, _matchRoutes);
	activeTransaction = _customStartTransaction({
	name: transactionName,
	activeTransaction = _customStartTransaction({
	name: getTransactionName(routes, location, _matchRoutes),

[AbhiPrasad]

yeah we should log something here

[AbhiPrasad]

Can we make sure we attribute to whom this implementation was inspired/based on?

[AbhiPrasad]

We will also need a docs PR for this!

[FilipaBarroso]

Is there a way to use this integration with useRoutes, or any plans to support it in the future?