refactor: add error route with override message (#6837)

* refactor: add error route with override message

* refactor: add conditional type

* refactor: address feedback

* refactor: fix the invariant condition
This commit is contained in:
Mark Kim 2023-11-22 11:42:50 -05:00 committed by GitHub
parent 10a245df81
commit 96f823aaf4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 7 deletions

View File

@ -160,6 +160,7 @@ const router = createMemoryRouter(
id: '/organization', id: '/organization',
loader: async (...args) => (await import('./routes/organization')).loader(...args), loader: async (...args) => (await import('./routes/organization')).loader(...args),
element: <Suspense fallback={<AppLoadingIndicator />}><Organization /></Suspense>, element: <Suspense fallback={<AppLoadingIndicator />}><Organization /></Suspense>,
errorElement: <ErrorRoute defaultMessage='A temporarily unexpected error occurred, please reload to try again' />,
children: [ children: [
{ {
index: true, index: true,
@ -988,6 +989,7 @@ const router = createMemoryRouter(
element: <Suspense fallback={<AppLoadingIndicator />}> element: <Suspense fallback={<AppLoadingIndicator />}>
<Auth /> <Auth />
</Suspense>, </Suspense>,
errorElement: <ErrorRoute defaultMessage='A temporarily unexpected error occurred, please reload to try again' />,
children: [ children: [
{ {
path: 'login', path: 'login',

View File

@ -11,18 +11,24 @@ import {
import { Icon } from '../components/icon'; import { Icon } from '../components/icon';
export const ErrorRoute: FC = () => { export const ErrorRoute: FC<{ defaultMessage?: string }> = ({ defaultMessage }) => {
const error = useRouteError(); const error = useRouteError();
const getErrorMessage = (err: any) => { const getErrorMessage = (err: any) => {
if (isRouteErrorResponse(err)) { if (isRouteErrorResponse(err)) {
return err.data; return err.data;
} }
if (err instanceof Error) {
return err.message; if (err?.message) {
return err?.message;
} }
return err?.message || 'Unknown error'; if (defaultMessage) {
return defaultMessage;
}
return 'Unknown error';
}; };
const getErrorStack = (err: any) => { const getErrorStack = (err: any) => {
if ('error' in err) { if ('error' in err) {
return err.error?.stack; return err.error?.stack;

View File

@ -152,9 +152,9 @@ export const indexLoader: LoaderFunction = async () => {
sessionId, sessionId,
}); });
invariant(organizationsResult, 'Failed to load organizations'); invariant(organizationsResult && organizationsResult.organizations, 'Failed to load organizations');
invariant(user, 'Failed to load user'); invariant(user && user.id, 'Failed to load user');
invariant(currentPlan, 'Failed to load current plan'); invariant(currentPlan && currentPlan.planId, 'Failed to load current plan');
const { organizations } = organizationsResult; const { organizations } = organizationsResult;