一个element.__vue__引发的馒头

最近出现了一个测试环境页面卡死的问题,打开页面一会之后就死掉了,如下图所示:

因为一打开页面就卡住了,控制台也卡得比较厉害,动不了,所以不太好调试,在卡死之际Chrome提示是内存超了:

怀疑是有个死循环造成的,通过Chrome提供的调用栈发现可能和加入的sentry上报错误插件有关(sentry是一个前端错误追踪上报的库),这个插件会监听Vue.config.errorHandler以上报错误:

猜测是这个插件引起的,注释掉之后果然好了。

把测试环境的数据mock到本地复现,经过一番debug,发现原因是这样的。

sentry会把Vue组件的props取出来进行normalize格式化,如下代码所示:

格式化的目的主要是为了上报,如下图所示:

在这个格式化里面出了问题,它会递归遍历所有prop的属性,并且会访问有没有toJSON函数:

如果你把某一个组件的根DOM元素(this.$el)传给了另一个组件作为prop,这个时候这个元素就会被遍历到,包括这个元素的所有子属性都会被遍历到,由于Vue会给根元素添加一个__vue__属性指向当前组件,如下图所示:

导致当前组件的所有属性会被访问到,组件里面又有一个proxy,是vue用来处理template里访问到data里面没写的属性报一个警告:

当访问它的toJSON属性时就会触发Vue错误:

这个时候又触发了errorHandler,errorHandler里面又访问了toJSON,这样循环触发,就卡死了。

为啥Vue要在DOM节点放一个__vue__属性呢,根据尤大的说法是devtool会使用到:

To some extent yes – the official devtool relies on it too, so it’s unlikely to change or break.

当然sentry的设计也有缺陷,应该避免这种循环上报。sentry另外一个循环上报的表现是如果它本身的ajax上报挂了,且在需要上报的域名里面没有滤掉它本身上报的域名,就会导致循环上报。

在新版的sentry(5.12,我当前使用的是5.1)里可以看到已经做了修改,加了一个递归深度为3:

到了那个proxy的时候深度变成0了,就不会继续往下走访问到toJSON了:

进而避免了这种情况。

发表评论

电子邮件地址不会被公开。