Chore: configure sentry

README.md

@@ -72,6 +72,17 @@ The compiler URL can be configured in the `.env` file:
 VITE_COMPILER_URL=https://compiler.sensebox.de
 ```
 
+### Sentry Error Tracking
+
+Sentry is configured for error tracking. Set the following environment variables:
+
+```env
+VITE_SENTRY_DSN=your-sentry-dsn
+VITE_SENTRY_ENVIRONMENT=development
+VITE_APP_VERSION=1.0.0
+VITE_SENTRY_TRACES_SAMPLE_RATE=0.1
+```
+
 ## 📝 Development Guidelines
 
 ### Code Style

package.json

@@ -7,8 +7,8 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@blockly/block-plus-minus": "^9.0.1",
     "@blockly/field-colour": "^6.0.4",
-    "@blockly/field-multilineinput": "^6.0.5",
     "@blockly/field-grid-dropdown": "^6.0.6",
+    "@blockly/field-multilineinput": "^6.0.5",
     "@blockly/field-slider": "8.0.2",
     "@blockly/plugin-scroll-options": "^7.0.1",
     "@blockly/plugin-typed-variable-modal": "^9.0.2",
@@ -26,6 +26,7 @@
     "@mui/lab": "^5.0.0-alpha.110",
     "@mui/material": "^5.10.16",
     "@mui/styles": "^5.10.16",
+    "@sentry/react": "^10.34.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^7.2.1",

src/components/ErrorBoundary.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import * as Sentry from "@sentry/react";
 
 export default class ErrorBoundary extends React.Component {
   constructor(props) {
@@ -12,8 +13,17 @@ export default class ErrorBoundary extends React.Component {
   }
 
   componentDidCatch(error, errorInfo) {
-    // You can also log the error to an error reporting service
+    // Log the error to console for development
     console.log(error, errorInfo);
+
+    // Capture the error with Sentry
+    Sentry.captureException(error, {
+      contexts: {
+        react: {
+          componentStack: errorInfo.componentStack,
+        },
+      },
+    });
   }
 
   handleReset = () => {

src/index.jsx

@@ -1,11 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { initSentry } from "./sentry";
 import "./index.css";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 import store from "./store";
 import { fetchSensors } from "./actions/sensorwikiActions";
 
+initSentry();
+
 // store.dispatch(fetchSensors());
 
 // fetchSensors();

src/sentry.js

@@ -0,0 +1,54 @@
+import * as Sentry from "@sentry/react";
+import { browserTracingIntegration, reactRouterV6BrowserTracingIntegration } from "@sentry/react";
+import {
+  useLocation,
+  useNavigationType,
+  createRoutesFromChildren,
+  matchRoutes,
+} from "react-router-dom";
+
+const SENTRY_DSN = import.meta.env.VITE_SENTRY_DSN;
+const ENVIRONMENT = import.meta.env.VITE_SENTRY_ENVIRONMENT || import.meta.env.MODE || "development";
+const RELEASE = import.meta.env.VITE_APP_VERSION || "unknown";
+const IS_PRODUCTION = ENVIRONMENT === "production";
+const IS_DEVELOPMENT = ENVIRONMENT === "development";
+
+const getTracesSampleRate = () => {
+  const customRate = import.meta.env.VITE_SENTRY_TRACES_SAMPLE_RATE;
+  if (customRate) {
+    return parseFloat(customRate);
+  }
+  return IS_PRODUCTION ? 0.1 : 1.0;
+};
+
+export const initSentry = () => {
+  if (!SENTRY_DSN) {
+    if (IS_DEVELOPMENT) {
+      console.warn("Sentry DSN not configured. Error tracking disabled.");
+    }
+    return;
+  }
+
+  Sentry.init({
+    dsn: SENTRY_DSN,
+    environment: ENVIRONMENT,
+    release: RELEASE,
+    integrations: [
+      browserTracingIntegration({
+        routingInstrumentation: reactRouterV6BrowserTracingIntegration({
+          useLocation,
+          useNavigationType,
+          createRoutesFromChildren,
+          matchRoutes,
+        }),
+      }),
+    ],
+    tracesSampleRate: getTracesSampleRate(),
+    ignoreErrors: [
+      "ResizeObserver loop limit exceeded",
+      "ResizeObserver loop completed with undelivered notifications",
+      "Non-Error promise rejection captured",
+    ],
+  });
+};
+