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

View File

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

View File

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