浅谈前端中的错误捕获

li21 发布于2019-08-22 18:21 / 2666人阅读

摘要：浅谈前端中的错误捕获某一天用户反馈打开的页面白屏幕，怎么定位到产生错误的原因呢日常某次发布怎么确定发布会没有引入呢此时捕获到代码运行的并上报是多么的重要。

浅谈前端中的错误捕获

某一天用户反馈打开的页面白屏幕，怎么定位到产生错误的原因呢？日常某次发布怎么确定发布会没有引入bug呢？此时捕获到代码运行的bug并上报是多么的重要。

既然捕获错误并上报是日常开发中不可缺少的一环，那怎么捕获到错误呢？万能的try...catch

try{
  throw new Error()
} catch(e) {
  // handle error
}

看上去错误捕获是多么的简单，然而下面的场景下就不能捕获到了

try {
    setTimeout(() => {
        throw new Error("error")
    })
} catch (e) {
    // handle error
}

你会发现上面的例子中的错误不能正常捕获，看来错误捕获并不是这样简单try...catch就能搞定,当然你也可以为异步函数包裹一层try...catch来处理。

浏览器中，window.onerror来捕获你的错误

window.onerror = function (msg, url, row, col, error) {
    console.log("error");
    console.log({
        msg,  url,  row, col, error
    })
};

捕获到错误后就可以将错误上报，上报方式很简单，你可以通过创建简单的img,通过src指定上报的地址，当然为了避免上报发送过多的请求，可以对上报进行合并，合并上报。

但但你去看错误上报的信息的时候，你会发现一些这样的错误Script error

因为浏览器的同源策略，对于不同域名的错误，都抛出了Script error，怎么解决这个问题呢？特别是现在基本上js资源都会放在cdn上面。

解决方案

1：所有的资源都放在同一个域名下。但是这样也会存在问题是不能利用cdn的优势。

2：增加跨域资源支持，在cdn 上增加支持主域的跨域请求支持，在script 标签加crossorigin属性

idc机房托管私有云捕获错误 php捕获错误 js 捕获错误 php捕获错误信息

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95777.html

浅谈前端中的错误处理

摘要：如何避免内存泄露内存泄漏很常见，特别是前端去写后端程序，闭包运用不当，循环引用等都会导致内存泄漏。有的时候很难避免一些可能产生内存泄漏的问题，可以利用每次调用都在一个沙箱环境下调用，用完回收调。某一天用户反馈打开的页面白屏幕，怎么定位到产生错误的原因呢？日常某次发布怎么确定发布会没有引入bug呢？此时捕获到代码运行的bug并上报是多么的重要。既然捕获错误并上报是日常开发中不可缺少的...

ShowerSun 2019-08-22 18:34 评论0 收藏0
浅谈前端中的错误处理

摘要：如何避免内存泄露内存泄漏很常见，特别是前端去写后端程序，闭包运用不当，循环引用等都会导致内存泄漏。有的时候很难避免一些可能产生内存泄漏的问题，可以利用每次调用都在一个沙箱环境下调用，用完回收调。某一天用户反馈打开的页面白屏幕，怎么定位到产生错误的原因呢？日常某次发布怎么确定发布会没有引入bug呢？此时捕获到代码运行的bug并上报是多么的重要。既然捕获错误并上报是日常开发中不可缺少的...

BothEyes1993 2019-05-28 17:09 评论0 收藏0
浅谈---事件冒泡--事件捕获--Vue2.0中的capture

摘要：直白点事件触发顺序子元素父元素事件冒泡和事件捕获图解标准事件监听标准事件监听其实是事件冒泡和事件捕获的混合体任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达。前言本文主要介绍事件冒泡和事件捕获以及Vue中的capture 主要内容事件捕获含义:从最特定的事件目标到最不特定的事件目标(document对象...

Raaabbit 2019-08-20 17:07 评论0 收藏0
浅谈事件冒泡与事件捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。 Click me! 上面的代码当中一个div元素当中有一个p子元素，如果两个元素都有一个cli...

zhunjiee 2019-08-21 10:21 评论0 收藏0
JavaScript-浅谈DOM事件流

摘要：事件流指的是从页面接收事件的顺序。级事件规定方法的第三个参数设为，表示事件在捕获阶段触发。目前支持事件捕获流的浏览器有，，，，。事件流根据级事件规定，事件流应该包括三个阶段，事件捕获阶段，处于目标阶段和事件冒泡阶段。什么是事件？（敲黑板）事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。（by 《JavaScript高级程序设计》）比如鼠标点击，双击，滚动条滑动... 什么是事件...

haitiancoder 2019-08-20 10:49 评论0 收藏0