如何处理 Nuxt SSR 错误并显示自定义 404 || 500 页？答案

【问题标题】：How to handle Nuxt SSR errors and show custom 404 || 500 pages?如何处理 Nuxt SSR 错误并显示自定义 404 || 500 页？
【发布时间】：2020-02-08 01:30:06
【问题描述】：

当 Nuxt 的 SSR 遇到错误时如何处理错误？

目前我正在使用error() 处理程序，但它在生产中不起作用？这是我的 Nuxt 应用的示例。

异步数据

 async asyncData({ store, route, error }) {
    return store.dispatch( NAMESPACES.USERS + ACTIONS.GET_DETAIL, userId ).then(response => ({
      data: response,
    })).catch((e) => {
      error(e)
    })
  }

错误.vue

  <vis-container>
    <vis-row class="error">
      <vis-col md="8" class="error__component">
        <component :is="errorPage" :error="error.statusCode" />
      </vis-col>

      <vis-col md="8" class="error__contact">
        <p class="error__contact__title">{{ $t('error_page.question') }}</p>
      </vis-col>
    </vis-row>
  </vis-container>
</template>

<script>
export default {
  props: ['error'],
components: {
    NotFound: () => import('@/components/error/NotFound'),
    InternalServerError: () => import('@/components/error/InternalServerError'),
  },
    computed: {
    errorPage() {
      if (this.error.statusCode === 500) {
        return 'InternalServerError'
      }

      return 'NotFound'
    },
  },
}
</script>

【问题讨论】：

标签： server-side-rendering nuxt.js vue-ssr nuxtserverinit

【解决方案1】：

此答案仅与 SSR 模式有关。

有不同的可能类型的错误。我将在此处提供有关其中 2 种类型的信息：

动态路由中的错误
数据提取期间的错误（nuxt >= 2.12, fetch hook）

动态路由的错误处理 [选项 1]：

根据 Nuxt docs about lifecycle 有一个特殊的 validate 钩子。它的主要目的是验证动态路由参数。
Here你可以找到更详细的描述，但通常你需要提供validate实现，当参数有效时应该返回true，当参数有效时返回false不是。
在false 的情况下，nuxt 将返回带有默认错误页面的 404 响应（您还可以在验证函数执行期间抛出预期或意外错误以及自定义默认错误页面）。
重要提示：

此方法将上下文对象作为参数。

动态路由的错误处理 [选项 2]：

每当你需要在 Nuxt 中为服务端渲染的页面返回不同的状态码时，你就需要使用中间件。

这是主要的想法——你必须定义你自己的中间件来验证这里的 url（可能里面有异步逻辑）。

import { Context } from "@nuxt/types";
import { isUrlValid } from "~/services/validateRoute";

export default async function (context: Context) {
  if (!(await isUrlValid(context.route.path))) {
    context.error({
      statusCode: 404,
      message: `Invalid route: ${context.route.path}`,
    });
  }
}

并且要让它工作，它应该链接到相应的动态路由页面：

import Vue from "vue";
import Component from "vue-class-component";
@Component({
  middleware: "validateRoute",
})
export default class RedirectPage extends Vue {}

工作应用示例在这里：https://github.com/DamirsCorner/20210521-nuxt-dynamic-route-404

来源：https://www.damirscorner.com/blog/posts/20210521-404PageForNuxtDynamicNestedRoutes.html

数据获取错误处理：

Nuxt docs 说：

如果取数据时出错，正常的Nuxt错误页面不会被加载 - 你不应该使用 Nuxt 重定向或错误 fetch() 中的方法。相反，您需要在你的组件使用 $fetchState.error。

所以，这很简单：

<template>
  <div>
    <p v-if="$fetchState.pending">Loading....</p>
    <p v-else-if="$fetchState.error">Error while fetching mountains</p>
    <ul v-else>
      <li v-for="(mountain, index) in mountains" :key="index">
        {{ mountain.title }}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mountains: []
      }
    },
    async fetch() {
      this.mountains = await fetch(
        'https://api.nuxtjs.dev/mountains'
      ).then(res => res.json())
    }
  }
</script>

从这个例子中你可以看到你不能改变响应码，因为那个阶段的错误会被解释为正常情况，有 200 个响应码。

【讨论】：