Error-handling: 404 and error page

[kwajiehao]

Previously, issue #253 brought up the need for 404 pages and error pages. This issue goes into more detail on the implementation details of these pages.

Error page

Any error caught by the error boundary should render the error page as the fallback component. The Figma design for the error page can be found here: https://www.figma.com/file/4qNhGTBMs521pDvCAIh4ON/IsomerCMS?node-id=474%3A6821

404 page

Currently, when we attempt to access a layout for a non-existent file, the API call fails and throws an error, but the component does not handle the error. In such a case, we should throw a 404 error from our backend, and the frontend should handle the 404 error by redirecting the user to the 404 page, where they will have the option to go back to their Workspace.

We will need to do this for the following layouts/components:

• EditPage
• EditContactUs

We do not need to do this for CategoryPages because we have built in automatic redirection rules back to the Workspace if the collection/resource category doesn't exist.

Other notes

Currently, we need to implement the 404 redirection and error boundary fallback component separately, since the native error boundary provided by React does not catch certain events (see PR #262). We can use an alternative error boundary library, react-error-boundary, to unify these approaches. However, since we only need to implement the 404 page for a small number of components, we will leave this as an option to explore in the future if needed.