From cb8513ab2f8aaaf24c6f50f40af4ff78072d56c8 Mon Sep 17 00:00:00 2001
From: Stef Winterswijk <stef_winterswijk@hotmail.com>
Date: Tue, 11 Jun 2024 12:53:20 +0200
Subject: [PATCH] Update error page

---
 src/App/Routes/AppRoutes.tsx     | 5 +++++
 src/api/instance.ts              | 3 ++-
 src/utils/globalErrorBoundary.ts | 5 +++++
 3 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/globalErrorBoundary.ts

diff --git a/src/App/Routes/AppRoutes.tsx b/src/App/Routes/AppRoutes.tsx
index 514190a7..d14f9632 100644
--- a/src/App/Routes/AppRoutes.tsx
+++ b/src/App/Routes/AppRoutes.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useLayoutEffect } from 'react'
+import { useErrorBoundary } from 'react-error-boundary'
 import { useNavigate, useRoutes } from 'react-router-dom'
 
 import * as models from '@/config/objects'
@@ -40,10 +41,14 @@ import {
     ThemeOverview,
 } from '@/pages/public'
 import MaintenancePage from '@/pages/public/MaintenancePage/MaintenancePage'
+import globalErrorBoundary from '@/utils/globalErrorBoundary'
 
 import ProtectedRoute from './ProtectedRoute'
 
 const AppRoutes = () => {
+    const { showBoundary } = useErrorBoundary()
+    globalErrorBoundary.showBoundary = showBoundary
+
     const routes = useRoutes([
         /**
          * Public pages
diff --git a/src/api/instance.ts b/src/api/instance.ts
index bfc5d3bc..f6b8bdec 100644
--- a/src/api/instance.ts
+++ b/src/api/instance.ts
@@ -1,6 +1,7 @@
 import axios, { AxiosError, AxiosRequestConfig } from 'axios'
 
 import getApiUrl from '@/utils/getApiUrl'
+import globalErrorBoundary from '@/utils/globalErrorBoundary'
 import globalRouter from '@/utils/globalRouter'
 import { toastNotification } from '@/utils/toastNotification'
 
@@ -33,7 +34,7 @@ instance.interceptors.response.use(
             toastNotification('notLoggedIn')
             globalRouter.navigate?.('/login')
         } else if (error.response?.status === 500) {
-            globalRouter.navigate?.('/500')
+            globalErrorBoundary.showBoundary?.(error)
         }
 
         return Promise.reject(error)
diff --git a/src/utils/globalErrorBoundary.ts b/src/utils/globalErrorBoundary.ts
new file mode 100644
index 00000000..5dfb7efc
--- /dev/null
+++ b/src/utils/globalErrorBoundary.ts
@@ -0,0 +1,5 @@
+const globalErrorBoundary = { showBoundary: null } as {
+    showBoundary: ((error: any) => void) | null
+}
+
+export default globalErrorBoundary