feat(errorBoundary): sentry for error logging

apps/web/.env

@@ -5,3 +5,6 @@ STAGING=dev
 SKIP_LOGIN=true
 BACKEND_USER=:3000
 GRAPHPOLARIS_VERSION=dev
+
+SENTRY_ENABLED=false
+SENTRY_URL=
\ No newline at end of file

apps/web/.env.development

@@ -5,3 +5,6 @@ VITE_SKIP_LOGIN=true
 VITE_BACKEND_USER=:3000
 VITE_BACKEND_QUERY=:3003
 VITE_BACKEND_SCHEMA=:3002
+
+SENTRY_ENABLED=false
+SENTRY_URL=
\ No newline at end of file

apps/web/.env.production

@@ -7,3 +7,5 @@ VITE_BACKEND_USER=/user
 VITE_BACKEND_QUERY=/query
 VITE_BACKEND_SCHEMA=/schema
 
+SENTRY_ENABLED=false
+SENTRY_URL=
\ No newline at end of file

apps/web/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@graphpolaris/shared": "workspace:*",
     "@reduxjs/toolkit": "^2.2.1",
+    "@sentry/react": "^8.25.0",
     "config": "workspace:*",
     "graphology": "^0.25.4",
     "react": "^18.2.0",

apps/web/src/app/App.tsx

@@ -5,7 +5,6 @@ import {
   useML,
   useQuerybuilderGraph,
   useQuerybuilderSettings,
-  useSchemaGraph,
   useSessionCache,
 } from '@graphpolaris/shared/lib/data-access';
 import { resetGraphQueryResults, queryingBackend } from '@graphpolaris/shared/lib/data-access/store/graphQueryResultSlice';
@@ -36,7 +35,6 @@ export function App(props: App) {
   const session = useSessionCache();
   const dispatch = useAppDispatch();
   const queryBuilderSettings = useQuerybuilderSettings();
-  const schema = useSchemaGraph();
 
   const runQuery = () => {
     if (session?.currentSaveState && query) {
@@ -74,7 +72,9 @@ export function App(props: App) {
           <div className={'h-screen w-screen ' + (!auth.authorized ? 'blur-sm pointer-events-none ' : '')}>
             <div className="flex flex-col h-screen max-h-screen relative">
               <aside className="absolute w-full h-12">
-                <Navbar />
+                <ErrorBoundary fallback={<p>Something went wrong in the navbar</p>}>
+                  <Navbar />
+                </ErrorBoundary>
               </aside>
               <main className="grow flex flex-row h-screen pt-12">
                 <ErrorBoundary fallback={<p>Something went wrong in the sidebar</p>}>
@@ -105,7 +105,6 @@ export function App(props: App) {
                       </ErrorBoundary>
                     </Resizable>
                   </Resizable>
-                  {/* <ConfigPanel /> */}
                   <ErrorBoundary fallback={<p>Something went wrong in the inspector panel</p>}>
                     <InspectorPanel />
                   </ErrorBoundary>

apps/web/src/components/navbar/navbar.tsx

@@ -9,8 +9,6 @@
  * We do not test components/renderfunctions/styling files.
  * See testing plan for more details.*/
 import React, { useState, useRef, useEffect } from 'react';
-import logo_white from './gp-logo-white.svg';
-import logo from './gp-logo.svg';
 import { useAuthorizationCache, useAuth } from '@graphpolaris/shared/lib/data-access';
 import DatabaseSelector from './DatabaseManagement/dbConnectionSelector';
 import { DropdownItem } from '@graphpolaris/shared/lib/components/dropdowns';
@@ -43,7 +41,6 @@ export const Navbar = () => {
         <GpLogo className="h-7" />
       </a>
       <DatabaseSelector />
-
       <div className="ml-auto">
         <div className="w-fit" ref={dropdownRef}>
           <Popover>

apps/web/src/main.tsx

-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { Provider } from 'react-redux';
-
+import * as Sentry from '@sentry/react';
 import { store } from '@graphpolaris/shared/lib/data-access/store';
 import App from './app/App';
 import { createRoot } from 'react-dom/client';
 import './main.css';
 
+if (import.meta.env.SENTRY_ENABLED) {
+  Sentry.init({
+    dsn: import.meta.env.SENTRY_URL,
+    integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+    tracesSampleRate: 1.0,
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
+  });
+}
+
 (window as any).global = window;
 const domNode = document.getElementById('root');
 
@@ -16,7 +26,6 @@ if (domNode) {
     <Provider store={store}>
       <Router>
         <Routes>
-          {/* App */}
           <Route path="/" element={<App load={undefined} />}></Route>
           <Route path="/fraud" element={<App load="5bdf3354-673f-4dec-b6a0-196e67cd211c" />}></Route>
         </Routes>

libs/shared/lib/error-boundary/index.tsx

 import React, { ReactNode } from 'react';
 import { Button } from '../components/buttons';
 import { useAuthorizationCache, useSessionCache } from '../data-access';
-// import * as Sentry from '@sentry/react';
+import * as Sentry from '@sentry/react';
 
 interface ErrorBoundaryProps {
   fallback: ReactNode;
@@ -26,17 +26,8 @@ class ErrorBoundaryWrapper extends React.Component<ErrorBoundaryProps, ErrorBoun
   }
 
   componentDidCatch(error: Error, info: React.ErrorInfo): void {
-    console.log('An error happened in the application', import.meta.env);
     if (import.meta.env.SENTRY_ENABLED) {
-      // send to error logging service in the future
-      // Sentry.captureException(error, {
-      //   userID: this.props.userID,
-      //   sessionID: this.props.sessionID,
-      //   saveState: this.props.saveStateID,
-      //   error,
-      //   info,
-      // });
-      console.log('log to sentry');
+      // Send specific error info to logging service
     }
   }
 

libs/shared/package.json

@@ -26,6 +26,7 @@
     "@pixi-essentials/cull": "^2.0.0",
     "@reactflow/node-resizer": "^2.2.9",
     "@reduxjs/toolkit": "^2.2.1",
+    "@sentry/react": "^8.25.0",
     "@tisoap/react-flow-smart-edge": "^3.0.0",
     "@types/cytoscape": "^3.19.16",
     "@types/react-grid-layout": "^1.3.5",