在本地处理Vue渲染错误

Question

我正在使用带有Mjml的Vue（服务器端渲染）来生成电子邮件。

所以我有一些（过于简化）的东西：

<mjml><mj-body>Hello {{ User.Name }}</mj-body></mjml>

如果模型未定义User，则Vue会引发错误，并且整个输出会丢失。

我想要输出的内容大致如下：

<mjml><mj-body>Hello <error>'User' is undefined</error></mj-body></mjml>

我已经实现了Vue.config.errorHandler，但这只是告诉我有关错误-没有呈现的输出。

是否围绕每个变量替换实现等效的错误处理程序？

Answer 1

如果您使用的Vue版本> = 2.5，则可以使用errorCaptured创建一个ErrorBoundary

const ErrorBoundary = {
  name: 'ErrorBoundary',
  data: () => ({
    error: false,
    msg: ''
  }),
  errorCaptured (err, vm, info) {
    this.error = true
    this.msg = `${err.stack}\n\nfound in ${info} of component`
  },
  render (h) {
    return this.error 
      ? h('pre', this.msg) 
      : this.$slots.default[0]
  }
}

并在您的组件中使用它

  <error-boundary>
    <mjml><mj-body>Hello {{ User.Name }}</mj-body></mjml>
  </error-boundary>

如果应用程序出现任何JavaScript错误，它将显示在用户界面上

codepen上的示例

如果您想拥有更多用户友好的错误，则可以自定义ErrorBoundary以回退到另一个组件。您可以在this tutorial

中找到

使用errorHandler的另一good example