简单学习5种处理Vue.js异常的方法

错误大全

为了测试各种异常处理技巧，我故意触发了三种类型的错误。

类型一：引用一个不存在的变量：

div id=' app ' v-斗篷hello，{{name}}/div上面的代码运行后不会抛出错误，但控制台上会出现[Vue warn]消息。

您可以在Codepen中查看该示例的完整代码。

其次，将变量绑定到计算属性，并在计算时引发异常。

div id=' app ' v-OutLook HellO，{ { name 2 } }/div script const app=new Vue({ El : ' # app '，computed : { name 2(){ return x；} } } })/运行上述代码的脚本会在控制台抛出一个[Vue warn]和一个常规错误，网页为空。

您可以在Codepen中查看该示例的完整代码。

第三：执行引发异常的方法

div id=' app ' v-斗篷按钮@ click=' DoIt ' do It/button/divscriptconst app=new Vue({ El : ' # app '，methods : { DoIt(){ return x；}}})/script此错误也在控制台[Vue warn]和例程中报告。与前一个错误的区别在于，只有当您单击按钮时，才会触发函数调用并报告错误。

您可以在Codepen中查看该示例的完整代码。

在继续之前，我想声明以上三个例子并不代表所有类型的错误。这三种错误是常见的。

好吧，我们应该如何处理异常？我很惊讶Vue的文档中没有关于异常处理的章节。

是的，文件中有一条，但介绍极其简短。

如果在组件呈现期间出现运行错误，该错误将被传递给全局Vue.config.errorHandler配置函数(如果设置)。最好使用这个钩子函数来配合错误跟踪服务。例如，Sentry为Vue提供了官方集成。

P.S .的国内BUG监控服务Fundebug也为Vue提供官方集成。我个人建议官方详细介绍一下。一般来说，Vue中的异常处理包括以下技巧：

错误处理程序警告处理程序呈现错误错误捕获窗口。出错时(不仅仅是Vue)技巧1:错误处理程序

我们应该学习的第一个技能是errorHandler。您可能知道，这是Vue中使用最广泛的异常处理方法。

Vue . config . error handler=function(err，vm，info) {} err指的是错误对象，info是Vue的唯一字符串，VM指的是Vue应用程序本身。请记住，一个页面上可以有多个Vue应用程序。这个错误处理程序作用于所有应用程序。

vue . config . error handler=function(err，vm，info){ console . log(` error : $ { err . tostring()} \ ninfo : $ { info } `)；}第一个错误不会触发errorHandler，它只是一个警告。

第二种类型的错误抛出一个由errorHandler捕获的错误：

错误：引用错误：x未定义信息：渲染第三个错误也将被捕获：

错误：引用错误：x未定义信息：v-on处理程序对于记住信息中的信息也非常有用。

提示2:警告处理程序

WarnHandler用于捕获Vue警告。请记住，它在生产环境中不起作用。

vue . config . warn handler=function(msg，vm，trace) {} msg和VM很容易理解，trace代表组件树。请参见以下示例：

vue . config . warn handler=function(msg，vm，trace){ console . log(` warn : $ { msg } \ ntrace : $ { trace } `)；}第一个错误被warnHandler捕获：

警告：属性或方法“名称”未在实例上定义，但在呈现期间被引用。通过初始化属性，确保该属性在数据选项或基于类的组件中是反应性的。参见： https://vuejs。org/v2/指南/反应性。html #声明-反应-属性。trace:(在root中找到)您可以检查三个示例：的实际操作

第一个：例1

第二个：例2

第三：例3

提示3:渲染错误

与前两种不同，这种技术不适用于全局情况，并且与组件相关。并且只适用于非生产环境。

下面是一个简单的例子：

const app=newvue的第一个示例({el:' # app '，rendererror (h，err) {return h ('pre '，{style: {color3360' red'})，err。stack)})没有效果，因为它只是一个警告。第二个示例将在网页上显示特定的错误消息：示例代码

说实话，我觉得这并不比直接看控制台好多少。但是，如果您的质量保证团队或测试人员不熟悉浏览器控制台，这是非常有用的。

技能4:错误捕获

ErrorCaptured是与Vue相关的最后一个技术，这让我很困惑，但我还是不明白。文件是这样的：

当捕获到来自后代组件的错误时调用。这个钩子接收三个参数：错误对象、发生错误的组件实例和包含错误源信息的字符串。该钩子可以返回false，以防止错误继续向上传播。

根据我的分析，这个错误处理程序只能处理父组件中子组件的错误。据我所知，我们不能在Vue的主实例中直接使用它。

为了测试，我构建了以下示例：

Vue.component('cat '，{ template : ` div h1 cat :/h1 slot/div `, prop : { name : { required d : true，type:String}}，errorCaptured(err，vm，info){ console . log(` cat EC : $ { err . tostring()} \ ninfo : $ { info } `)；返回false}});Vue.component('kitten '，{ template : ' div h1 kitten : { { dontexist()} }/h1/div '，prop : { name : { required d : true，type : string } } })；注意kitten组件代码中的BUG。

div ID=' app ' v-斗篷猫名称='我的猫'小猫/小猫/猫/div捕获的信息如下：

卡特彼勒EC :类型错误：不存在不是函数信息：渲染以下是正在运行的实例。

ErrorCaptured是一个非常有趣的特性，构建组件库的开发人员应该使用它。这个特性更像是面向组件的开发人员，而不是一般的开发人员。

终极技能： window.onerror

最后一个也是最重要的候选是window.onerror，它是一个全局异常处理函数，可以抓取所有的JavaScript异常。

窗户。onerror=function (message，source，line，column，error) {}我认为function的参数中只有source从字面上很难理解，它代表的是当前的URL。

然后事情会更有趣。如果定义了onerror但没有启用Vue.config.errorHandler，那么有很多异常是无法捕获的。Vue希望您定义它，否则不会抛出异常。这有意义吗？我不太明白。我觉得没必要，甚至有点奇怪。

如果在定义errorHandler的代码中有BUG，那么它在运行时不会被onerror捕获。在下面的例子中，如果您注释OOP sididityrepeat()，您会发现这个问题。只有第二个按钮没有绑定到Vue，所以无论如何都会捕捉到错误。运行实例

摘要

如开头所说，这是我第一次写这方面的文章。也希望得到大家的反馈，包括意见、建议和修改。希望大家分享一下具体的使用方法的例子。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。