createError from server middleware does not use /error.vue

[Gábor Horn]

Environment

---

• Operating System: Linux
• Node Version: v18.20.3
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@10.2.3
• Builder: -
• User Config: devtools
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-cjjdsq

Describe the bug

In the test repo we throw createError from two different places in server. By default the error is thrown from server/middleware/healthcheck.ts and it displays the default nitro(?) error page, NOT /error.vue

If we comment out the throw createError line in the above file and call the "/test" route, then the server/route/test.ts page throws the error, and now the custom /error.vue page is used.

As I understand from the docs, in both cases the full page error should use the /error.vue .

Additional context

No response

Logs

No response

[StackBlitz]

Start a new pull request in StackBlitz Codeflow.

• github-cjjdsq (Open reproduction)

[Daniel Roe]

The reason is that middleware also runs when trying to render the error page. Thus the error page can't render and it falls back to nitro error page.

You can whether you are rendering an error page by checking whether event.path starts with /__nuxt_error.

[Gábor Horn]

Thanks a lot for the feedback! If anybody else runs into this, here is the minimal working solution:

// server/middleware/healthcheck.ts
export default defineEventHandler(async (event) => {
  if (!event.path.startsWith('/__nuxt_error')) {
    throw createError({ message: 'Error from middleware', statusCode: 422 });
  }
});