fix: introduce proper error boundary

- add methods to quit or relaunch the app
- create error boundary that displays error and offers options to relaunch or quit

closes #2564

Signed-off-by: Maxim Stykow <maxim.stykow@tngtech.com>

Author: mstykow

package.json

@@ -28,6 +28,7 @@
     "re-resizable": "^6.9.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.12",
     "react-hot-toast": "^2.4.1",
     "react-hotkeys-hook": "^4.5.0",
     "react-redux": "^9.1.0",

renovate.json5

@@ -48,6 +48,7 @@
         'prettier',
         'prop-types',
         'proxy-memoize',
+        'react-error-boundary',
         'react-hot-toast',
         'react-hotkeys-hook',
         'react-virtuoso',

src/ElectronBackend/main/main.ts

@@ -58,6 +58,12 @@ export async function main(): Promise<void> {
       },
     );
 
+    ipcMain.handle(IpcChannel.Quit, () => {
+      mainWindow.close();
+    });
+    ipcMain.handle(IpcChannel.Relaunch, () => {
+      mainWindow.reload();
+    });
     ipcMain.handle(
       IpcChannel.ConvertInputFile,
       getConvertInputFileToDotOpossumAndOpenListener(mainWindow),

src/ElectronBackend/preload.ts

@@ -9,6 +9,8 @@ import { IpcChannel } from '../shared/ipc-channels';
 import { ElectronAPI } from '../shared/shared-types';
 
 const electronAPI: ElectronAPI = {
+  quit: () => ipcRenderer.invoke(IpcChannel.Quit),
+  relaunch: () => ipcRenderer.invoke(IpcChannel.Relaunch),
   openLink: (link) => ipcRenderer.invoke(IpcChannel.OpenLink, { link }),
   openFile: () => ipcRenderer.invoke(IpcChannel.OpenFile),
   deleteFile: () => ipcRenderer.invoke(IpcChannel.DeleteFile),

src/Frontend/Components/App/App.tsx

@@ -4,6 +4,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import '@fontsource-variable/karla';
 import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
+import { ErrorBoundary } from 'react-error-boundary';
 
 import { View } from '../../enums/enums';
 import { useAppSelector } from '../../state/hooks';
@@ -12,7 +13,7 @@ import { getSelectedView } from '../../state/selectors/view-selector';
 import { usePanelSizes } from '../../state/variables/use-panel-sizes';
 import { useSignalsWorker } from '../../web-workers/use-signals-worker';
 import { AuditView } from '../AuditView/AuditView';
-import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary';
+import { ErrorFallback } from '../ErrorFallback/ErrorFallback';
 import { GlobalPopup } from '../GlobalPopup/GlobalPopup';
 import { ProcessPopup } from '../ProcessPopup/ProcessPopup';
 import { ReportView } from '../ReportView/ReportView';
@@ -32,18 +33,18 @@ export function App() {
   usePanelSizes(); // pre-hydrate size of panels
 
   return (
-    <ErrorBoundary>
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={theme}>
-          <GlobalPopup />
-          <ProcessPopup />
-          <ViewContainer>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <ViewContainer>
+          <ErrorBoundary FallbackComponent={ErrorFallback}>
+            <GlobalPopup />
+            <ProcessPopup />
             <TopBar />
             {renderView()}
-          </ViewContainer>
-        </ThemeProvider>
-      </StyledEngineProvider>
-    </ErrorBoundary>
+          </ErrorBoundary>
+        </ViewContainer>
+      </ThemeProvider>
+    </StyledEngineProvider>
   );
 
   function renderView() {

src/Frontend/Components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,22 @@
+// SPDX-FileCopyrightText: Meta Platforms, Inc. and its affiliates
+// SPDX-FileCopyrightText: TNG Technology Consulting GmbH <https://www.tngtech.com>
+//
+// SPDX-License-Identifier: Apache-2.0
+import { styled } from '@mui/material';
+
+export const Container = styled('div')({
+  display: 'flex',
+  flexDirection: 'row',
+  height: '100%',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const TextContainer = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '20px',
+  width: 'fit-content',
+  maxWidth: '600px',
+});

src/Frontend/Components/ErrorBoundary/__tests__/ErrorBoundary.test.tsx

@@ -0,0 +1,52 @@
+// SPDX-FileCopyrightText: Meta Platforms, Inc. and its affiliates
+// SPDX-FileCopyrightText: TNG Technology Consulting GmbH <https://www.tngtech.com>
+//
+// SPDX-License-Identifier: Apache-2.0
+import MuiButton from '@mui/material/Button';
+import MuiButtonGroup from '@mui/material/ButtonGroup';
+import MuiTypography from '@mui/material/Typography';
+import { FallbackProps } from 'react-error-boundary';
+
+import { text } from '../../../shared/text';
+import { OpossumColors } from '../../shared-styles';
+import { Container, TextContainer } from './ErrorFallback.style';
+
+export const ErrorFallback: React.FC<FallbackProps> = ({
+  error,
+  resetErrorBoundary,
+}) => {
+  return (
+    <Container>
+      <TextContainer role="alert">
+        <MuiTypography textAlign={'center'} variant={'h6'}>
+          {text.errorBoundary.unexpectedError}
+        </MuiTypography>
+        <MuiTypography
+          sx={{ fontFamily: 'monospace' }}
+          color={OpossumColors.red}
+        >
+          {error.message}
+        </MuiTypography>
+        <MuiButtonGroup fullWidth variant={'contained'}>
+          <MuiButton
+            color={'secondary'}
+            onClick={() => {
+              resetErrorBoundary();
+              window.electronAPI.relaunch();
+            }}
+          >
+            {text.errorBoundary.relaunch}
+          </MuiButton>
+          <MuiButton
+            color={'secondary'}
+            onClick={() => {
+              window.electronAPI.quit();
+            }}
+          >
+            {text.errorBoundary.quit}
+          </MuiButton>
+        </MuiButtonGroup>
+      </TextContainer>
+    </Container>
+  );
+};

src/Frontend/Components/ErrorFallback/ErrorFallback.style.ts

@@ -17,6 +17,8 @@ export enum IpcChannel {
   OpenDotOpossumFile = 'open-dot-opossum-file',
   GetUserSettings = 'get-user-settings',
   SetUserSettings = 'set-user-settings',
+  Quit = 'quit',
+  Relaunch = 'relaunch',
 }
 
 export enum AllowedFrontendChannels {

src/Frontend/Components/ErrorFallback/ErrorFallback.tsx

@@ -235,6 +235,8 @@ export interface FileSupportPopupArgs {
 export type Listener = (event: IpcRendererEvent, ...args: Array<any>) => void;
 
 export interface ElectronAPI {
+  quit: () => void;
+  relaunch: () => void;
   openLink: (link: string) => Promise<unknown>;
   openFile: () => Promise<unknown>;
   deleteFile: () => Promise<unknown>;

src/shared/ipc-channels.ts

@@ -229,4 +229,9 @@ export const text = {
     applyChanges: 'Apply changes',
     revertAll: 'Revert all',
   },
+  errorBoundary: {
+    unexpectedError: "We're sorry, an unexpected error occurred!",
+    relaunch: 'Relaunch App',
+    quit: 'Quit App',
+  },
 } as const;

src/shared/shared-types.ts

@@ -32,6 +32,8 @@ class ResizeObserver {
 }
 
 global.window.electronAPI = {
+  quit: jest.fn(),
+  relaunch: jest.fn(),
   openLink: jest.fn().mockReturnValue(Promise.resolve()),
   openFile: jest.fn(),
   deleteFile: jest.fn(),

src/shared/text.ts

@@ -9902,6 +9902,7 @@ __metadata:
     re-resizable: "npm:^6.9.11"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
+    react-error-boundary: "npm:^4.0.12"
     react-hot-toast: "npm:^2.4.1"
     react-hotkeys-hook: "npm:^4.5.0"
     react-redux: "npm:^9.1.0"
@@ -10448,6 +10449,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-error-boundary@npm:^4.0.12":
+  version: 4.0.12
+  resolution: "react-error-boundary@npm:4.0.12"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+  peerDependencies:
+    react: ">=16.13.1"
+  checksum: 10/ba59f885eae3c3786548086c6c2088a9f511080c4052e778017959e9e0b6461892efdcf58fcfc2b3a6bc3e79e17cf842fc8ccdc6d82698c51c2ccab12c8c0b85
+  languageName: node
+  linkType: hard
+
 "react-hot-toast@npm:^2.4.1":
   version: 2.4.1
   resolution: "react-hot-toast@npm:2.4.1"