RFC: Default error component for App Router

[lforst]

Goals

1. Should enable users to define an error component without having to worry about creating an entire custom error page.

Non-Goals

1. Should NOT have any advanced or fancy features to define styling or layouting.
2. Should NOT influence routing in any way.

Background

The Pages router has a default error component that can be imported via:

import Error from "next/error"

This makes it very easy to create custom error pages (_error.tsx) that make use of the default Next.js styling and logic of the error page, but allows you to add additional functionality and side-effects like error reporting.

It would be neat to also have a default Error component that can be used in the App Router, so that users can add logic to their error.tsx and global-error.tsx components without having to worry about styling or particular logic.

The current default error component as exported from "next/error" is hard to use in the app router as of today because it has a required statusCode property. This required statusCode property comes from the fact that the pages router default error component is supposed to be used in combination with the _error page getInitialProps function which returns a status code. There is no place where you could derive a status code from in the App Router.

An interesting detail to mention would be that currently if no error or global-error components are defined in the App Router, Next.js will display the "next/error" Error component (without using a statusCode property).

Proposal

The easiest and in my humble opinion preferred solution would be to simply make the statusCode property of the current Error component optional. This would allow us to use the current next/error component in both routers without having to worry about additional functionality or docs. Making the statusCode property optional should be backwards compatible. This is what Next.js is currently doing as a fallback anyhow.

Alternative solutions:

• Create a different default error component for the App router.
• Provide some sort of onError export in error and global-error App Router components:

  // global-error.tsx
  
  'use client'
  
  // Note that no default export would be required.
  
  export function onError(error: Error): void {
    // Do your error reporting here.
  }