Set up React Router-Sentry integration

Author: RichDom2185

src/commons/application/ApplicationWrapper.tsx

@@ -1,5 +1,6 @@
 import { Classes, NonIdealState } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import * as Sentry from '@sentry/react';
 import classNames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
@@ -37,7 +38,7 @@ const ApplicationWrapper: React.FC = () => {
       ? playgroundOnlyRouterConfig
       : getFullAcademyRouterConfig({ name, isLoggedIn, courseId, academyRoutes });
 
-    const r = createBrowserRouter(routerConfig);
+    const r = Sentry.wrapCreateBrowserRouterV7(createBrowserRouter)(routerConfig);
     dispatch(updateReactRouter(r));
 
     return r;

src/commons/navigationBar/NavigationBar.tsx

@@ -16,8 +16,9 @@ import { IconName, IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React, { useMemo, useState } from 'react';
 import { Translation } from 'react-i18next';
-import { Location, NavLink, Route, Routes, useLocation } from 'react-router';
+import { type Location, NavLink, Route, useLocation } from 'react-router';
 import { i18nDefaultLangKeys } from 'src/i18n/i18next';
+import { SentryRoutes } from 'src/routes/routerConfig';
 import classes from 'src/styles/NavigationBar.module.scss';
 
 import Dropdown from '../dropdown/Dropdown';
@@ -312,7 +313,7 @@ const NavigationBar: React.FC = () => {
         {commonNavbarRight}
       </Navbar>
 
-      <Routes>
+      <SentryRoutes>
         <Route path="/playground/*" element={null} />
         <Route path="/contributors" element={null} />
         <Route path="/courses/:courseId/sourcecast" element={null} />
@@ -327,7 +328,7 @@ const NavigationBar: React.FC = () => {
             ) : null
           }
         />
-      </Routes>
+      </SentryRoutes>
     </>
   );
 };

src/index.tsx

@@ -4,8 +4,15 @@ import 'src/styles/index.scss';
 import { Button, OverlaysProvider } from '@blueprintjs/core';
 import * as Sentry from '@sentry/react';
 import { setModulesStaticURL } from 'js-slang/dist/modules/loader';
+import { useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  useLocation,
+  useNavigationType
+} from 'react-router';
 import Constants, { Links } from 'src/commons/utils/Constants';
 import { showWarningMessage } from 'src/commons/utils/notifications/NotificationsHelper';
 import { register as registerServiceWorker } from 'src/commons/utils/RegisterServiceWorker';
@@ -19,7 +26,17 @@ if (Constants.sentryDsn) {
   Sentry.init({
     dsn: Constants.sentryDsn,
     environment: Constants.sourceAcademyEnvironment,
-    release: `cadet-frontend@${Constants.sourceAcademyVersion}`
+    release: `cadet-frontend@${Constants.sourceAcademyVersion}`,
+    integrations: [
+      Sentry.reactRouterV7BrowserTracingIntegration({
+        useEffect,
+        useLocation,
+        useNavigationType,
+        createRoutesFromChildren,
+        matchRoutes
+      }),
+      Sentry.replayIntegration()
+    ]
   });
   const userId = store.getState().session.userId;
   Sentry.setUser(typeof userId !== 'undefined' ? { id: userId.toString() } : null);

src/pages/achievement/Achievement.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Route, Routes } from 'react-router';
+import { Route } from 'react-router';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
+import { SentryRoutes } from 'src/routes/routerConfig';
 
 import { Role } from '../../commons/application/ApplicationTypes';
 import NotFound from '../notFound/NotFound';
@@ -14,11 +15,11 @@ const Achievement: React.FC = () => {
     role === Role.Admin || role === Role.Staff ? <AchievementControl /> : <NotFound />;
 
   return (
-    <Routes>
+    <SentryRoutes>
       <Route path="/" element={<AchievementDashboard />}></Route>
       <Route path="control" element={toAchievementControl}></Route>
       <Route path="*" element={<NotFound />} />
-    </Routes>
+    </SentryRoutes>
   );
 };
 

src/pages/leaderboard/Leaderboard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Navigate, Route, Routes } from 'react-router';
+import { Navigate, Route } from 'react-router';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
+import { SentryRoutes } from 'src/routes/routerConfig';
 
 import NotFound from '../notFound/NotFound';
 import OverallLeaderboardWrapper from './subcomponents/OverallLeaderboardWrapper';
@@ -22,7 +23,7 @@ const Leaderboard: React.FC = () => {
   const baseLink = `/courses/${courseId}/leaderboard`;
 
   return (
-    <Routes>
+    <SentryRoutes>
       <Route
         path="/"
         element={
@@ -46,7 +47,7 @@ const Leaderboard: React.FC = () => {
           )
         }
       ></Route>
-    </Routes>
+    </SentryRoutes>
   );
 };
 

src/pages/leaderboard/subcomponents/ContestLeaderboardWrapper.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { Navigate, Route, Routes, useLocation, useParams } from 'react-router';
+import { Navigate, Route, useLocation, useParams } from 'react-router';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 import LeaderboardActions from 'src/features/leaderboard/LeaderboardActions';
-import { LeaderboardContestDetails } from 'src/features/leaderboard/LeaderboardTypes';
+import type { LeaderboardContestDetails } from 'src/features/leaderboard/LeaderboardTypes';
+import { SentryRoutes } from 'src/routes/routerConfig';
 
 import NotFound from '../../notFound/NotFound';
 import ContestLeaderboard from './ContestLeaderboard';
@@ -28,7 +29,7 @@ const ContestLeaderboardWrapper: React.FC = () => {
   const baseLink = `/courses/${courseId}/leaderboard`;
 
   return (
-    <Routes>
+    <SentryRoutes>
       <Route
         path="/:id/score"
         element={
@@ -71,7 +72,7 @@ const ContestLeaderboardWrapper: React.FC = () => {
       ></Route>
 
       <Route path="*" element={<Navigate to={baseLink} />}></Route>
-    </Routes>
+    </SentryRoutes>
   );
 };
 

src/routes/routerConfig.tsx

@@ -1,4 +1,5 @@
-import { Navigate, redirect, RouteObject } from 'react-router';
+import * as Sentry from '@sentry/react';
+import { Navigate, redirect, Routes, type RouteObject } from 'react-router';
 import Constants from 'src/commons/utils/Constants';
 
 import Application from '../commons/application/Application';
@@ -150,3 +151,5 @@ export const getFullAcademyRouterConfig = ({
     }
   ];
 };
+
+export const SentryRoutes = Sentry.withSentryReactRouterV7Routing(Routes);