Error 500 (from template) rendered instead of 404 (from createErrror)

[some-user123]

Environment

---

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-rc.8
• Package Manager: npm@7.17.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-8gwl3q?file=app.vue

Describe the bug

If useAsyncData returns an error, throw createError(...) doesn't work properly. Template errors are being caused and error 500 is rendered.

Actual:

• Error 500 (Cannot read properties of undefined (reading 'attr')) is rendered if template uses state.attr
• Error 500 (Cannot read properties of undefined (reading 'something')) is rendered if template uses data.something
• Error 404 is rendered if template doesn't access state.attr nor data.something

Expected:

• Error 404 should be rendered in all cases

Additional context

#13788

Logs

No response

[Aareksio]

While easily mitigated by v-if="data" and similar conditions, this is a major DX downgrade from Nuxt 2 experience where we could throw error in asyncData and not have to worry about template or computed accessing properties of undefined.

[danielroe]

There is an upstream issue that breaks Nuxt after a rendering error: vuejs/core#6110.

The fix here is relatively simple but I'll need to defer it until the upstream bug is fixed in Vue core (or until we can workaround it again in Nuxt).

[misaon]

@danielroe Is there any workaround to get around the error at this point?