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

[appdcs]

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

[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

[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