Nuxt•3mo ago

NuxtErrorBoundary leaving a blank screen

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>

<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>

<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?

1 Reply

Gyen AbubakarOP•3mo ago

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. UPDATE: Found a workaround; not sure how much of a bad practise this is 1. I rewrote the error boundary code:

<!--
  - showError() is a Nuxt function already available via auto-import.
  - Docs: https://nuxt.com/docs/getting-started/error-handling#showerror
-->
<NuxtErrorBoundary @error="showError">
  <slot />
</NuxtErrorBoundary>

<!--
  - showError() is a Nuxt function already available via auto-import.
  - Docs: https://nuxt.com/docs/getting-started/error-handling#showerror
-->
<NuxtErrorBoundary @error="showError">
  <slot />
</NuxtErrorBoundary>

2. I created a error.vue file beside app.vue:

<script setup lang="ts">
import type { NuxtError } from '#app';
import DashboardLayout from '~/layouts/dashboard.vue';
import AuthLayout from '~/layouts/auth.vue';
import DefaultLayout from '~/layouts/default.vue';
import { BonfoPageError } from '~/components/_bonfo';

const props = defineProps({
  error: Object as () => NuxtError,
});

console.dir(props.error);

const route = useRoute();

const Layout = computed(() => {
  switch (route.meta.layout) {
    case 'dashboard':
      return DashboardLayout;
    case 'auth':
      return AuthLayout;
    default:
      return DefaultLayout;
  }
});
</script>

<template>
  <Layout>
    <BonfoPageError
      title="Oops 😬, that was unexpected."
      description="An error occurred while trying to load this page. You can trust that we are working hard to fix it."
    />
  </Layout>
</template>

<script setup lang="ts">
import type { NuxtError } from '#app';
import DashboardLayout from '~/layouts/dashboard.vue';
import AuthLayout from '~/layouts/auth.vue';
import DefaultLayout from '~/layouts/default.vue';
import { BonfoPageError } from '~/components/_bonfo';

const props = defineProps({
  error: Object as () => NuxtError,
});

console.dir(props.error);

const route = useRoute();

const Layout = computed(() => {
  switch (route.meta.layout) {
    case 'dashboard':
      return DashboardLayout;
    case 'auth':
      return AuthLayout;
    default:
      return DefaultLayout;
  }
});
</script>

<template>
  <Layout>
    <BonfoPageError
      title="Oops 😬, that was unexpected."
      description="An error occurred while trying to load this page. You can trust that we are working hard to fix it."
    />
  </Layout>
</template>

This gives me the behaviour I want.

Gaming

Programming

NuxtErrorBoundary leaving a blank screen