前端错误监控

inapt 发布于2019-08-23 14:43 / 2480人阅读

摘要：前端错误监控一错误分类运行时错误这个错误往往是在写代码是造成的。我知道错误了在实际的使用过程中，主要是来捕获预料之外的错误，而则是用来在可预见情况下监控特定的错误，两者结合使用更加高效。

前端错误监控 一、错误分类

1.运行时错误：这个错误往往是在写代码是造成的。如语法错误、逻辑错误等，这种错误一般在测试过程也能够发现。

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

二、错误捕获

1.代码错误捕获

try…catch…

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

window.onerror

window.onerror = function() {
  //捕获错误  
}

/**
同步错误
 * @param {String}  msg    错误信息
 * @param {String}  url    出错文件
 * @param {Number}  row    行号
 * @param {Number}  col    列号
 * @param {Object}  error  错误详细信息
 */
 window.onerror = function (msg, url, row, col, error) {
  console.log("我知道错误了");
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
error

//异步错误
window.onerror = function (msg, url, row, col, error) {
  console.log("我知道异步错误了");
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
setTimeout(() => {
  error;
});

需要注意的是， window.onerror 函数只有在返回 true的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx 。

由于网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉到才行，但是这种方式虽然可以捕捉到网络请求的异常，但是无法判断 HTTP 的状态是 404 还是其他比如 500 等等，所以还需要配合服务端日志才进行排查分析才可以。

在实际的使用过程中， onerror 主要是来捕获预料之外的错误，而 try-catch 则是用来在可预见情况下监控特定的错误，两者结合使用更加高效。

2.资源加载错误

Object.onerror

var img=document.getElementById("#img");
img.onerror = function() {
  // 捕获错误  
}

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

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

三、错误上报

常见的错误上报有两种：ajax、image对象（推荐）

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

利用image对象

function report(error) {
var reportUrl = "http://xxxx/report";
new Image().src = reportUrl + "?" + "error=" + error;
}

四、跨域js文件错误获取

跨域js文件获取是有限制的，如果想获取其他域下的js错误需要再script标签中添加crossorgin属性，然后服务器要设置header("Access-Control-Allow-Origin");

// http://localhost:8080/index.html



// http://localhost:8081/test.js
setTimeout(() => {
  console.log(error);
});

GPU云服务器云服务器 java错误日志监控 js前端监控业务实时监控服务 ARMS 前端监控资源包有没有优惠从零开始搭建前端数据监控系统

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

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

一步一步搭建前端监控系统：JS错误监控篇

摘要：摘要徒手写错误监控。为什么用定时器呢，因为在单页应用中，路由的切换和地址栏的变化是无法被监控的，我确实没有想到特别好的办法来监控，所以用了这种方式，如果有人有更好的办法，请给我留言，谢谢。摘要：徒手写JS错误监控。作者：一步一个脚印一个坑原文：搭建前端监控系统（二）JS错误监控篇 Fundebug经授权转载，版权归原作者所有。背景：市面上的监控系统有很多，大多收费，对于...

EdwardUp 2019-08-23 18:30 评论0 收藏0
前端埋点 - 报错监控

摘要：说起埋点又到了谈起前端项目中数据收集与监控，那么今天来简单的聊下前端报错监控的埋点。错误监控的错误监控主要是为了发现服务接口返回值的问题。如果为，则侦听器只在目标或冒泡阶段处理事件。说起埋点又到了谈起前端项目中数据收集与监控，那么今天来简单的聊下前端报错监控的埋点。首先先安利下自己做的报错监控的项目 FE-Monitor 欢迎 issue 和 star 。首先我们可以看下前端做报...

stackfing 2019-08-23 18:37 评论0 收藏0
前端异常监控-看这篇就够了

摘要：前端异常监控如果是移除的流程，那么编程就一定是将放进去的流程。过滤掉运行时错误上报加载错误事件捕获异常最新的规范中定义了事件用于全局捕获对象没有处理器时异常情况。前端异常监控如果debug是移除bug的流程，那么编程就一定是将bug放进去的流程。如果没有用户反馈问题，那就代表我们的产品棒棒哒，对不对？主要内容 Web规范中相关前端异常异常按照捕获方式分类异常的捕获方式日志...

Aklman 2019-08-23 12:59 评论0 收藏0
一步一步搭建前端监控系统：如何定位前端线上问题？

摘要：一直以来，前端的线上问题很难定位，因为它发生于用户的一系列操作之后。当然，这些问题并非不能克服，让我们来一起看看如何去定位线上的问题吧。地址参考一步一步搭建前端监控系统错误监控篇一步一步搭建前端监控系统接口请求异常监控篇摘要：记录用户行为，排查线上BUG。作者：一步一个脚印一个坑原文：如何定位前端线上问题（如何排查前端生产问题） Fundebug经授权转载，版权归原作者所...

aaron 2019-08-23 18:41 评论0 收藏0
前端错误监控与收集探究

摘要：这样很容易造成大的损失，提前做好错误收集和处理，可以减少损失。编写代码只是做好项目的一小部分，写代码难免会碰到错误。因此，在项目上线后，我们还需要主动对项目的错误进行收集，不能等用户发现错误，再联系我们，我们再去处理。这样很容易造成大的损失，提前做好错误收集和处理，可以减少损失。本人并没有做过相关的工作，下面的文章只是我在学习中的一点思考和总结，可能有比较多不足和错误的地方，希望大...

ZoomQuiet 2019-08-22 16:02 评论0 收藏0