pcaaron / fe-monitor Goto Github PK
View Code? Open in Web Editor NEW前端监控系统搭建,monitor system build for frontend
License: MIT License
前端监控系统搭建,monitor system build for frontend
License: MIT License
GitHub:https://github.com/getsentry/sentry-javascript
官网:https://sentry.io/for/javascript/
sentry:开源,前端框架友好,支持SourceMap
需结合客户端和服务端,客户端为需要监控的前端项目,服务端则是一个数据管理平台,支持收集错误信息和项目信息等,服务端平台可以自建亦可直接使用sentry官方平台(说明:到达一定使用次数后收费)。
sentry是一个开源项目,服务端平台可以自建亦可直接使用sentry官方平台
npm install --save @sentry/browser
yarn add @sentry/browser
入口文件配置sentry
import Vue from 'vue'
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations' // Vue使用需配置
// 开发环境禁止使用sentry,开启会导致Vue组件错误忽略,因@sentry/integrations通过自定义Vue的errorHandler钩子实现,会导致停止激活Vue本身logError
// 配置完成,则sentry默认会上报页面所有未被捕获的错误,例如window.onerror,promise
if(process.env.NODE_ENV !== 'development'){
Sentry.init({
dsn: 'xxx', // 新建项目后,DSN是链接上报项目和sentry服务端的key
integrations: [
new Integrations.Vue({
Vue,
attachProps: true, // 默认为true。如果将其设置为false,Sentry将禁止发送所有Vue组件的活动组件的名称和props状态 。
logErrors: true // 默认为true。如果将其设置为false,Sentry将禁止发送所有Vue组件的活动组件的名称和props状态 。
})
]
})
通过基本的引入初始化sentry后就可以进行对一些未被捕获的错误,window.onerror,promise异常上报。
try {
aFunctionThatMightFail();
} catch (error) {
// 方式一:上报error对象或类对象
Sentry.captureException(error);
}
// 方式二:上报文本信息
Sentry.captureMessage('Something went wrong');
sentry提供了上下文信息定义:用户信息user,事件标签tags,事件分组规则fingerprint,附加数据extra data和事件严重等级level。
并且提供了sentry.configScope和sentry.withScope来设置信息到全局作用域和当前事件。
Sentry.configureScope(scope => scope.setUser(null));
Sentry.withScope(function(scope) {
scope.setTag("my-tag", "my value");
scope.setLevel('warning');
// will be tagged with my-tag="my value"
Sentry.captureException(new Error('my error'));
});
提供了@sentry/webpack-plugin,webpack插件方式;
sentry-cli提供上传脚本
sentry API配置方式上传。
说明,sentry上传的sourcemap方法为同步上传,会导致上线变慢,需优化为异步上传。
Sentry.init({
dsn: 'xxx',
beforeSend(event, hint) {
// Check if it is an exception, and if so, show the report dialog
if (event.exception) {
Sentry.showReportDialog({ eventId: event.event_id });
}
return event;
}
});
GitHub:https://github.com/BetterJS/badjs-report
bad.js提供了:错误拦截,上报错误,离线错误日志存储
bad.js注释源码: https://github.com/rico-c/Front-End-Monitoring/blob/master/badjs-sourcecode-explain.js
npm install badjs-report
配置说明
BJ_REPORT.init({
id: 1, // 上报 id, 不指定 id 将不上报
uin: 123, // 指定用户 id, (默认已经读取 qq uin)
delay: 1000, // 延迟多少毫秒,合并缓冲区中的上报(默认)
url: "//badjs2.qq.com/badjs", // 指定上报地址
ignore: [/Script error/i], // 忽略某个错误
random: 1, // 抽样上报,1~0 之间数值,1为100%上报(默认 1)
repeat: 5, // 重复上报次数(对于同一个错误超过多少次不上报)
// 避免出现单个用户同一错误上报过多的情况
onReport: function(id, errObj){}, // 当上报的时候回调。 id: 上报的 id, errObj: 错误的对象
submit: null, // 覆盖原来的上报方式,可以自行修改为 post 上报等
ext: {}, // 扩展属性,后端做扩展处理属性。例如:存在 msid 就会分发到 monitor,
offlineLog : false, // 是否启离线日志 [默认 false]
offlineLogExp : 5, // 离线有效时间,默认最近5天
});
非开源,付费
支持JavaScript执行错误,HTTP请求错误,unhandledrejection,webSocket,sourceMap和敏感信息过滤(class='_fun-hide')
npm install fundebug-javascript fundebug-vue --save
入口配置
import * as fundebug from "fundebug-javascript";
import fundebugVue from "fundebug-vue";
fundebug.init({
apikey: "API-KEY"
})
fundebugVue(fundebug, Vue);
错误拦截
静态资源加载错误 && js错误捕获
实现方式: window.addEventListener('error',fn),通过监听error错误事件,其中,静态资源可解析出e.target.src || e.target.href,js错误可解析msg,track,filename,lineno,colno等信息
promise错误捕获
实现方式:window.addEventListener(' unhandledrejection ',fn),来监听promise抛出的reject
接口异常
实现方式:通过接口拦截
上报错误
离线错误日志存储
错误路径回放
日志可视化后台
压缩文件源码定位
实现方式:通过source-map包SourceMapConsumer方法解析上传的map文件
邮箱(短信)提醒
浏览器端 JavaScript 异常监控 : https://myslide.cn/slides/1031
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.