NuxtErrorBoundary leaving a blank screen | Nuxt | Page 1

I have this in my layouts/dashboard.vue file:

<NuxtErrorBoundary>
  <slot />

  <template #error="{ error }">
    <h2>An error occurred when loading this page.</h2>
    <p>Error: {{ error.message }}</p>
  </template>
</NuxtErrorBoundary>

A page throws this error (see screenshot 1) so I was hoping the NuxtErrorBoundary would catch that and stop it from bubbling up. But it doesn't, so nothing is rendered at all (see screenshot 2).

I did this to verify if NuxtErrorBoundary was indeed "seeing" that there's an error in it's tree:

<NuxtErrorBoundary
  @error="
    (error: unknown) => {
      console.log(error);
    }
    "
>
...
</NuxtErrorBoundary>

... and it does log the error. So, I'm confused.

Am I using NuxtErrorBoundary wrong, or does it not support catching this kind of error?

Screenshot_2024-09-03_at_11.44.08_AM.png

Screenshot_2024-09-03_at_11.45.25_AM.png

Obviously, I can fix the type error in the code by doing null checks, but this error made me think about using NuxtErrorBoundary to catch unexpected errors that I may not know about during development.

#NuxtErrorBoundary leaving a blank screen