Merge branch 'feature/AB#18112' into dev

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'
@@ -43,10 +44,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

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)

src/utils/globalErrorBoundary.ts

@@ -0,0 +1,5 @@
+const globalErrorBoundary = { showBoundary: null } as {
+    showBoundary: ((error: any) => void) | null
+}
+
+export default globalErrorBoundary