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