6

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

1 回答 1

2

此答案仅与 SSR 模式有关。

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

  • 动态路由错误
  • 数据获取期间的错误（nuxt >= 2.12，fetchhook）

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

根据关于生命周期的 Nuxt 文档，有一个特殊的validate钩子。主要目的是验证动态路由参数。
在这里您可以找到更详细的描述，但通常您需要提供在参数有效和无效时validate应该返回的实现。 如果nuxt 将返回带有默认错误页面的 404 响应（您还可以在验证函数执行期间抛出预期或意外错误以及自定义默认错误页面）。 这里的重要说明：truefalse
false

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

动态路由的错误处理 [选项 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 文档说：

如果在获取数据时出现错误，则不会加载正常的 Nuxt 错误页面 - 您不应在 fetch() 中使用 Nuxt 重定向或错误方法。相反，您需要在组件中使用 $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 响应代码的正常情况。

于 2021-12-17T22:13:49.390 回答