feat: add Bugsnag error reporting service

Initialize Bugsnag SDK for error reporting. Reads configuration from environment variables.

Author: morgan-wowk

.env.example

@@ -34,3 +34,22 @@ VITE_DEFAULT_REMOTE_COMPONENT_LIBRARY_BETA=<boolean>
 
 # Dev Tools
 VITE_ENABLE_DEBUG_MODE=<boolean>
+
+# =============================================================================
+# BUGSNAG ERROR REPORTING (OPTIONAL)
+# =============================================================================
+# Bugsnag error reporting is disabled by default. To enable, set your API key
+# below.
+
+# Required: Your Bugsnag API key
+# Get this from your Bugsnag project settings
+# VITE_BUGSNAG_API_KEY=
+
+# Optional: Custom endpoints (defaults to Bugsnag)
+# VITE_BUGSNAG_NOTIFY_ENDPOINT=https://notify.bugsnag.com
+# VITE_BUGSNAG_SESSIONS_ENDPOINT=https://sessions.bugsnag.com
+
+# Optional: Custom grouping key for metadata
+# If set, the normalized error message will also be added to metadata.custom[key]
+# Useful for integration with platforms that use custom grouping keys
+# VITE_BUGSNAG_CUSTOM_GROUPING_KEY=

README.md

@@ -54,6 +54,14 @@ If you find you are blocked by CORS, you will, for now, need to use the manual s
 
 If you complete these steps the app will launch on `127.0.0.1:8000` with the latest build you've created on the frontend.
 
+### Reporting errors to Bugsnag (Optional)
+
+To enable error reporting, add your API key to your `.env` file:
+
+```bash
+VITE_BUGSNAG_API_KEY=your-api-key
+```
+
 ## App features:
 
 - Build and edit pipelines using drag and drop visual editor

package-lock.json

@@ -49,6 +49,8 @@
     "hydrate-component-library": "tsx scripts/hydrate-component-library.ts public/component_library.original.yaml public/component_library.yaml"
   },
   "dependencies": {
+    "@bugsnag/js": "^8.8.1",
+    "@bugsnag/plugin-react": "^8.8.0",
     "@dnd-kit/core": "^6.3.1",
     "@hey-api/client-fetch": "^0.13.1",
     "@hyperjump/browser": "^1.3.1",

package.json

@@ -8,6 +8,10 @@ import ReactDOM from "react-dom/client";
 import { scan } from "react-scan";
 
 import { router } from "./routes/router";
+import { initializeBugsnag } from "./services/errorManagement/bugsnag";
+
+// Initialize error reporting early
+initializeBugsnag();
 
 const queryClient = new QueryClient();