Add Sentry support

src/App.jsx

@@ -22,6 +22,7 @@ import {
   Redirect,
   useLocation,
 } from "react-router-dom";
+import * as Sentry from "@sentry/react";
 import { useClient } from "./ConferenceCallManagerHooks";
 import { Home } from "./Home";
 import { Room } from "./Room";
@@ -30,6 +31,8 @@ import { LoginPage } from "./LoginPage";
 import { Center } from "./Layout";
 import { GuestAuthPage } from "./GuestAuthPage";
 
+const SentryRoute = Sentry.withSentryRouting(Route);
+
 export default function App() {
   const { protocol, host } = window.location;
   // Assume homeserver is hosted on same domain (proxied in development by vite)
@@ -56,19 +59,19 @@ export default function App() {
             <AuthenticatedRoute authenticated={authenticated} exact path="/">
               <Home client={client} onLogout={logout} />
             </AuthenticatedRoute>
-            <Route exact path="/login">
+            <SentryRoute exact path="/login">
               <LoginPage onLogin={login} />
-            </Route>
-            <Route exact path="/register">
+            </SentryRoute>
+            <SentryRoute exact path="/register">
               <RegisterPage onRegister={register} />
-            </Route>
-            <Route path="/room/:roomId">
+            </SentryRoute>
+            <SentryRoute path="/room/:roomId">
               {authenticated ? (
                 <Room client={client} />
               ) : (
                 <GuestAuthPage onRegisterGuest={registerGuest} />
               )}
-            </Route>
+            </SentryRoute>
           </Switch>
         )}
       </>
@@ -80,7 +83,7 @@ function AuthenticatedRoute({ authenticated, children, ...rest }) {
   const location = useLocation();
 
   return (
-    <Route {...rest}>
+    <SentryRoute {...rest}>
       {authenticated ? (
         children
       ) : (
@@ -91,6 +94,6 @@ function AuthenticatedRoute({ authenticated, children, ...rest }) {
           }}
         />
       )}
-    </Route>
+    </SentryRoute>
   );
 }

src/main.jsx

@@ -16,12 +16,29 @@ limitations under the License.
 
 import React from "react";
 import ReactDOM from "react-dom";
+import { createBrowserHistory } from "history";
 import "./index.css";
 import App from "./App";
+import * as Sentry from "@sentry/react";
+import { Integrations } from "@sentry/tracing";
+
+const history = createBrowserHistory();
+
+Sentry.init({
+  dsn: import.meta.env.VITE_SENTRY_DSN,
+  integrations: [
+    new Integrations.BrowserTracing({
+      routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
+    }),
+  ],
+  tracesSampleRate: 1.0,
+});
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>
+      <App history={history} />
+    </Sentry.ErrorBoundary>
   </React.StrictMode>,
   document.getElementById("root")
 );