Add support for frontend error reporting via Sentry

This change sets up Sentry to collect errors that occur at the frontend.

1 files changed, 12 insertions, 0 deletions

diff --git a/frontend/src/index.js b/frontend/src/index.js
index 0971b1e6..fe119dfb 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,5 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import * as Sentry from '@sentry/react'
+import { Integrations } from '@sentry/tracing'
 import { Provider } from 'react-redux'
 import { setupSocketConnection } from './api/socket'
 import './index.sass'
@@ -9,6 +11,16 @@ import configureStore from './store/configure-store'
 setupSocketConnection(() => {
     const store = configureStore()
 
+    // Initialize Sentry if the user has configured a DSN
+    if (process.env.REACT_APP_SENTRY_DSN) {
+        Sentry.init({
+            environment: process.env.NODE_ENV,
+            dsn: process.env.REACT_APP_SENTRY_DSN,
+            integrations: [new Integrations.BrowserTracing()],
+            tracesSampleRate: 0.5,
+        })
+    }
+
     ReactDOM.render(
         <Provider store={store}>
             <Routes />