Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate 404 page and init 500 page #12236

Merged
merged 3 commits into from
Jan 24, 2022
Merged

Migrate 404 page and init 500 page #12236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b9333cc
Migrate 404 page and init 500 page
HichamELBSI Jan 18, 2022
0562ca0
Fix button props
HichamELBSI Jan 18, 2022
6bbdb97
Fix tests
HichamELBSI Jan 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/core/admin/admin/src/pages/Admin/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const MarketplacePage = lazy(() =>
import(/* webpackChunkName: "Admin_marketplace" */ '../MarketplacePage')
);
const NotFoundPage = lazy(() => import('../NotFoundPage'));
const InternalErrorPage = lazy(() => import('../InternalErrorPage'));

const ProfilePage = lazy(() =>
import(/* webpackChunkName: "Admin_profilePage" */ '../ProfilePage')
Expand Down Expand Up @@ -87,6 +88,7 @@ const Admin = () => {
<InstalledPluginsPage />
</Route>
<Route path="/404" component={NotFoundPage} />
<Route path="/500" component={InternalErrorPage} />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ℹ️ We init the 500 page although there is no redirection to /500 in the app for the moment

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes that's a good idea!

I think that at some point we should improve the error handling in the admin by having two different views:

  • one in production that redirects the user to the 500 page
  • one in development where we implement an error boundary properly

Anyway good work!

<Route path="" component={NotFoundPage} />
</Switch>
</Suspense>
Expand Down
53 changes: 53 additions & 0 deletions packages/core/admin/admin/src/pages/InternalErrorPage/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/**
* InternalErrorPage
*
* This is the page we show when the user gets a 500 error
*
*/
import React from 'react';
import { useFocusWhenNavigate } from '@strapi/helper-plugin';
import { Main } from '@strapi/design-system/Main';
import { LinkButton } from '@strapi/design-system/LinkButton';
import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
import EmptyPictures from '@strapi/icons/EmptyPictures';
import ArrowRight from '@strapi/icons/ArrowRight';
import { useIntl } from 'react-intl';

const InternalErrorPage = () => {
const { formatMessage } = useIntl();
useFocusWhenNavigate();

return (
<Main labelledBy="title">
<HeaderLayout
id="title"
title={formatMessage({
id: 'content-manager.pageNotFound',
defaultMessage: 'Page not found',
})}
/>
<ContentLayout>
<EmptyStateLayout
action={
<LinkButton variant="secondary" endIcon={<ArrowRight />} to="/">
{formatMessage({
id: 'app.components.NotFoundPage.back',
defaultMessage: 'Back to homepage',
})}
</LinkButton>
}
content={formatMessage({
id: 'notification.error',
defaultMessage: 'An error occured',
})}
hasRadius
icon={<EmptyPictures width="10rem" />}
shadow="tableShadow"
/>
</ContentLayout>
</Main>
);
};

export default InternalErrorPage;