Question

我正在尝试按照与记录的here类似的模式创建Vue错误处理组件。它基本上是一个包装器，它使用errorCaptured生命周期挂钩来检测其子组件中的错误。如果发现错误，它将隐藏传递到其插槽中的内容并显示一条错误消息。很简单像这样：

ErrorBoundary.vue

<template>
 <div>
   <slot v-if="!err"></slot>
   <h1 v-else>Oopsy</h1>
 </div>
</template>

<script>
export default {
  name: 'errorBoundary',
  data(){
    return {err: false};
  },
  errorCaptured(err){
     this.err = true;
     console.log(err);
  }
}
</script>

我遇到的问题是errorCaptured无法捕获在其自身组件范围内引发的错误。例如，这里什么也没有捕获和记录。

ErrorThrower.vue

<template>
 <div>Some content</div>
</template>

<script>
export default {
  name: 'errorThrower',
  created(){
     throw new Error();
  },
  errorCaptured(err){
     console.log(err);
  }
}
</script>

如果上面的示例捕获了错误，那么我可以向ErrorBoundary组件添加一个重试属性，并接受内容作为插槽。像这样：

ErrorThrower.vue

<template>
  <ErrorBoundary :onRetry="loadContent">
    <div>Some content</div>
  </ErrorBoundary>
</template>

<script>
export default {
  name: 'errorThrower',
  created(){
     this.loadContent();
  },
  methods: {
    loadContent(){
      // make some call that fails
    }
  }
}
</script>

不幸的是，由于插入的内容与ErrorBoundary组件在同一范围内，因此此操作不起作用。

如果ErrorThrower是子组件，ErrorBoundary将记录错误并显示一条消息，因为现在ErrorThrower捕获了errorCaptured的错误。

SomeParent.vue

<template>
 <error-boundary>
   <error-thrower/>
 </error-boundary>
</template>

如何在ErrorBoundary的错误消息中包含重试按钮，如果需要，该按钮将重试一些失败的异步操作？理想情况下，我想传递回调以使错误组件重试错误。

了解如何在错误边界组件中实现重试按钮

0 个答案: