feat(rr6): Add shims for React Router 3 → 6

package.json

@@ -125,6 +125,7 @@
     "invariant": "^2.2.4",
     "ios-device-list": "1.1.37",
     "jed": "^1.1.0",
+    "jest-fetch-mock": "^3.0.3",
     "js-beautify": "^1.15.1",
     "js-cookie": "3.0.1",
     "less": "^4.1.3",
@@ -156,6 +157,7 @@
     "react-mentions": "4.4.10",
     "react-popper": "^2.3.0",
     "react-router": "3.2.6",
+    "react-router-dom": "^6.23.0",
     "react-select": "4.3.1",
     "react-sparklines": "1.7.0",
     "react-virtualized": "^9.22.5",

static/app/bootstrap/initializeSdk.tsx

@@ -9,6 +9,13 @@ import type {Config} from 'sentry/types/system';
 import {addExtraMeasurements, addUIElementTag} from 'sentry/utils/performanceForSentry';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import {getErrorDebugIds} from 'sentry/utils/getErrorDebugIds';
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType,
+} from 'react-router-dom';
+import {useEffect} from 'react';
 
 const SPA_MODE_ALLOW_URLS = [
   'localhost',
@@ -49,20 +56,30 @@ const shouldOverrideBrowserProfiling = window?.__initialData?.user?.isSuperuser;
  * (e.g.  `static/views/integrationPipeline`)
  */
 function getSentryIntegrations(routes?: Function) {
+  const reactRouterIntegration = window.__SENTRY_USING_REACT_ROUTER_SIX
+    ? Sentry.reactRouterV6BrowserTracingIntegration({
+        useEffect: useEffect,
+        useLocation: useLocation,
+        useNavigationType: useNavigationType,
+        createRoutesFromChildren: createRoutesFromChildren,
+        matchRoutes: matchRoutes,
+      })
+    : Sentry.reactRouterV3BrowserTracingIntegration({
+        history: browserHistory as any,
+        routes: typeof routes === 'function' ? createRoutes(routes()) : [],
+        match,
+        enableLongAnimationFrame: true,
+        _experiments: {
+          enableInteractions: false,
+        },
+      });
+
   const integrations = [
     Sentry.extraErrorDataIntegration({
       // 6 is arbitrary, seems like a nice number
       depth: 6,
     }),
-    Sentry.reactRouterV3BrowserTracingIntegration({
-      history: browserHistory as any,
-      routes: typeof routes === 'function' ? createRoutes(routes()) : [],
-      match,
-      enableLongAnimationFrame: true,
-      _experiments: {
-        enableInteractions: false,
-      },
-    }),
+    reactRouterIntegration,
     Sentry.browserProfilingIntegration(),
     Sentry.thirdPartyErrorFilterIntegration({
       filterKeys: ['sentry-spa'],

static/app/components/links/link.tsx

@@ -1,8 +1,10 @@
 import {forwardRef} from 'react';
 import {Link as RouterLink} from 'react-router';
+import {Link as Router6Link} from 'react-router-dom';
 import styled from '@emotion/styled';
 import type {LocationDescriptor} from 'history';
 
+import {locationDescriptorToTo} from 'sentry/utils/reactRouter6Compat/location';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import {useLocation} from 'sentry/utils/useLocation';
 
@@ -46,6 +48,16 @@ function BaseLink({disabled, to, forwardedRef, ...props}: LinkProps): React.Reac
   to = normalizeUrl(to, location);
 
   if (!disabled && location) {
+    if (window.__SENTRY_USING_REACT_ROUTER_SIX) {
+      return (
+        <Router6Link
+          to={locationDescriptorToTo(to)}
+          ref={forwardedRef as any}
+          {...props}
+        />
+      );
+    }
+
     return <RouterLink to={to} ref={forwardedRef as any} {...props} />;
   }
 

static/app/components/links/listLink.tsx

@@ -1,14 +1,19 @@
 import {Link as RouterLink} from 'react-router';
+import {NavLink} from 'react-router-dom';
 import styled from '@emotion/styled';
 import classNames from 'classnames';
 import type {LocationDescriptor} from 'history';
 
+import {locationDescriptorToTo} from 'sentry/utils/reactRouter6Compat/location';
 import normalizeUrl from 'sentry/utils/url/normalizeUrl';
+import {useLocation} from 'sentry/utils/useLocation';
 import useRouter from 'sentry/utils/useRouter';
 
-type LinkProps = Omit<React.ComponentProps<typeof RouterLink>, 'to'>;
-
-type Props = LinkProps & {
+interface ListLinkProps
+  extends Omit<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>,
+    'href' | 'target' | 'as' | 'css' | 'ref'
+  > {
   /**
    * Link target. We don't want to expose the ToLocationFunction on this component.
    */
@@ -19,7 +24,7 @@ type Props = LinkProps & {
    * Should be should be supplied by the parent component
    */
   isActive?: (location: LocationDescriptor, indexOnly?: boolean) => boolean;
-};
+}
 
 function ListLink({
   children,
@@ -29,18 +34,33 @@ function ListLink({
   index = false,
   disabled = false,
   ...props
-}: Props) {
+}: ListLinkProps) {
   const router = useRouter();
+  const location = useLocation();
   const targetLocation = typeof to === 'string' ? {pathname: to} : to;
   const target = normalizeUrl(targetLocation);
 
-  const active = isActive?.(target, index) ?? router.isActive(target, index);
+  const active =
+    isActive?.(target, index) ??
+    // XXX(epurkhiser): our shim for router.isActive will throw an error in
+    // react-router 6. Fallback to manually checking if the path is active
+    (window.__SENTRY_USING_REACT_ROUTER_SIX
+      ? location.pathname === (typeof target === 'string' ? target : target.pathname)
+      : router.isActive(target, index));
+
+  const link = window.__SENTRY_USING_REACT_ROUTER_SIX ? (
+    <NavLink {...props} to={disabled ? '' : locationDescriptorToTo(target)}>
+      {children}
+    </NavLink>
+  ) : (
+    <RouterLink {...props} onlyActiveOnIndex={index} to={disabled ? '' : target}>
+      {children}
+    </RouterLink>
+  );
 
   return (
     <StyledLi className={classNames({active}, className)} disabled={disabled}>
-      <RouterLink {...props} onlyActiveOnIndex={index} to={disabled ? '' : target}>
-        {children}
-      </RouterLink>
+      {link}
     </StyledLi>
   );
 }

static/app/main.tsx

@@ -1,13 +1,18 @@
 import {Router, RouterContext} from 'react-router';
+import {createBrowserRouter, RouterProvider} from 'react-router-dom';
+import {wrapCreateBrowserRouter} from '@sentry/react';
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
 
 import DemoHeader from 'sentry/components/demo/demoHeader';
 import {OnboardingContextProvider} from 'sentry/components/onboarding/onboardingContext';
 import {ThemeAndStyleProvider} from 'sentry/components/themeAndStyleProvider';
 import {USE_REACT_QUERY_DEVTOOL} from 'sentry/constants';
-import {routes} from 'sentry/routes';
+import {routes, routes6} from 'sentry/routes';
 import ConfigStore from 'sentry/stores/configStore';
-import {browserHistory} from 'sentry/utils/browserHistory';
+import {
+  browserHistory,
+  DANGEROUS_SET_REACT_ROUTER_6_HISTORY,
+} from 'sentry/utils/browserHistory';
 import {
   DEFAULT_QUERY_CLIENT_CONFIG,
   QueryClient,
@@ -29,15 +34,26 @@ function renderRouter(props: any) {
 
 const queryClient = new QueryClient(DEFAULT_QUERY_CLIENT_CONFIG);
 
+const sentryCreateBrowserRouter = wrapCreateBrowserRouter(createBrowserRouter);
+const router = sentryCreateBrowserRouter(routes6);
+
+if (window.__SENTRY_USING_REACT_ROUTER_SIX) {
+  DANGEROUS_SET_REACT_ROUTER_6_HISTORY(router);
+}
+
 function Main() {
   return (
     <ThemeAndStyleProvider>
       <QueryClientProvider client={queryClient}>
         <OnboardingContextProvider>
           {ConfigStore.get('demoMode') && <DemoHeader />}
-          <Router history={browserHistory} render={renderRouter}>
-            {routes()}
-          </Router>
+          {window.__SENTRY_USING_REACT_ROUTER_SIX ? (
+            <RouterProvider router={router} />
+          ) : (
+            <Router history={browserHistory} render={renderRouter}>
+              {routes()}
+            </Router>
+          )}
         </OnboardingContextProvider>
         {USE_REACT_QUERY_DEVTOOL && (
           <ReactQueryDevtools initialIsOpen={false} position="bottom-left" />

static/app/routes.tsx

@@ -28,6 +28,7 @@ import RouteNotFound from 'sentry/views/routeNotFound';
 import SettingsWrapper from 'sentry/views/settings/components/settingsWrapper';
 
 import {IndexRoute, Route} from './components/route';
+import {buildReactRouter6Routes} from './utils/reactRouter6Compat/router';
 
 const hook = (name: HookName) => HookStore.get(name).map(cb => cb());
 
@@ -690,15 +691,13 @@ function buildRoutes() {
           )}
         />
       )}
-      {USING_CUSTOMER_DOMAIN && (
-        <Route
-          path="/settings/organization/"
-          name={t('General')}
-          component={make(
-            () => import('sentry/views/settings/organizationGeneralSettings')
-          )}
-        />
-      )}
+      <Route
+        path="organization/"
+        name={t('General')}
+        component={make(
+          () => import('sentry/views/settings/organizationGeneralSettings')
+        )}
+      />
       <Route
         path="projects/"
         name={t('Projects')}
@@ -2283,6 +2282,10 @@ function buildRoutes() {
 // when the app renders Main. Memoize to avoid rebuilding the route tree.
 export const routes = memoize(buildRoutes);
 
+// XXX(epurkhiser): Transforms the legacy react-router 3 routest tree into a
+// react-router 6 style routes tree.
+export const routes6 = buildReactRouter6Routes(buildRoutes());
+
 // Exported for use in tests.
 export {buildRoutes};
 

static/app/types/system.tsx

@@ -95,6 +95,11 @@ declare global {
      * Used by webpack-devserver + html-webpack
      */
     __SENTRY_DEV_UI?: boolean;
+    /**
+     * Use react-router v6 in compatability mode. This exists while we migrate
+     * off of react-router v3.
+     */
+    __SENTRY_USING_REACT_ROUTER_SIX?: boolean;
     /**
      * Sentrys version string
      */

static/app/utils/browserHistory.tsx

@@ -1,4 +1,8 @@
 import {browserHistory as react3BrowserHistory} from 'react-router';
+import type {Router} from '@remix-run/router/dist/router';
+import type {History} from 'history';
+
+import {locationDescriptorToTo} from './reactRouter6Compat/location';
 
 /**
  * @deprecated Prefer using useNavigate
@@ -14,4 +18,71 @@ import {browserHistory as react3BrowserHistory} from 'react-router';
  * browserHistory.push({...location, query: {someKey: 1}})
  * navigate({...location, query: {someKey: 1}})
  */
-export const browserHistory = react3BrowserHistory;
+export let browserHistory = react3BrowserHistory;
+
+/**
+ * This shim sets the global `browserHistory` to a shim object that matches
+ * react-router 3's browserHistory implementation
+ */
+export function DANGEROUS_SET_REACT_ROUTER_6_HISTORY(router: Router) {
+  // XXX(epurkhiser): The router object for react-router 6 has a slightly
+  // different interface from -router 3 history. We need to shim some of the
+  // functions to keep things working
+  const compat6BrowserHistory: History = {
+    push: to => router.navigate(locationDescriptorToTo(to)),
+    replace: to => router.navigate(locationDescriptorToTo(to), {replace: true}),
+    go: n => router.navigate(n),
+    goBack: () => router.navigate(-1),
+    goForward: () => router.navigate(1),
+
+    // XXX(epurkhiser): react-router 6's BrowserHistory does not let you create
+    // multiple listeners. This implementation is similar but allows multiple
+    // listeners.
+    listen: _listener => {
+      // eslint-disable-next-line no-console
+      console.error('browserHistory.listen not implemented on react-router 6 shim');
+      return () => {};
+    },
+
+    listenBefore: _hook => {
+      // eslint-disable-next-line no-console
+      console.error('browserHistory.listenBefore not implemented on react-router 6 shim');
+      return () => {};
+    },
+    transitionTo: _location => {
+      // eslint-disable-next-line no-console
+      console.error('browserHistory.transitionTo not implemented on react-router 6 shim');
+    },
+    createKey: () => {
+      // eslint-disable-next-line no-console
+      console.error('browserHistory.createKey not implemented on react-router 6 shim');
+      return '';
+    },
+    createPath: () => {
+      // eslint-disable-next-line no-console
+      console.error('browserHistory.createPath not implemented on react-router 6 shim');
+      return '';
+    },
+    createHref: () => {
+      // eslint-disable-next-line no-console
+      console.error('browserHistory.createHref not implemented on react-router 6 shim');
+      return '';
+    },
+    createLocation: () => {
+      // eslint-disable-next-line no-console
+      console.error(
+        'browserHistory.createLocation not implemented on react-router 6 shim'
+      );
+      return undefined as any;
+    },
+    getCurrentLocation: () => {
+      // eslint-disable-next-line no-console
+      console.error(
+        'browserHistory.getCurrentLocation not implemented on react-router 6 shim'
+      );
+      return undefined as any;
+    },
+  };
+
+  browserHistory = compat6BrowserHistory;
+}