diff --git a/app/root.tsx b/app/root.tsx index 8bee112..9c4da57 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -74,11 +74,11 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => { } return ( -
+

{message}

{details}

{stack && ( -
+        
           {stack}
         
)} diff --git a/app/routes/_admin.lg-admin._dashboard.users._index.tsx b/app/routes/_admin.lg-admin._dashboard.users._index.tsx index 8e78490..0ef88e2 100644 --- a/app/routes/_admin.lg-admin._dashboard.users._index.tsx +++ b/app/routes/_admin.lg-admin._dashboard.users._index.tsx @@ -1,3 +1,5 @@ +import { isRouteErrorResponse } from 'react-router' + import { getUsers } from '~/apis/admin/get-users' import { handleCookie } from '~/libs/cookies' import { UsersPage } from '~/pages/dashboard-users' @@ -13,5 +15,34 @@ export const loader = async ({ request }: Route.LoaderArgs) => { return { usersData } } +export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => { + let message = 'Oops!' + let details = 'An unexpected error occurred.' + let stack: string | undefined + + if (isRouteErrorResponse(error)) { + message = error.status === 404 ? '404' : 'Error' + details = + error.status === 404 + ? 'The requested page could not be found.' + : error.statusText || details + } else if (import.meta.env.DEV && error && error instanceof Error) { + details = error.message + stack = error.stack + } + + return ( +
+

{message}

+

{details}

+ {stack && ( +
+          {stack}
+        
+ )} +
+ ) +} + const DashboardUsersLayout = () => export default DashboardUsersLayout