代码之家 › 专栏 › 技术社区 › Rob Walker

本地处理Vue呈现错误

vue.js

Rob Walker · 技术社区 · 6 年前

我使用vue(服务器端渲染)和mjml生成电子邮件。

所以我有一些东西(过度简化)比如:

<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 但这只是告诉我错误——没有呈现的输出。

无论如何,要在每个变量替换周围实现等效的错误处理程序吗?

0 回复 | 直到 6 年前

ittus 6 年前

如果您使用的是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错误,它将显示在ui上

例 codepen

如果希望出现更友好的错误,可以自定义errorboundary,使其回退到另一个组件。你可以在 this tutorial

另一 good example 使用的 errorHandler

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前