apps/web/src/app/App.tsx

@@ -23,6 +23,7 @@ import { SideNavTab, Sidebar } from '@graphpolaris/shared/lib/sidebar';
 import { InspectorPanel } from '@graphpolaris/shared/lib/inspector';
 import { SearchBar } from '@graphpolaris/shared/lib/sidebar/search/SearchBar';
 import { Schema } from '@graphpolaris/shared/lib/schema/panel';
+import { ErrorBoundary } from '@graphpolaris/shared/lib/error-boundary';
 
 export type App = {
   load?: string;
@@ -76,7 +77,9 @@ export function App(props: App) {
                 <Navbar />
               </aside>
               <main className="grow flex flex-row h-screen pt-12">
-                <Sidebar onTab={(tab) => setTab(tab)} tab={tab} />
+                <ErrorBoundary fallback={<p>Something went wrong in the sidebar</p>}>
+                  <Sidebar onTab={(tab) => setTab(tab)} tab={tab} />
+                </ErrorBoundary>
                 <Resizable divisorSize={3} horizontal={true} defaultProportion={0.85} maxProportion={0.85}>
                   <Resizable divisorSize={3} horizontal={true} defaultProportion={0.33}>
                     {tab !== undefined ? (
@@ -87,19 +90,25 @@ export function App(props: App) {
                     ) : null}
 
                     <Resizable divisorSize={3} horizontal={false}>
-                      <VisualizationPanel
-                        fullSize={() => {
-                          // setVisFullSize(!visFullSize);
-                          // tab === undefined && setTab('Schema');
-                          // tab !== undefined && setTab(undefined);
-                        }}
-                      />
+                      <ErrorBoundary fallback={<p>Something went wrong in the visualization panel</p>}>
+                        <VisualizationPanel
+                          fullSize={() => {
+                            // setVisFullSize(!visFullSize);
+                            // tab === undefined && setTab('Schema');
+                            // tab !== undefined && setTab(undefined);
+                          }}
+                        />
+                      </ErrorBoundary>
 
-                      <QueryBuilder onRunQuery={runQuery} />
+                      <ErrorBoundary fallback={<p>Something went wrong in the query builder</p>}>
+                        <QueryBuilder onRunQuery={runQuery} />
+                      </ErrorBoundary>
                     </Resizable>
                   </Resizable>
                   {/* <ConfigPanel /> */}
-                  <InspectorPanel />
+                  <ErrorBoundary fallback={<p>Something went wrong in the inspector panel</p>}>
+                    <InspectorPanel />
+                  </ErrorBoundary>
                 </Resizable>
               </main>
             </div>

apps/web/tsconfig.json

@@ -45,7 +45,7 @@
     "postcss.config.js", // excludes PostCSS configuration file
     "tsconfig.tsbuildinfo" // excludes TypeScript build info file
   ],
-  "include": ["vite.config.ts", "src/**/*"],
+  "include": ["vite.config.ts", "src/**/*", "../../libs/shared/lib/error-boundary"],
   "files": ["vite.config.ts"],
   "references": []
 }

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';
+
+interface ErrorBoundaryProps {
+  fallback: ReactNode;
+  children: ReactNode;
+  saveStateID?: string;
+  userID?: string;
+  sessionID?: string;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+class ErrorBoundaryWrapper extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  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');
+    }
+  }
+
+  resetErrorBoundary = () => {
+    this.setState({ hasError: false });
+  };
+
+  render() {
+    if (this.state.hasError && !(import.meta.env.GRAPHPOLARIS_VERSION === 'dev')) {
+      return (
+        <div className="flex justify-center items-center h-full">
+          <div className="max-w-lg mx-auto text-left">
+            {this.props.fallback}
+            <Button variant="outline" onClick={this.resetErrorBoundary}>
+              Retry
+            </Button>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+const ErrorBoundary: React.FC<{ fallback: ReactNode; children: ReactNode }> = (props) => {
+  const session = useSessionCache();
+  const auth = useAuthorizationCache();
+
+  return (
+    <ErrorBoundaryWrapper {...props} userID={auth.userID} sessionID={auth.sessionID} saveStateID={session.currentSaveState}>
+      {props.children}
+    </ErrorBoundaryWrapper>
+  );
+};
+
+export { ErrorBoundary };

libs/shared/lib/vis/components/VisualizationPanel.tsx

@@ -8,6 +8,7 @@ import {
   useML,
   useQuerybuilderGraph,
   useSchemaGraph,
+  useSessionCache,
   useVisualization,
 } from '@graphpolaris/shared/lib/data-access';
 import VisualizationTabBar from './VisualizationTabBar';
@@ -15,6 +16,7 @@ import { Recommender, NoData, Querying } from '../views';
 import { resultSetFocus, resultSetSelection, unSelect } from '../../data-access/store/interactionSlice';
 import { updateVisualization, addVisualization } from '../../data-access/store/visualizationSlice';
 import { VisualizationPropTypes, VISComponentType } from '../common';
+import { ErrorBoundary } from '../../error-boundary';
 
 type PromiseFunc = () => Promise<{ default: VISComponentType<any> }>;
 export const Visualizations: Record<string, PromiseFunc> = {
@@ -84,37 +86,39 @@ export const VisualizationPanel = ({ fullSize }: { fullSize: () => void }) => {
       onMouseDownCapture={() => dispatch(resultSetFocus({ focusType: 'visualization' }))}
     >
       <VisualizationTabBar fullSize={fullSize} />
-      <div className="grow overflow-y-auto" style={graphQueryResult.nodes.length === 0 ? { overflow: 'hidden' } : {}}>
-        {graphQueryResult.queryingBackend ? (
-          <Querying />
-        ) : graphQueryResult.nodes.length === 0 ? (
-          <NoData dataAvailable={query.nodes.length > 0} />
-        ) : openVisualizationArray.length === 0 ? (
-          <Recommender />
-        ) : (
-          <div className="w-full h-full flex">
-            <Suspense fallback={<div>Loading...</div>}>
-              {!!viz &&
-                activeVisualizationIndex !== -1 &&
-                openVisualizationArray?.[activeVisualizationIndex] &&
-                viz.id === openVisualizationArray[activeVisualizationIndex].id &&
-                graphMetadata && (
-                  <viz.component
-                    data={graphQueryResult}
-                    schema={schema}
-                    ml={ml}
-                    settings={openVisualizationArray[activeVisualizationIndex]}
-                    dispatch={dispatch}
-                    handleSelect={handleSelect}
-                    graphMetadata={graphMetadata}
-                    updateSettings={updateSettings}
-                    handleHover={() => {}}
-                  />
-                )}
-            </Suspense>
-          </div>
-        )}
-      </div>
+      <ErrorBoundary fallback={<p>Visualization component failed</p>}>
+        <div className="grow overflow-y-auto" style={graphQueryResult.nodes.length === 0 ? { overflow: 'hidden' } : {}}>
+          {graphQueryResult.queryingBackend ? (
+            <Querying />
+          ) : graphQueryResult.nodes.length === 0 ? (
+            <NoData dataAvailable={query.nodes.length > 0} />
+          ) : openVisualizationArray.length === 0 ? (
+            <Recommender />
+          ) : (
+            <div className="w-full h-full flex">
+              <Suspense fallback={<div>Loading...</div>}>
+                {!!viz &&
+                  activeVisualizationIndex !== -1 &&
+                  openVisualizationArray?.[activeVisualizationIndex] &&
+                  viz.id === openVisualizationArray[activeVisualizationIndex].id &&
+                  graphMetadata && (
+                    <viz.component
+                      data={graphQueryResult}
+                      schema={schema}
+                      ml={ml}
+                      settings={openVisualizationArray[activeVisualizationIndex]}
+                      dispatch={dispatch}
+                      handleSelect={handleSelect}
+                      graphMetadata={graphMetadata}
+                      updateSettings={updateSettings}
+                      handleHover={() => {}}
+                    />
+                  )}
+              </Suspense>
+            </div>
+          )}
+        </div>
+      </ErrorBoundary>
     </div>
   );
 };