Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kisslove/web-monitoring
前端监控，性能监控平台。前端监控平台专注于Web端体验数据监控。对网页健康状况的三个方面进行监测：页面打开速度（速度测量）、页面稳定性（JS错误）和外部服务调用成功率（API）。
https://github.com/kisslove/web-monitoring
api-service jserrors monitoring pagespeed web-application web-monitoring
Last synced: about 2 months ago
JSON representation
前端监控，性能监控平台。前端监控平台专注于Web端体验数据监控。对网页健康状况的三个方面进行监测：页面打开速度（速度测量）、页面稳定性（JS错误）和外部服务调用成功率（API）。
- Host: GitHub
- URL: https://github.com/kisslove/web-monitoring
- Owner: kisslove
- Created: 2018-05-16T06:43:38.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-02-20T03:30:19.000Z (7 months ago)
- Last Synced: 2024-07-11T00:24:02.586Z (2 months ago)
- Topics: api-service, jserrors, monitoring, pagespeed, web-application, web-monitoring
- Language: JavaScript
- Homepage: https://hubing.online
- Size: 19.6 MB
- Stars: 992
- Watchers: 29
- Forks: 191
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# web-monitoring
### [功能列表]
- [x] 允许用户创建多个监测站点
- [x] 从不同维度统计用户访问情况
- [x] 自定义查询时间
- [x] 多种图表展示
- [x] 支持自定义上报（js错误，api请求，性能信息）
- [x] 用户访问路径追踪
- [x] 自定义阈值(注册用户)
- [x] 自动报警功能，发送报警邮件提醒(注册用户)
------
### [技术支持]
- [x] 前端：Angular5+,ant-design
- [x] 后端：Nodejs+Express
- [x] 数据库：Mongoose+MongoDB
- [x] Docker：一键部署Docker环境
------
前端监控平台专注于 Web 端体验数据监控。监测 Web 页面的健康度的三个方面：
> * 页面打开速度（测速）
> * 页面稳定性（JS Error）
> * 外部服务调用成功率（API）
然后从不同纬度去分析用户体验。
> - 访问页面
> - 访问速度
> - API请求
> - 地理
> - 终端
参考：
> http://fex.baidu.com/blog/2014/05/build-performance-monitor-in-7-days
> 阿里云前端监控
### 页面打开速度
网络耗时数据可以借助前面提到 Navigation Timing 接口获取，与之类似的还有Resource Timing,可以获取页面所有静态资源的加载耗时。通过此接口可以轻松获取 DNS、TCP、首字节、html 传输等耗时，Navigation Timing 的接口示意图如下所示：
### API请求
默认情况下，使用XMLHTTP拦截用户请求，在请求成功/失败后，统计时间，上报请求。
用户可使用**__ml.api(api,success, time, code, msg)**手动上报。
```javascript
api:请求接口
success:上传是否成功(true/false )
time:耗时(ms)
code:返回码
msg:消息(string/object)
```
### JS错误
默认情况下，使用window.onError去监听用户错误脚本，自动上报。
用户使用的有些前端框架会捕获js错误，错误信息不会抛至window.onError,这种情况需用户手动调用。
例如在Angular2+，在你的框架全局捕获错误的地方调用**__ml.error(errorObj)**
```javascript
export class MyErrorHandler implements ErrorHandler {
handleError(error) {
console.error(error);
window.__ml && window.__ml.error && window.__ml.error(error.stack || error);
}
}
@NgModule({
declarations: [],
imports: [],
providers: [{ provide: ErrorHandler, useClass: MyErrorHandler }],
bootstrap: []
})
export class AppModule { }
```
在Vue:
```javascript
import Vue from 'vue'
const errorHandler = (error, vm)=>{
console.error(error);
window.__ml && window.__ml.error && window.__ml.error(error);
}
Vue.config.errorHandler = errorHandler;
Vue.prototype.$throw = (error)=> errorHandler(error,this);
```
### 如何使用(easy!!!)
网页地址：WEB-MONITOR
第一步：在监控站点中创建一个站点。
第二步：复制应用配置中的探针到你需要监控的站点（index.html）页面。大功告成！
### 贡献者支持
您的支持，是我们最大的前进动力。
支付宝：
微信：
