feat: Add routing instrumentation for react router v4/v5

[AbhiPrasad]

So in React Router v4 and v5, there is no longer a static set of routes we can depend upon to change transaction name.

Take a look at their philosophy for more: https://reactrouter.com/core/guides/philosophy

This means it is hard for us to get all the transaction names without additional user configuration. I have set this up in two ways.

a) They can use a custom Route component to achieve this functionality. This is as every time a Route renders, we get access to the match params (what path they matched with). We can then grab update the name there.

Usage:

import {Route, Router, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history'; 
import { reactRouterV4Instrumentation, withSentryRouting } from '../src';

const SentryRoute = withSentryRouting(Route);
const history = createBrowserHistory();

Sentry.init({
  tracesSampleRate: 1,
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: reactRouterV4Instrumentation(history),
    });
  ]
});

render() {
  return (
    <Router history={history}>
      <Switch>
         <SentryRoute path="/users/:userid" component={() => <div>UserId</div>} />
         <SentryRoute path="/users" component={() => <div>Users</div>} />
         <SentryRoute path="/" component={() => <div>Home</div>} />
      </Switch>
    </Router>
  );
}

b) They can pass us a route config. We accept a config object that is supported by https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config, so something that looks like:

const routes = [
  {
    component: Root,
    routes: [
      {
        path: "/",
        exact: true,
        component: Home
      },
      {
        path: "/child/:id",
        component: Child,
        routes: [
          {
            path: "/child/:id/grand-child",
            component: GrandChild
          }
        ]
      }
    ]
  }
];

Then usage:

import {Route, Router, Switch, matchPath } from 'react-router-dom';
import { createBrowserHistory } from 'history'; 
import { reactRouterV4Instrumentation, withSentryRouting } from '../src';

const history = createBrowserHistory();
const routes = [{ path: '/users/:userid' }, { path: '/users' }, { path: '/' }];

Sentry.init({
  tracesSampleRate: 1,
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: reactRouterV4Instrumentation(history, routes, matchPath),
    });
  ]
});

render() {
  return (
    <Router history={history}>
      <Switch>
         <SentryRoute path="/users/:userid" component={() => <div>UserId</div>} />
         <SentryRoute path="/users" component={() => <div>Users</div>} />
         <SentryRoute path="/" component={() => <div>Home</div>} />
      </Switch>
    </Router>
  );
}

The Route Component matching trumps the config.

[github-actions]

size-limit report

Path	Size
@sentry/browser - CDN Bundle (gzipped)	17.66 KB (+0.03% 🔺)
@sentry/browser - Webpack	18.42 KB (+0.06% 🔺)
@sentry/react - Webpack	18.42 KB (+0.06% 🔺)
@sentry/browser + @sentry/tracing - CDN Bundle (gzipped)	22.64 KB (+0.02% 🔺)

[getsentry-bot]

	Warnings
⚠️	Please add a changelog entry for your changes.

	Messages
📖	@sentry/browser bundle gzip'ed minified size: (ES5: 17.251 kB) (ES6: 16.3525 kB)
📖	✅ TSLint passed

Generated by 🚫 dangerJS against 9887f01

[HazAT]

So many tests ❤️