在 Nuxt 错误页面中访问原始错误对象

Question

如here 所述，Nuxt.js 错误页面传递了一个error 属性，该属性可用于确定错误是什么并显示适当的内容。

但是，传递的错误对象看起来像：

{
  message:"Cannot read property 'nonexistentThing' of undefined",
  statusCode:"TypeError"
}

我想对错误页面采取行动（点击错误报告 API），理想情况下，该页面可以访问底层错误对象，包括回溯等。

有没有办法

• 从错误页面访问它；或
• 制作一个插件，在 Nuxt 自己的错误处理运行时拦截错误？

Answer 1

虽然我没有找到访问底层错误对象的方法，但我从 nuxt 找到了这个错误方法，您可以在其中抛出异常，最终显示在 Nuxt 的错误页面中。您可以在上下文对象中访问此错误方法（https://nuxtjs.org/api/context/）

包含异常的示例错误可能是这样的：

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', myError: e })
      })
  }
}

那么你可以像这样在错误页面中处理异常

<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'],
  mounted() {
    const { statusCode, message, myError } = this.error;
    // send myError to error-reporting API
  }
}
</script>