NuxtErrorBoundary leaving a blank screen

I have this in my

layouts/dashboard.vue

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>

<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

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

NuxtErrorBoundary

was indeed "seeing" that there's an error in it's tree:

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

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

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

Am I using

NuxtErrorBoundary

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

Nuxt•2y ago•

2 replies

Gyen Abubakar

NuxtErrorBoundary leaving a blank screen

I have this in my

layouts/dashboard.vue

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>

<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

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

NuxtErrorBoundary

was indeed "seeing" that there's an error in it's tree:

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

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

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

Am I using

NuxtErrorBoundary

NuxtErrorBoundary

wrong, or does it not support catching this kind of error?

NuxtErrorBoundary leaving a blank screen

Similar Threads

NuxtErrorBoundary leaving a blank screen

Similar Threads

Similar Threads

Similar Threads