feat(react): Add react-router-v6 integration. by onurtemizkan · Pull Request #5042 · getsentry/sentry-javascript

onurtemizkan · 2022-05-05T12:32:53Z

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 · 2022-05-05T12:51:55Z

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 · 2022-05-05T14:08:31Z

packages/react/src/reactrouterv6.tsx

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


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 · 2022-05-06T18:34:53Z

packages/react/src/reactrouterv6.tsx

+  'routing.instrumentation': 'react-router-v6',
+};
+
+export function withSentryV6<P extends Record<string, any>, R extends React.FC<P>>(Routes: R): R {


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 · 2022-05-06T18:38:46Z

packages/react/src/reactrouterv6.tsx

+    startTransactionOnPageLoad = true,
+    startTransactionOnLocationChange = true,
+  ): void => {
+    _useEffect = useEffect;


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?

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.

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

AbhiPrasad · 2022-05-06T18:39:10Z

packages/react/src/reactrouterv6.tsx

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


Suggested change

const transactionName = getTransactionName(routes, location, _matchRoutes);

activeTransaction = _customStartTransaction({

name: transactionName,

activeTransaction = _customStartTransaction({

name: getTransactionName(routes, location, _matchRoutes),

AbhiPrasad · 2022-05-06T18:39:45Z

packages/react/src/reactrouterv6.tsx

+    !_matchRoutes ||
+    !_customStartTransaction
+  ) {
+    // Log warning?


yeah we should log something here

packages/react/test/reactrouterv6.test.tsx

Co-authored-by: Abhijeet Prasad <[email protected]>

AbhiPrasad · 2022-05-11T14:31:05Z

packages/react/src/reactrouterv6.tsx

@@ -0,0 +1,177 @@
+import { Transaction, TransactionContext } from '@sentry/types';


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

AbhiPrasad · 2022-05-11T15:32:48Z

We will also need a docs PR for this!

Tracing integration for [`[email protected]`](https://reactrouter.com/docs/en/v6) This implementation will provide a HoC that wraps [`<Routes>`](https://reactrouter.com/docs/en/v6/api#routes-and-route) which replaced `<Switch>` from `[email protected]`.

FilipaBarroso · 2022-06-20T16:24:31Z

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

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

ee90696

AbhiPrasad reviewed May 5, 2022

View reviewed changes

onurtemizkan added 4 commits May 6, 2022 09:07

Refactor globals.

921ea55

Support nested routes.

b14fbce

Add tests.

cdc0951

Fix linter.

5eb5cb7

onurtemizkan marked this pull request as ready for review May 6, 2022 13:15

Refactor to avoid mismatched React versions, add useEffect to params.

1da5a7f

AbhiPrasad reviewed May 6, 2022

View reviewed changes

onurtemizkan and others added 6 commits May 11, 2022 10:43

Rename wrapper as withSentryReactRouterV6Routing.

e5da798

Remove unnecessary variables.

f0bf98b

Update packages/react/test/reactrouterv6.test.tsx

7afd961

Co-authored-by: Abhijeet Prasad <[email protected]>

Add multiple params test case.

dee1952

Start pageload transaction on sentry initialization.

75d9fe4

Log warning in case of missing parameters on init.

8fb7471

AbhiPrasad reviewed May 11, 2022

View reviewed changes

Give attribution to @wontondon.

48e2c95

AbhiPrasad approved these changes May 11, 2022

View reviewed changes

AbhiPrasad changed the title ~~feat(tracing): Add react-router-v6 integration.~~ feat(react): Add react-router-v6 integration. May 11, 2022

AbhiPrasad merged commit cd71864 into 7.x May 11, 2022

AbhiPrasad deleted the onur/react-router-v6-integration branch May 11, 2022 15:33

AbhiPrasad added this to the 7.0.0 milestone May 12, 2022

onurtemizkan mentioned this pull request May 13, 2022

Add React Router v6 instrumentation docs. getsentry/sentry-docs#5037

Merged

		@@ -0,0 +1,177 @@
		import { Transaction, TransactionContext } from '@sentry/types';

Uh oh!

Comments

Conversation

onurtemizkan commented May 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented May 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AbhiPrasad left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AbhiPrasad commented May 11, 2022

Uh oh!

FilipaBarroso commented Jun 20, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

onurtemizkan commented May 5, 2022 •

edited

Loading

github-actions bot commented May 5, 2022 •

edited

Loading