Add mechanism to customize Nuxt's default Fallback error pages (for Nitro)

[appdcs]

Environment

• Operating System: Darwin
• Node Version: v20.10.0
• Nuxt Version: 3.12.3
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: npm@10.2.3
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-bf8y4g?file=server%2Fmiddleware%2Fsample.js

Describe the bug

The error page that is displayed when there are server errors is not editable and doesn't get replaced by error.vue:

Additional context

The documentation about Error Page has been followed but it doesn't seem to apply to the 500 error described

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-bf8y4g (Open reproduction)

[danielroe]

If there is an error rendering the error page then we fall back to a static page. Your middleware means that it throws an error even when rendering the error page. Check the page route/path first.

[appdcs]

Hi @danielroe, thank you for your comment.
Could you please clarify what you mean by "Check the page route/path first" ?

That middleware is causing an error on purpose, outside of any pages.

What I was trying to point out is that the fallback error page we see pictured in my first comment, and linked in the reproduction Stackblitz, is not related to error.vue, and even if editable in some way, not documented on the Nuxt website.

Those fallback templates are provided by @nuxt/ui-templates (https://github.com/nuxt/nuxt/tree/main/packages/ui-templates).

Also seems to be imported here: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/core/runtime/nitro/error.ts#L67
How can I customize those fallback error page templates?

Thank you

[appdcs]

Alright, so I have changed the title of this issue to better represent my current understanding of how these pages work.

That 'fallback error page', which is not to be confused with the Error Page (i.e.: error.vue), is handled by the configured Nitro error handler.

As per https://vuejs.org/api/application.html#app-config-errorhandler, https://nuxt.com/docs/getting-started/error-handling#vue-errors and https://nitro.unjs.io/config#errorhandler, a new error handler can be provided in nuxt.config.js.

I truly couldn't find an example online, so I took upon myself to try it on this online code editor: https://stackblitz.com/edit/github-bf8y4g-7iqjdn?file=server%2Ferror.ts

This is the result:

Hopefully this helps someone else.

---

The new request for this issue:
Nuxt team, it would be fantastic if the page templates imported in /packages/nuxt/src/core/runtime/nitro/error.ts#L67 could be provided directly in nuxt.config.json