Support React Router v6

[quisido]

The reactRouterV#Instrumentation is no longer supported in React Router v6. Unlike previous versions of React Router, v6 does not expose the history object.

I've attempted to solve this personally, so as to unblock myself in my projects: react-router-v6-instrumentation on NPM.

Example usage:

import { init } from '@sentry/react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import useBrowserTracing from 'react-router-v6-instrumentation';

function App() {
  const browserTracing = useBrowserTracing();

  // Initialize Sentry with the browser tracing integration.
  useEffect(() => {
    init({
      integrations: [browserTracing],
    });
  }, [browserTracing]);

  return <>Hello world!</>;
}

render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);

Source code on GitHub

I hope this ticket inspires the maintainers to implement (credit? 😆) or unblocks others who are searching for solutions to this issue.

[AbhiPrasad]

Awesome work man, the approach looks good from an initial glance.

If you want to, feel free to throw up a PR to add this our @sentry/react package, we can help with writing tests and adding documentation. Otherwise, we can also look at porting this over (giving full credit to you of course), but that might take a bit.

[amccloud]

@CharlesStover anyway to use the integration when calling Sentry.init before render?

[quisido]

@AbhiPrasad just for notes sake, in case y'all tackle this before I do:

• I would replace useBrowserTracing with useRoutingInstrumentation and have the consumer call new BrowserTracing({ routingInstrumentation }) themselves.
• The pathname mutable object reference exists solely so that location does not have to be passed to the memoized BrowserTracing object (or routingInstrumentation function). I didn't check if location is a constant reference even when pathname, hash, and search change. If location is constant across route changes, then you can remove the entire location reference and effect hook that update it; instead, you can just pass location to the dependency array directly and not worry about the memoized value ever changing reference. This is probably a simple test and sorry I didn't do it, but I'd recommend it for an official implementation.

@amccloud Unfortunately, as far as I'm aware, you cannot integrate with React Router v6 before render. Since React Router v6 does not let you pass the history object on mount (before: <Router history={...}>; after: <Router>), there is no way to attach event listeners before React Router mounts. 🤷 It's honestly probably for the best for React Router to keep history abstracted away, despite it making integration more difficult. If calling init on render is annoying to maintain, you can use the sentry-react package which does just that: pass the init parameters as props, and it will call init on mount for you.

[quisido]

As a further progress report, I have:

1. Released a 2.0.0 version of the package that replaces useBrowserTracing with useRoutingInstrumentation, aligning it closer to the original reactRouterV#Instrumentation implementations and allowing consumers to configuring their BrowserTracing instance.
2. Confirmed that location does change reference, therefore the use of a MutableObjectRef for the location pathname is necessary.

The code base should therefore hypothetically be ready to merge into @sentry/react and accessible to all consumers. I may still PR this depending on time constraints, but you also still welcome to pursue it. 🙂

EDIT: What does "credit" look like for a contribution like this? Is there concern with simply using export { default as useReactRouterV6Instrumentation } from 'react-router-v6-instrumentation'; as a dependency? That would be gratifying for my download/usage tracker. 😅 Otherwise, I assume credit looks like a source code comment with a link to the original repository?

[AbhiPrasad]

I’m planning to take a look at adding this next week, but feel free to jump on it!

As per https://develop.sentry.dev/sdk/philosophy/#dependencies-cost, we shy away from external deps as much as possible. This is also useful from a compliance and security perspective for our bigger users. This means we probably will port over the instrumentation you built (and adjust it for the sdk constraints + add tests).

Credit here means we will leave a code comment to your GH repo + your name. We did something similar with Python and ASGI: https://github.com/getsentry/sentry-python/blob/master/sentry_sdk/integrations/asgi.py#L4

[quisido]

Awesome and makes sense. It's already 100% tested. With that example for Python, I should be able to PR this change, assuming I can integrate with your test runner intuitively.

[AbhiPrasad]

Hey @CharlesStover, how does your hook deal with parameterized URLs? (Like path/to/:id?).

We have to make sure we report the parameterized URLs, not the actual one, so that transactions can be grouped properly.

[quisido]

Thanks for the follow-up.

My hook's implementation is a copy of the reactRouterV#Instrumentation functions vended by Sentry today, when the only parameter is history, i.e. reactRouterV5Instrumentation(history). The behavior that comes with passing RouteConfig[] and MatchPath is not included.

[AbhiPrasad]

Yeah I wonder if there’s an easy way for us to just get the paramterized URL without recomputing the match or requiring excess things in user config.

I’m going to try something out based on your hook, but if not will also try opening an issue with the react router folks to see if they have any ideas.

Appreciate your help with this @CharlesStover!