前端错误监控问题如何解决

这篇文章主要介绍“前端错误监控问题如何解决”,在日常操作中,相信很多人在前端错误监控问题如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”前端错误监控问题如何解决”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

10年的南郑网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整南郑建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“南郑网站设计”,“南郑网站推广”以来,每个客户项目都认真落实执行。

在当今的互联网时代,web开发越来越受到重视,网页能实现的功能也越来多,之前只能在客户端上运行的程序,也逐渐转到网页上,面对成千上万的用户,出现错误的概率也是越来大。项目上线前期的粒度较大的错误我们都会在自测和QA测试中发现,然而上线之后的错误就不是那么好发现。同时移动端的开发也面临着一个问题就是不好调试,所以web开发的错误监控是一个非常有用的措施。前端的错误监控有哪些方法呢。

一、错误分类

常见的web错误主要分为两类:

   1. 运行时错误:这个错误往往是我们在代码书写时造成的,比如语法错误、逻辑错误,这样的错误通常在测试阶段就会被发现,但是也可能存在“漏网之鱼”。

    2.资源加载错误:这个错误通常是找不到文件或者是文件加载超时造成的。

二、错误捕获

基于上面两种的错误类型,也有不同的错误捕获方式:

 1.代码错误捕获:

// try...catch...
try {

 // 运行可能出错的代码
} catch(e){

 // 捕获错误
}

// windown.onerror
window.onerror = function () {

 // 捕获错误

}

2. 资源加载错误

// Object.onerror
var img = document.getElementById('#img');
img.onerror = function () {

 // 捕获错误

}

利用window的Error事件代理,但是需要注意的是error事件是不冒泡的,我们可以使用事件捕获进行代理。

window.addEventListener("error",function(){
 // 捕获错误
},true);

三、错误上报

常见错误上报有两种: ajax、image对象(推荐)。

   ajax上报就是在上文注释错误捕获的地方发起ajax请求,来向服务器发送错误信息。

   利用image对象

(new Image()).src ="http://post.error.com?";

四、跨域js文件错误获取

跨域js文件获取是有限制的,如果想获取其他域下的js错误需要在script标签里添加crossorigin属性,

然后服务器端要设置

header('Access-Control-Allow-Origin: *');

到此,关于“前端错误监控问题如何解决”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网页标题:前端错误监控问题如何解决
网站链接:http://scyanting.com/article/jjiddg.html