当前页面的脚本发生错误 一篇讲透自研的前端错误监控

11/27 21:21:36 来源网站:辅助卡盟网

采集聚合端(日志服务器)

这个环节,输入是接口接收到的错误记录,输出是有效的数据入库。核心功能需要对数据进行清洗,顺带解决了过多的服务压力。另一个核心功能是对数据进行入库。

总体流程可以看为错误标识 -> 错误过滤 -> 错误接收 -> 错误存储。

错误标识(SDK配合)

聚合之前,我们需要有不同维度标识错误的能力,可以理解为定位单个错误条目,单个错误事件的能力。

单个错误条目

通过date和随机值生成一条对应的错误条目id。

const errorKey = `${+new Date()}@${randomString(8)}`

function randomString(len) {  
    len = len || 32;
    let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
    let maxPos = chars.length;
    let pwd = '';  
    for (let i = 0; i < len; i++) {    
        pwd += chars.charAt(Math.floor(Math.random() * maxPos));  
    }  
    return pwd;

单个错误事件

首先需要有定位同个错误事件(不同用户,发生相同错误类型、错误信息)的能力。

gocom打开oa提示 当前网页的脚本发生错误_当前页的脚本发生错误怎么办_当前页面的脚本发生错误

通过message、colno与lineno进行相加计算阿斯克码值,可以生成错误的errorKey。

const eventKey = compressString(String(e.message), String(e.colno) + String(e.lineno))

function compressString(str, key) {
    let chars = 'ABCDEFGHJKMNPQRSTWXYZ';
    if (!str || !key) {
        return 'null';
    }
    let n = 0,
        m = 0;
    for (let i = 0; i < str.length; i++) {
        n += str[i].charCodeAt();
    }
    for (let j = 0; j < key.length; j++) {
        m += key[j].charCodeAt();
    }
    let num = n + '' + key[key.length - 1].charCodeAt() + m + str[str.length - 1].charCodeAt();
    if(num) {
        num = num + chars[num[num.length - 1]];
    }
    return num;

如下图,一个错误事件(事件列表),下属每条即为实际的错误条目。

当前页面的脚本发生错误_gocom打开oa提示 当前网页的脚本发生错误_当前页的脚本发生错误怎么办

错误过滤(SDK配合)

域名过滤

过滤本页面script error,可能被webview插入其他js。

我们只关心自己的远端JS问题,因此做了根据本公司域名进行过滤。

// 伪代码
if(!e.filename || !e.filename.match(/^(http|https):\/\/yun./)) return true 

重复上报

怎么避免重复的数据上报?根据errorKey来进行缓存,重复的错误避免上报的次数超过阈值。

// 伪代码

const localStorage = window.localStorage;
const TIMES = 6; // 缓存条数

export function setItem(key, repeat) {
    if(!key) {
        key = 'unknow';
    }
  
    if (has(key)) {
        const value = getItem(key);
        
       // 核心代码,超过条数,跳出
        if (value >= repeat) {
            return true;
        }
        storeStorage[key] = {
            value: value + 1,
            time: Date.now()
        }
    } else {
        storeStorage[key] = {
            value: 1,
            time: Date.now()
        }
    }
    return false;

错误接收

在处理接收接口的时候,注意流量的控制,这也是后端开发需要投入最多精力的地方,处理高并发的流量。

错误记录

接收端使用Koa,简单的实现了接收及打印到磁盘。

// 伪代码

module.exports = async ctx => {
  const { query } = ctx.request;
  
  // 对于字段进行简单check 
  check([ 'mobile''network''ip''system''ua', ......], query);

  ctx.type = 'application/json';
  ctx.body = { code: '1', msg: '数据上报成功' };

  // 进行日志记录到磁盘的代码,根据自己的日志库选择
}; 

削峰机制

比如每秒设置2000的阈值,然后根据请求量减少上限,定时重置上限。

// 伪代码

// 1000ms
const TICK = 1000;
// 1秒上限为2000
const MAX_LIMIT = 2000;
// 每台服务器请求上限值
let maxLimit = MAX_LIMIT;

/**
 * 启动重置函数
 */
const task = () => {
  setTimeout(() => {
    maxLimit = MAX_LIMIT;
    task();
  }, TICK);
};
task();

const check = () => {
  if (maxLimit <= 0) {
    throw new Error('超过上报次数');
  }
  maxLimit--;
  // 执行业务代码。。。
}; 

采样处理

超过阈值,还可以进行采样收集。

// 只采集 20%
if(Math.random() < 0.2) {
  collect(data)      // 记录错误信息

错误存储

对于打印在了磁盘的日志,我们怎么样才能对于其进行聚合呢,这里得考虑使用存储方案。

一般选择了存储方案后,设置好配置,存储方案就可以通过磁盘定时周期性的获取数据。因此我们需要选择一款存储方案。

gocom打开oa提示 当前网页的脚本发生错误_当前页面的脚本发生错误_当前页的脚本发生错误怎么办

对于存储方案,我们对比了日常常见方案,阿里云日志服务 - Log Service(SLS)、ELK(Elastic、Logstash、Kibana)、Hadoop/Hive(将数据存储在 Hadoop,利用 Hive 进行查询) 类方案的对比。

从以下方面进行了对比,最终选择了Log Service,主要考虑为无需搭建,成本低,查询功能满足。

功能项ELK 类系统Hadoop + Hive日志服务

日志延时

1~60 秒

几分钟~数小时

实时

查询延时

小于 1 秒

分钟级

小于 1 秒

查询能力

扩展性

提前预备机器

提前预备机器

秒级 10 倍扩容

成本

较高

较低

很低

日志延时:日志产生后,多久可查询。查询延时:单位时间扫描数据量。查询能力:关键词查询、条件组合查询、模糊查询、数值比较、上下文查询。扩展性:快速应对百倍流量上涨。成本:每 GB 费用。

具体API使用,可查看日志服务[2]。

可视分析端(可视化平台)

当前页面的脚本发生错误_gocom打开oa提示 当前网页的脚本发生错误_当前页的脚本发生错误怎么办

这个环节,输入是接口接收到的错误记录,输出是有效的数据入库。核心功能需要对数据进行清洗,顺带解决了过多的服务压力。另一个核心功能是对数据进行入库。

主功能

这部分主要是产品功能的合理设计,做到小而美,具体的怎么聚合,参考阿里云SLS就可以。

首页图表,可选1天、4小时、1小时等等,聚合错误数,根据1天切分24份来聚合。首页列表,聚合选中时间内的数据,展示错误文件、错误key、事件数、错误类型、时间、错误信息。错误详情,事件列表、基本信息、设备信息、设备占比图表(见上面事件列表的图)。

当前页的脚本发生错误怎么办_当前页面的脚本发生错误_gocom打开oa提示 当前网页的脚本发生错误

image.png排行榜

刚开始做了待处理错误列表、我的错误列表、已解决列表,错误与人没有绑定关系,过于依赖人为主动,需要每个人主动到平台上处理,效果不佳。

后面通过错误作者排行榜,通过钉钉日报来提醒对应人员处理。紧急错误,通过实时告警来责任到人,后面告警会说。

具体原理:

gocom打开oa提示 当前网页的脚本发生错误_当前页的脚本发生错误怎么办_当前页面的脚本发生错误

image.pngSourceMap

利用webpack的hidden-source-map构建。与 source-map 相比少了末尾的注释,但 output 目录下的 index.js.map 没有少。线上环境避免source-map泄露。

webpackJsonp([1],[
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  function(e,t,i){...},
  ...
])
// 这里没有生成source-map的链接地址 

根据报错文件的url,根据团队内部约定好的目录和规则,定位之前打包上传的sourceMap地址。

const sourcemapUrl = ('xxxfolder/' + url + 'xxxHash' +'.map'

获取上报的line、column、source,利用第三方库sourceMap进行定位。

const sourceMap = require('source-map')

// 根据行数获取源文件行数
const getPosition = async(map, rolno, colno) => {
  const consumer = await new sourceMap.SourceMapConsumer(map)

  const position = consumer.originalPositionFor({
    line: rolno,
    column: colno
  })

  position.content = consumer.sourceContentFor(position.source)

  return position

当前页的脚本发生错误怎么办_当前页面的脚本发生错误_gocom打开oa提示 当前网页的脚本发生错误

感兴趣SourceMap原理的,可以继续深入,SourceMap 与前端异常监控[3]。

错误报警报警设置每条业务线设置自己的阈值、错误时间跨度,报警轮询间隔通过钉钉hook报警到对应的群通过日报形式报出错误作者排行榜

当前页的脚本发生错误怎么办_gocom打开oa提示 当前网页的脚本发生错误_当前页面的脚本发生错误

image.png四、扩展行为搜集

通过搜集用户的操作,可以明显发现错误为什么产生。

gocom打开oa提示 当前网页的脚本发生错误_当前页的脚本发生错误怎么办_当前页面的脚本发生错误

分类搜集方式点击行为

使用addEventListener监听全局上的click事件,将事件和DOM元素名字收集。与错误信息一起上报。

发送请求

来源:【九爱网址导航www.fuzhukm.com】 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

    暂无相关资讯
当前页面的脚本发生错误 一篇讲透自研的前端错误监控