feat: Add Sentry support (#745) (#747)

package-lock.json

@@ -23,6 +23,7 @@
         "@mui/material": "^7.1.2",
         "@mui/x-date-pickers": "^8.14.0",
         "@reduxjs/toolkit": "^2.8.2",
+        "@sentry/react": "^8.55.1",
         "cozy-external-bridge": "^1.2.1",
         "date-fns": "^4.1.0",
         "dayjs": "^1.11.19",
@@ -3948,6 +3949,98 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@sentry-internal/browser-utils": {
+      "version": "8.55.1",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.55.1.tgz",
+      "integrity": "sha512-SipXiwVhJrxzy3/4kf+YIFmpYlLKtGSRD+er7SBCcuSBtv31Fee8IXMDvk+bq24gRXxyjOLUmT//GGXjy2LL6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "8.55.1"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/feedback": {
+      "version": "8.55.1",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.55.1.tgz",
+      "integrity": "sha512-9iFHaT/ijtzB0ffZhXMnt2rPNIXO/dDiCL1G1Bc55rQMPXgawR9AIaAWciyqQjYcbL1DDOhWbzdVqB+kVs5gXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/core": "8.55.1"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/replay": {
+      "version": "8.55.1",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.55.1.tgz",
+      "integrity": "sha512-XaX6r8pXeX47rfiQrSQUwkgxHsDkOKzIT++zfTwrmveVlYSqAhp3x+AKhxAXGmKG62wlmAKQz54GJKcG4cgyKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/browser-utils": "8.55.1",
+        "@sentry/core": "8.55.1"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry-internal/replay-canvas": {
+      "version": "8.55.1",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.55.1.tgz",
+      "integrity": "sha512-2sKRu96Qe70y6TiYdYbwkhg4um2prgzH/ZJRItuoSEAjPjoFYYlP+1qjE2CcBw4RPS8/PimV7SFheSaeZs2GCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/replay": "8.55.1",
+        "@sentry/core": "8.55.1"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/browser": {
+      "version": "8.55.1",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-8.55.1.tgz",
+      "integrity": "sha512-OEn2eg8h3Mr7BmBGQ28BqbWehYA/NklZ0pAZB1FypPPl+kMd85AbaRdGTnaSjgmpc8bKbBO64edq4Y14sbCs5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry-internal/browser-utils": "8.55.1",
+        "@sentry-internal/feedback": "8.55.1",
+        "@sentry-internal/replay": "8.55.1",
+        "@sentry-internal/replay-canvas": "8.55.1",
+        "@sentry/core": "8.55.1"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/core": {
+      "version": "8.55.1",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-8.55.1.tgz",
+      "integrity": "sha512-0ea+yDOgaijR3ba2al1QZxY0bZ9MBZq2a0G+2A0uCBpBkiXnpLFGVAo9UAlEikN1C4M8ROZYiuFU7yZCqacgLQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/@sentry/react": {
+      "version": "8.55.1",
+      "resolved": "https://registry.npmjs.org/@sentry/react/-/react-8.55.1.tgz",
+      "integrity": "sha512-vrqEI1EVRMaeUluHSt84//WFuMecqAfwS+t2SojhvXtsSP6BbaCHd0jt7til5MBzI9kWAQjIxsUUr3pbFAviVg==",
+      "license": "MIT",
+      "dependencies": {
+        "@sentry/browser": "8.55.1",
+        "@sentry/core": "8.55.1",
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "engines": {
+        "node": ">=14.18"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0 || 17.x || 18.x || 19.x"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.34.48",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",

package.json

@@ -18,6 +18,7 @@
     "@mui/material": "^7.1.2",
     "@mui/x-date-pickers": "^8.14.0",
     "@reduxjs/toolkit": "^2.8.2",
+    "@sentry/react": "^8.55.1",
     "cozy-external-bridge": "^1.2.1",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.19",

public/.env.example.js

@@ -16,3 +16,4 @@ var WEBSOCKET_URL = 'wss://calendar.example.com'
 var WS_DEBOUNCE_PERIOD_MS = 100 // milliseconds, remove or set to 0 to disable debounce
 var WS_PING_PERIOD_MS = 30000
 var WS_PING_TIMEOUT_PERIOD_MS = 35000
+// var SENTRY_DSN = "https://...@sentry.io/..."; // optional, omit to disable Sentry

src/index.tsx

@@ -1,17 +1,29 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
+import * as Sentry from '@sentry/react'
 import App from './App'
 import { store } from './app/store'
 
+if (window.SENTRY_DSN) {
+  Sentry.init({
+    dsn: window.SENTRY_DSN,
+    integrations: [
+      Sentry.captureConsoleIntegration({ levels: ['warn', 'error'] })
+    ]
+  })
+}
+
 const container = document.getElementById('root')
 if (!container) throw new Error('Root element not found')
 
 const root = createRoot(container)
 root.render(
   <React.StrictMode>
-    <Provider store={store}>
-      <App />
-    </Provider>
+    <Sentry.ErrorBoundary>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </Sentry.ErrorBoundary>
   </React.StrictMode>
 )

src/window.d.ts

@@ -20,6 +20,8 @@ declare global {
     VIDEO_CONFERENCE_BASE_URL: string
     SUPPORT_URL: string
 
+    SENTRY_DSN: string | undefined
+
     DEBUG: boolean
     LANG: string