Если вы в последнее время работали с Nuxt, вы знаете, насколько мощным, крутым и востребованным он является. Это, безусловно, лучшая среда для Vue, чтобы начать работу с вашим следующим SPA.

А затем бац, вы попадаете в ошибку javascript, и вам открывается серая страница ошибок nuxt по умолчанию с меткой nuxtjs в нижнем левом углу.

Половина вашего сайта отсутствует, и вам осталось обновить страницу, потому что все функции на этом этапе вышли из строя.

Поиск в Google "пользовательской страницы ошибок в nuxt" только приводит к проблемам с github, которые не приблизят вас к решению вашей проблемы. Лучше всего просто в RTFM. Да, прочтите это дерьмовое руководство. Я усвоил это на собственном горьком опыте, ха!

Итак, чтобы вам было проще, я обрисовал в общих чертах, что вам нужно сделать ниже:

Шаг 1. Работа с ошибками

Как указано в документации nuxt, вы можете вызвать error внутри asyncData(), чтобы вернуть обратно в nuxt хорошо отформатированную ошибку.

export default {
  asyncData ({ params, error }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  }
}

Шаг 2. Создайте собственную страницу ошибок

Вот тут-то и становится немного странно. Схема nuxt docs, в которой вы должны создать собственный макет, однако, это не макет. Ему просто нужно там жить.

Не включайте <nuxt /> в этот файл шаблона, относитесь к нему как к обычному просмотру страницы. Объект ошибки передается через props.

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>
<script>
export default {
  props: ['error'],
  layout: 'blog' // you can set a custom layout for the error page
}
</script>

Вспомните вызов, который мы ранее выполняли для error error({ statusCode: 400, message: 'Post not found' }); Теперь у объекта error есть statusCode и message, которые мы можем использовать.

<h1 v-if="error.statusCode === 404">Page not found</h1>

Вот и все, вы можете проверить это, перейдя по маршруту, которого нет в вашем приложении nuxt, и вы должны получить новую страницу пользовательской ошибки.

Бонусный раунд

Если вы похожи на меня, вам нужно будет настроить некоторые дополнительные компоненты для управления различными состояниями ошибок. Это также сохраняет наш код красивым и чистым.

./layouts/error.vue

<template>
  <div class="nuxt-error">
    <component :is="errorPage" :error="error" />
  </div>
</template>
<script>
import error404 from '~/components/error/404.vue';
import error500 from '~/components/error/500.vue';
export default {
  name: 'nuxt-error',
  layout: 'default', // optional
  props: {
    error: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    errorPage() {
      if (this.error.statusCode === 404) {
        return error404;
      }
      // catch everything else
      return error500;
    },
};
</script>

./components/error/404.vue

<template>
  <div class="error-404">
    <h1>This page doesn’t exist</h1>
    <p>The link you clicked on may be broken or no longer exist.</p>
  </div>
</template>
<script>
export default {
  name: 'error-404',
  props: {
    error: {
      type: Object,
      default: () => {},
    },
  },
};
</script>

Вот и все!

Идите вперед и изящно выявляйте ошибки и заставляйте их выглядеть потрясающе!