All Projects → MriLiuJY → Monitorfe

MriLiuJY / Monitorfe

Licence: mit
🍉前端埋点监控,提供前端 JS 执行错误,第三方资源加载异常,Ajax 请求错误监控

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Monitorfe

gochanges
**[ARCHIVED]** website changes tracker 🔍
Stars: ✭ 12 (-93.68%)
Mutual labels:  monitor, monitoring-tool
tmo-live-graph
A simpe react app that plots a live view of the T-Mobile Home Internet Nokia 5G Gateway signal stats, helpful for optimizing signal.
Stars: ✭ 15 (-92.11%)
Mutual labels:  monitor, monitoring-tool
ExDeMon
A general purpose metrics monitor implemented with Apache Spark. Kafka source, Elastic sink, aggregate metrics, different analysis, notifications, actions, live configuration update, missing metrics, ...
Stars: ✭ 19 (-90%)
Mutual labels:  monitor, monitoring-tool
Myperf4j
High performance Java APM. Powered by ASM. Try it. Test it. If you feel its better, use it.
Stars: ✭ 2,281 (+1100.53%)
Mutual labels:  monitor, monitoring-tool
Owl
distributed monitoring system
Stars: ✭ 794 (+317.89%)
Mutual labels:  monitor, monitoring-tool
Clearly
Clearly see and debug your celery cluster in real time!
Stars: ✭ 287 (+51.05%)
Mutual labels:  monitor, monitoring-tool
leek
Celery Tasks Monitoring Tool
Stars: ✭ 77 (-59.47%)
Mutual labels:  monitor, monitoring-tool
Iglance
Free system monitor for OSX and macOS. See all system information at a glance in the menu bar.
Stars: ✭ 1,358 (+614.74%)
Mutual labels:  monitor, monitoring-tool
Monitoror
Unified monitoring wallboard — Light, ergonomic and reliable monitoring for anything.
Stars: ✭ 3,400 (+1689.47%)
Mutual labels:  monitor, monitoring-tool
Hastic Server
Hastic data management server for analyzing patterns and anomalies from Grafana
Stars: ✭ 292 (+53.68%)
Mutual labels:  monitor, monitoring-tool
Laravel Api Health
Monitor first and third-party services and get notified when something goes wrong!
Stars: ✭ 65 (-65.79%)
Mutual labels:  monitor, monitoring-tool
Container Monitor
容器监控方案汇总
Stars: ✭ 107 (-43.68%)
Mutual labels:  monitor, monitoring-tool
Remotemonitor
本项目是一个利用HslCommunication组件读取PLC的示例项目,演示了后台从PLC循环读取到前台显示,并推送给在线客户端,客户端同步显示并画实时曲线图。支持web端同步的数据显示,支持web端远程操作PLC,安卓端数据显示,远程操作PLC
Stars: ✭ 160 (-15.79%)
Mutual labels:  monitor
Urlwatch
urlwatch monitors webpages for you
Stars: ✭ 2,294 (+1107.37%)
Mutual labels:  monitor
Perfmonbar
Displays performance counters on the Windows Taskbar
Stars: ✭ 161 (-15.26%)
Mutual labels:  monitor
Seagull
Friendly Web UI to manage and monitor docker
Stars: ✭ 1,904 (+902.11%)
Mutual labels:  monitor
Lunar
Intelligent adaptive brightness for your external monitors
Stars: ✭ 2,712 (+1327.37%)
Mutual labels:  monitor
Siem
SIEM Tactics, Techiques, and Procedures
Stars: ✭ 157 (-17.37%)
Mutual labels:  monitor
Visualvm
VisualVM is an All-in-One Java Troubleshooting Tool
Stars: ✭ 2,084 (+996.84%)
Mutual labels:  monitoring-tool
React Intersection Observer
React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
Stars: ✭ 2,689 (+1315.26%)
Mutual labels:  monitor

MonitorFE

前端埋点监控SDK,一款开箱即用的前端报错监控的埋点SDK。仅需开发埋点接口即可监控收集整个前端项目在运行的时候产生的js内部报错,资源加载异常,接口返回报错,样式丢失的问题。

项目在 SDK 内监听全局 error 错误信息,ajax 错误信息,以及监听资源加载,在页面出现报错的情况下直接向埋点接口上报错误信息,监控前端项目的稳定性。

English document

设计目的

1.方便更多的前端开发快速接入前端埋点。

2.为更多中小型的项目增加前端的报错监控。

3.作为一款开源产品帮助更多的项目提升稳定性。

MonitorFE

使用

配置项

用于传入 initMonitor 的配置项。

属性 参数 默认值 可选值 说明
method String POST POST,GET 埋点上报请求方法
url String - - 埋点上报url地址
id String - - 标识当前用户
record Boolean false - 是否录制用户操作用于回放

可以直接 下载 SDK 引入自己项目中即可使用。(dist/js)目录下的打包文件。

引入方式

npm 下载

npm install fe-monitor-sdk

或者你可以使用淘宝 NPM 镜像安装:

npm install fe-monitor-sdk --registry=https://registry.npm.taobao.org

使用

var initMonitor = require("fe-monitor-sdk");

var config = {}
  // your config
};
initMonitor(config, function(monitor) {
  // your code...
  // 销毁实例
  monitor._destory();
});

另外,浏览器并不支持 CommonJS 规范,因此需要使用 Browserify 或者 Webpack 等工具进行打包。

js 文件引入

同源的情况下可以直接引入自己的项目中,注意请使用最新的 SDK 以获取更好的效果。

<script src="https://test.com/monitor.0.0.1-beta.js"></script>

<script>
var config = {}
  // your config
};
initMonitor(config, function(monitor) {
  // your code...
  // 销毁实例
  monitor._destory();
});
</script>

如果 JS 放在 CDN 上需要单独引入的情况下需要一些额外的 code 。

<script>
var config = {}
  // your config
};
    
var script = document.createElement("script");
// 注意不加这个 crossOrigin 会造成第三方引入的资源无法收集页面报错详情
script.crossOrigin = "anonymous";
script.src = `https://test.com/monitor.0.0.1-beta.js`;
document.body.appendChild(script);
script.addEventListener('load', (e) => {
  initMonitor(config, function(monitor) {
    // your code...
    // 销毁实例
    monitor._destory(); 
  });
});
</script>

项目在v0.0.3 版本之后加入 rrweb 录制回放功能,可以通过配置传入 initMonitor 的 config 中的 record 的值来选择是否开启录制,如果传值为 true 的情况下每次错误都会上报收集到的数据用于回放错误复现。

请注意开启 rrweb 会有部分兼容问题请注意:

由于使用 MutationObserver API,rrweb 不支持 IE11 以下的浏览器。可以从这里找到兼容的浏览器列表。

项目架构

首先v0.1.0版本设计目的是为了做完整的异常监控,使得前端具备资源加载异常,js运行报错,样式丢失,接口返回异常的捕获能力。

目录结构:

├── config // webpack 配置文件
├── dist   // 打包输出文件目录
├── public // 公共文件目录
├── server // server
├── src    // 项目文件目录
├── test
  • JS-SDK具备获取平台信息的能力
  • 获取报错详情与报错的时间
  • 当前的url(完整带参数)
  • 用户可以自定义上传的参数

开发

自动生成changelog 需要在本地下载:

npm install -g conventional-changelog-cli

License

MIT

Copyright (c) 2019 MriLiuJY

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].