ui: Re-add support for Sentry

This change re-adds the support for Sentry. This was lost during the
migration from CRA to Next.js.

2 files changed, 29 insertions, 5 deletions

diff --git a/opendc-web/opendc-web-ui/src/pages/_app.js b/opendc-web/opendc-web-ui/src/pages/_app.js
index f9727a7a..4ef4445c 100644
--- a/opendc-web/opendc-web-ui/src/pages/_app.js
+++ b/opendc-web/opendc-web-ui/src/pages/_app.js
@@ -25,6 +25,8 @@ import { Provider } from 'react-redux'
 import { useStore } from '../redux'
 import '../index.scss'
 import { AuthProvider, useAuth } from '../auth'
+import * as Sentry from '@sentry/react'
+import { Integrations } from '@sentry/tracing'
 
 // This setup is necessary to forward the Auth0 context to the Redux context
 const Inner = ({ Component, pageProps }) => {
@@ -37,6 +39,19 @@ const Inner = ({ Component, pageProps }) => {
     )
 }
 
+const dsn = process.env.NEXT_PUBLIC_SENTRY_DSN
+// Initialize Sentry if the user has configured a DSN
+if (process.browser && dsn) {
+    if (dsn) {
+        Sentry.init({
+            environment: process.env.NODE_ENV,
+            dsn: dsn,
+            integrations: [new Integrations.BrowserTracing()],
+            tracesSampleRate: 0.1,
+        })
+    }
+}
+
 export default function App(props) {
     return (
         <>
@@ -44,9 +59,11 @@ export default function App(props) {
                 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
                 <meta name="theme-color" content="#00A6D6" />
             </Head>
-            <AuthProvider>
-                <Inner {...props} />
-            </AuthProvider>
+            <Sentry.ErrorBoundary fallback={"An error has occurred"}>
+                <AuthProvider>
+                    <Inner {...props} />
+                </AuthProvider>
+            </Sentry.ErrorBoundary>
         </>
     )
 }
diff --git a/opendc-web/opendc-web-ui/src/redux/index.js b/opendc-web/opendc-web-ui/src/redux/index.js
index ee6ca3f5..5c908957 100644
--- a/opendc-web/opendc-web-ui/src/redux/index.js
+++ b/opendc-web/opendc-web-ui/src/redux/index.js
@@ -1,11 +1,12 @@
 import { useMemo } from 'react'
-import { applyMiddleware, createStore } from 'redux'
+import {applyMiddleware, compose, createStore} from 'redux'
 import { createLogger } from 'redux-logger'
 import createSagaMiddleware from 'redux-saga'
 import thunk from 'redux-thunk'
 import rootReducer from './reducers'
 import rootSaga from './sagas'
 import { viewportAdjustmentMiddleware } from './middleware/viewport-adjustment'
+import { createReduxEnhancer } from "@sentry/react";
 
 let store
 
@@ -18,7 +19,13 @@ function initStore(initialState, ctx) {
         middlewares.push(createLogger())
     }
 
-    const configuredStore = createStore(rootReducer, initialState, applyMiddleware(...middlewares))
+    let middleware = applyMiddleware(...middlewares)
+
+    if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
+        middleware = compose(middleware, createReduxEnhancer())
+    }
+
+    const configuredStore = createStore(rootReducer, initialState, middleware)
     sagaMiddleware.run(rootSaga)
     store = configuredStore