业务线接入前端异常监控sentry
what?(前端监控是什么)
对线上代码的异常排查,一般分为下面三个点:
- js的异常采集的方式
- js异常的上报方式
- 统计异常监控上报的常见问题
why?(为什么要有前端异常监控)
- 随着移动互联网的快速发展,互联网获取流量的渠道越来越多样化。前端的应用场景不在局限于网页,通常是网页、公众号、安卓端、ios都有涉及。这样的话很多边界问题完全依赖于后端的监控和测试阶段的测试是完全不够的。
- 用系统化的报错采集替代人工上报。以便于获得更快速的异常收集。
How?(怎么做)
js的异常处理方式
收集异// try-catch 异常处理
// try-catch 在我们的代码中经常见到,通过给代码块进行 try-catch 进行包装后,当代码块发生出错时 catch 将能捕捉到错误的信息,页面也将可以继续执行。
// 但是 try-catch 处理异常的能力有限,只能捕获捉到运行时非异步错误,对于语法错误和异步错误就显得无能为力,捕捉不到。
try
{
error
// 未定义变量
}
catch
(e) {
console.log(
'我知道错误了'
);
console.log(e);
}
----------------------------------------------------------------------------------------------------------------------------
// window.onerror 异常处理
// 无论是异步还是非异步错误,onerror 都能捕获到运行时错误。
// 另外 onerror 是无法捕获到网络异常的错误
window.onerror =
function
(msg, url, row, col, error) {
console.log(
'我知道错误了'
);
console.log({
msg, url, row, col, error
})
return
true
;
};
new
Error(
'111'
)
- js异常的上报方式
- 根据定义好的数据格式,利用ajax发送数据
根据定义好的数据格式,利用img标签发送数据
// 数据格式示例
{
// 错误日志信息
msg:
''
,
url:
''
,
// 错误来源页面url
line:
''
,
// 错误行数
col:
''
,
// 错误列数
stack:
''
,
from:
''
,
// 错误来源
"navigator.userAgent"
:
''
,
//浏览器信息
ret: {},
// 解析source map后原始准确定位数据
evtMoniter: []
//用户行为保存数组,保存最近10次行为操作
}
- 统计异常监控上报的常见问题
上报后的数据后台对对应的数据进行存储分类,根据不同项目不同种类的错误进行统计。 超过一定数量可以设置报警等级制。
现有的前端异常处理的服务商
搭建sentry服务
entry有两种安装方式,一种是利用docker安装,另外一种是配置pathon环境。官网推荐用docker,下面主要介绍docker渠道的安装。
依赖环境
构建容器
- 克隆仓库 getsentry/onpremise.
创建对应目录
mkdir -p data/{sentry,postgres}
获取项目的Key, 拷贝最后一行的key
docker-compose run --rm web config generate-secret-key
打开docker-compose.yml, 将key考到 SENTRY_SECRET_KEY 后面
vim docker-compose.yml
创建项目的superuser,根据提示一次填写
docker-compose run --rm web upgrade
开启 sentry 服务,就可以进入自己的sentry啦, http:://ip:9000 即可进入你的 sentry
docker-compose up -d
nginx配置
server {
listen
80
;
server_name yusidi.sentry.com;
location / {
proxy_pass http:
//127.0.0.1:9000;
}
}
利用sentry来改善你的工作流程
创建新的项目:
选择对应的框架:
记住项目对应的dsn点击确定
将dns中的域名替换成我们jiazheng.daojia.com
sourcemap上传:
// webpack接入 var SentryCliPlugin = require( '@sentry/webpack-plugin' ) plugins:[ new SentryCliPlugin({ include: 'dist/js' , ignoreFile: '.sentrycliignore' , ignore: [ 'node_modules' , 'webpack.config.js' ], configFile: 'sentry.properties' }), ] 根目录创建文件夹.sentryclirc [auth] token=f99aebfed9734d8fa5cc834f80c53a6a6e8a268471e749acbea5c25941115f35 [defaults] org=jiazheng project=daily-clean url=https: //jz-homer.daojia-inc.com/ |
homer API
error
homer.error(
new
Error(
111
))
info
homer.info(
'用户aaa'
)
业务线接入前端异常监控sentry的更多相关文章
- [转] vue前端异常监控sentry实践
1. 监控原理 1.1 onerror 传统的前端监控原理分为异常捕获和异常上报.一般使用onerror捕获前端错误: window.onerror = (msg, url, line, col, e ...
- 从无到有<前端异常监控系统>落地
导火索 有一天一个测试同事的一个移动端页面白屏了,看样子是页面哪里报错了. 我自己打开页面并没有报错,最后发现报错只存在于他的手机,移动端项目又是在微信环境下,调试起来会比较麻烦,最后用他手机调试才 ...
- 前端异常监控 - BadJS
前端异常监控 - BadJS 简介:BadJS 是 web 前端异常监控解决方案,提供一种 web 页面的脚本错误监控.上报.统计.查看等系统化的跟踪解决方案.目前BadJS覆盖了腾讯课堂.公众号.邮 ...
- Fundebug前端异常监控插件更新至2.0.0,全面支持TypeScript
摘要: 是时候支持TS了! Fundebug前端异常监控服务 Fundebug提供专业的前端异常监控服务,我们的插件可以提供全方位的异常监控,可以帮助开发者第一时间定位各种前端异常,包括但不限于Jav ...
- Fundebug前端异常监控插件更新至 1.9.0,支持监控 HTTP 慢请求
摘要: 1.9.0新增 httpTimeout 配置选项,支持监控 HTTP 慢请求,同时修复了记录的 HTTP 响应时间偏小的 BUG. Fundebug提供专业的前端异常监控服务,可以第一时间捕获 ...
- 【原】聊聊js代码异常监控
在平时的工作,js报错是比较常见的一个情景,尤其是有一些错误可能我们在本地测试的时候测试不出来,当发布到线上之后才可以发现,如果抢救及时,那还好,假如很晚才发 现,那就可能造成很大的损失了.如果我们前 ...
- 前端性能监控方案window.performance 调研(转)
1. 业界案例 目前前端性能监控系统大致为分两类:以GA为代表的代码监控和以webpagetest为代表的工具监控. 代码监控依托于js代码并部署到需监控的页面,手动计算时间差或者使用浏览器的的API ...
- 前端异常日志监控 - 使用Sentry
背景 现在的前端项目越来越复杂,在不同的客户端会产生各种在开发人员机器上不会出现的问题.当用户报告一个问题给开发人员的时候,开发人员无法直接定位问题.在此前,听过一次鹅厂的前端人员,他们对QQ里面的网 ...
- vue+sentry 前端异常日志监控
敲代码最糟心不过遇到自己和测试的环境都OK, 客户使用有各种各样还复现不了的问题,被逼无奈只能走到这一步:前端异常日志监控! vue官方文档如下推荐: 就是说, vue有错误机制处理errorHand ...
随机推荐
- Unity Technologies-提供全面的技术支持服务
Unity Technologies-提供全面的技术支持服务 在收费服务是由Unity大华区面向研发企业推出的一项技术支持服务,以全中文的方式进行,为研发团队解答在使用Unity引擎过程中遇到的各类问 ...
- manacher最长回文子串
https://www.luogu.org/blog/codesonic/manacheralgorithm 先放上洛谷的链接,毕竟讲的真好 两道例题 luogu4555 SP7586 inline ...
- java基础 关于转换流
转换流有两种:InputStreamReader:将字节流转换为字符流 OutputStreamWriter:将字符流转换为字节流 什么时候使用转换流?由以下分析: 流对象很多,首先要明确那个流对象. ...
- 一些C语言基础知识
位运算 // 按位与&: 2 & 3 = 2: 010 & 011 = 010 两个1才为1 // 按位或|: 2 | 3 = 3: 010 | 011 = 011 只 ...
- mysql—常用查询语句总结
关于MySQL常用的查询语句 一查询数值型数据: ; 查询谓词:>,=,<,<>,!=,!>,!<,=>,=< 二查询字符串 SELECT * FROM ...
- luogu P5322 [BJOI2019]排兵布阵
传送门 普及dp 设\(f_{i,j}\)表示前\(i\)个城堡,用\(j\)人的最大价值,转移枚举一个对手,如果这个对手在\(i\)这个城堡人数是第\(k\)小的,那么用\(2a_i+1\)人可以得 ...
- jmeter使用csv传参进行并发测试验证
1.获取到注册接口,添加HTTP信息头管理器.HTTP请求,设置好入参,且检查使用csv文件传参的入参 2.创建csv文件,写入需要传的入参 3.添加CSV Data Set Config 设置配置 ...
- anylogic 常用模块及术语的使用
1.1 存量 创建存量变量 1. 在调色板视图下的Model页面中选择Stock 元素. 2. 在图形化编辑器中您所期望的位置点击鼠标,放置该存量. 3. 在属性视图下的Equation部分中,定义该 ...
- nb-iot简介【转】
转自:http://www.elecfans.com/tags/nb-iot/ 标签 > nb-iot nb-iot 关注 118人关注 提供NB-IoT技术特点,NB-IoT模块/芯片,NB- ...
- 如果想让某个块状元素右对齐,脑子里不要就一个float:right,很多时候,margin-left:auto才是最佳的实践