💸 Tech debt - Multiple Error pages

Description

There are three variants of the error page in the project:

• components/util/error/error.tsx
• components/util/error/error-page.tsx
• app/error.tsx

Reason

In Next.js, the Pages Router provides a custom 500 error page. However, as of this writing, there is no equivalent functionality for 500-level error handling in the App Router. As a result, we need separate variants of the error page to accommodate both routing systems.

For example:

• An App Router component for handling 404 errors & client-side exceptions
• A Pages Router component for 500-level responses.

Proposed Solution

• Monitor updates to the App Router for any new functionality supporting 500-level error handling. Keep an eye on the following discussion in particular: Next.js GitHub discussion #52378.
• When an app router component for handling 500 level responses becomes available, consolidate all of the error pages into one.

Compare components/util/error/error.tsx, components/util/error/error-page.tsx, and app/error.tsx to understand the three variants and their router roles. Review Next.js discussion #52378 for App Router 500-level error support; the work is done when that support exists and the variants can be consolidated into one error page.