custom error boundary

frontend/src/atoms/settings.ts

@@ -42,7 +42,7 @@ export interface SettingsState {
 
 export const languageState = atom<Language>({
   key: 'languageState',
-  default: localStorage.getItem('language') as Language ?? 'english',
+  default: localStorage.getItem('language') as Language || 'english',
   effects: [
     ({ onSet }) =>
       onSet(l => localStorage.setItem('language', l.toString()))
@@ -51,7 +51,7 @@ export const languageState = atom<Language>({
 
 export const themeState = atom<Theme>({
   key: 'themeStateState',
-  default: localStorage.getItem('theme') as Theme ?? 'system',
+  default: localStorage.getItem('theme') as Theme || 'light',
   effects: [
     ({ onSet }) =>
       onSet(l => localStorage.setItem('theme', l.toString()))
@@ -60,7 +60,7 @@ export const themeState = atom<Theme>({
 
 export const serverAddressState = atom<string>({
   key: 'serverAddressState',
-  default: localStorage.getItem('server-addr') ?? window.location.hostname,
+  default: localStorage.getItem('server-addr') || window.location.hostname,
   effects: [
     ({ onSet }) =>
       onSet(a => localStorage.setItem('server-addr', a.toString()))
@@ -69,7 +69,7 @@ export const serverAddressState = atom<string>({
 
 export const serverPortState = atom<number>({
   key: 'serverPortState',
-  default: Number(localStorage.getItem('server-port')) ??
+  default: Number(localStorage.getItem('server-port')) ||
     Number(window.location.port),
   effects: [
     ({ onSet }) =>
@@ -79,7 +79,7 @@ export const serverPortState = atom<number>({
 
 export const latestCliArgumentsState = atom<string>({
   key: 'latestCliArgumentsState',
-  default: localStorage.getItem('cli-args') ?? '',
+  default: localStorage.getItem('cli-args') || '',
   effects: [
     ({ onSet }) =>
       onSet(a => localStorage.setItem('cli-args', a.toString()))

frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,46 @@
+import { Button, Container, SvgIcon, Typography, styled } from '@mui/material'
+import { useI18n } from '../hooks/useI18n'
+import ErrorIcon from '@mui/icons-material/Error'
+import { Link } from 'react-router-dom'
+
+const FlexContainer = styled(Container)({
+  display: 'flex',
+  minWidth: '100%',
+  minHeight: '80vh',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column'
+})
+
+const Title = styled(Typography)({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingBottom: '0.5rem'
+})
+
+const ErrorBoundary: React.FC = () => {
+  return (
+    <FlexContainer>
+      <Title fontWeight={'500'} fontSize={72} color={'gray'}>
+        <SvgIcon sx={{ fontSize: '200px' }}>
+          <ErrorIcon />
+        </SvgIcon>
+      </Title>
+      <Title fontWeight={'500'} fontSize={36} color={'gray'}>
+        An error occurred :\
+      </Title>
+      <Title fontWeight={'400'} fontSize={28} color={'gray'}>
+        Check your settings!
+      </Title>
+      <Link to={'/settings'} >
+        <Button variant='contained' sx={{ mt: 2 }}>
+          Goto Settings
+        </Button>
+      </Link>
+    </FlexContainer>
+  )
+}
+
+export default ErrorBoundary

frontend/src/router.tsx

@@ -8,6 +8,8 @@ const Login = lazy(() => import('./views/Login'))
 const Archive = lazy(() => import('./views/Archive'))
 const Settings = lazy(() => import('./views/Settings'))
 
+const ErrorBoundary = lazy(() => import('./components/ErrorBoundary'))
+
 export const router = createBrowserRouter([
   {
     path: '/',
@@ -19,6 +21,11 @@ export const router = createBrowserRouter([
           <Suspense fallback={<CircularProgress />}>
             <Home />
           </Suspense >
+        ),
+        errorElement: (
+          <Suspense fallback={<CircularProgress />}>
+            <ErrorBoundary />
+          </Suspense >
         )
       },
       {
@@ -35,6 +42,11 @@ export const router = createBrowserRouter([
           <Suspense fallback={<CircularProgress />}>
             <Archive />
           </Suspense >
+        ),
+        errorElement: (
+          <Suspense fallback={<CircularProgress />}>
+            <ErrorBoundary />
+          </Suspense >
         )
       },
       {