前端监控-安全方面调研报告

技术分享

一. 异常处理

1. 异常类型

JS 语法错误、代码异常
AJAX 请求异常
静态资源加载异常
Promise 异常
Iframe 异常
跨域 Script error
崩溃和卡顿

2. 处理方案

1.可疑区域增加 Try-Catch
2.全局监控 JS 异常 window.onerror
3.全局监控静态资源异常 window.addEventListener
4.捕获没有 Catch 的 Promise 异常：unhandledrejection
5.VUE errorHandler 和 React componentDidCatch
6.监控网页崩溃：window 对象的 load 和 beforeunload
7.跨域 crossOrigin 解决

二. 异常数据采集

1. 采集途径

UI行为： 点击、滚动、聚焦/失焦、长按
浏览器行为：请求、前进/后退、跳转、新开页面、关闭
控制台行为：log、warn、error

2. 采集信息

一般信息：页面地址、时间、地理位置、浏览器、操作系统、网络
报警信息：错误来源、错误等级、业务模块、错误描述、影响范围

三. 异常数据上报

1. 即时上报

// 监听 js 异常
window.onerror = function(msg, url, row, col, error) {
    const data = {
        type: 'javascript',
        row: row,
        col: col,
        msg: error && error.stack? error.stack : msg,
        url: url,
        time: new Date().getTime(),
    }
    // 即时上报
    axios.post({ url: 'xxx', data, })
}

2. 统一上报

1. sendBeacon

window.addEventListener('visibilitychange', logData);
function logData() {
    navigator.sendBeacon("/log", analyticsData);
}

2.动态创建一个 <img / >标签将数据通过 url 拼接的方式传递。【1*1的gif】

四. 数据清洗

原因：
数据量大、体积大；
没有分类、聚合：同一类型的错误只是时间维度不同，没必要没条都去存储
没有对非法数据进行过滤：无用信息太多，不利于聚合

1. 数据存储方案

MySQL: 数据持久化存储
ES：数据临时存储

2. 清洗流程

获取数据 => 数据预处理 => 数据聚合

五. 错误报警

1. 错误监控

可视化展示

2. 错误报警

报警对象：项目参与者
报警类型：普通报警、升级报警
报警条件：连续M分钟，每分钟报错量大于N，其中M和N支持不同的项目配置
报警途径：邮箱，钉钉，企微，微信，电话，短信等【根据报警类型来确定】