# frontend-monitorjs
> Front-end exception monitoring
Latest version **1.1.2** (published 2019-09-17) · ISC license · 0 weekly downloads
## Install
```sh
npm install frontend-monitorjs
pnpm add frontend-monitorjs
yarn add frontend-monitorjs
bun add frontend-monitorjs
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.2 |
| Published | 2019-09-17 |
| First published | 2019-09-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 39.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | wujiang |
| Maintainers | wowowowj |
| Keywords | front-end, exception, monitor, javascript |
## Links
- npm: https://www.npmjs.com/package/frontend-monitorjs
- Repository: https://github.com/NightLighting/front-monitor
- Homepage: https://github.com/NightLighting/front-monitor#readme
- Issues: https://github.com/NightLighting/front-monitor/issues
- npm.io page: https://npm.io/package/frontend-monitorjs
## Recent versions
- 1.1.2 (latest) — 2019-09-17
- 1.1.1 — 2019-09-16
- 1.1.0 — 2019-09-16
## README
# front-monitor
## 前端异常监控解决方案
对于运行在浏览器环境下的前端页面，通常可能出现的异常情况可分类列为：
* 语法错误
* 运行时同步异常
* 运行时异步异常
* Promise Unhandledrejection
* 资源加载失败
* 异步请求状态异常
> 其中语法错误不用过多关注，由于其在开发阶段在IDE下就能获得明确提示，而且无法通过构建(对于有构建阶段的项目而言)。
> Promise Unhandledrejection 在通常情况下没有提供足够有用的异常信息，也无法确定开发人员是否关心此Promise调用链的意外结果，因此可作为监听异常中的可选项。
### 运行时异常
对于运行时异常，上报错误信息，脚本链接地址和错误代码所在的行与列，如果代码在上线前已经经过压缩混淆，则在拿到上报信息之后，需要找到脚本对应的map文件，结合source-map分析工具进行进一步的定位，所以确保脚本文件的链接中含有指纹码或其他类型的版本信息。
### 资源加载失败
对于资源加载相关的异常信息，需要注意的是在监控行为初始化完成之后才能捕获(通常的优化建议包含将页面上的所有脚本至于body底部)，对于前端渲染为主的项目而言几乎没有影响，服务器直出的项目则根据需要提升脚本在页面结构中的位置。
此外，某些浏览器环境下，没有append到真实DOM树中的DOM片段所发起的资源请求失败会被忽略。
### 异步请求状态异常
对于异步请求状态异常，我们hook了原生的XMLHttpRequest原型对象，并暂时不考虑低版本IE浏览器下的ActiveXObject，如果使用了第三方库作为AJAX方案，建议进行足够的测试保证它们仍能正常运作。
某些场景下，脚本可能会产生大量的异常，例如在`scroll`,`resize`之类高频执行的回调中抛出的错误，或者循环中发起请求等(可能是由无意或BUG导致)，因此异常上报需要有一定的过滤机制，例如缓冲，去重，自定义过滤(待补充)。
## 如何使用
通过`script`标签引用cdn文件
```html
```
通过`npm`引用
```javascript
import FrontMonitor from '@nightlighting/frontend-monitor'
FrontMonitor(options)
```
## options[配置项]
```javascript
appId String 项目id
reportUrl String 上报地址，必填
reportFields Array 上报异常信息包含的字段名
sameOrigin Boolean 是否只检测同源脚本异常，默认true
distinct Boolean 是否对同一异常去重，默认true
cacheKey String 缓存key
bufferTime Number 缓冲时间(毫秒)
bufferSize Number 缓存数量
xhrErrorLevel String|RegExp 自定义AJAX的异常范围，用`/`隔开设定的状态码，例如"404/500/502"，或正则，默认为'ALL'表示非`200`之外的所有情况
xhrErrorMessage String 业务api中的异常信息字段
catchUnhandledrejection Boolean 是否捕获Uncaught Promise Error，默认false
```
### 解决方案
**TODO**
* 监控后台，接入数据中心，通过设置的线上异常阈值，自动触发邮件/短信/im警报
* 接入`sourceMap`分析工具，自动对运行时异常进行定位，并生成报表
* 主动上报功能
* 上报信息与行为的扩展
* 联动`nginx`日志对资源异常进行分析
### 参考资料
[https://sentry.io/](https://sentry.io/)
异常监控解决方案`sentry`
[https://www.frontjs.com/app](https://www.frontjs.com/app)
前端异常监控`FrontJs`
[https://github.com/BetterJS](https://github.com/BetterJS)
腾讯前端异常监控体系`BetterJS`
[http://taobaofed.org/blog/2015/10/28/jstracker-how-to-collect-data/](http://taobaofed.org/blog/2015/10/28/jstracker-how-to-collect-data/)
淘宝前端异常监控体系`JSTracker`
[https://github.com/saijs](https://github.com/saijs)
支付宝前端异常监控体系`Sai`
[http://www.aliued.cn/2012/10/27/%E6%9E%84%E5%BB%BAweb%E5%89%8D%E7%AB%AF%E5%BC%82%E5%B8%B8%E7%9B%91%E6%8E%A7%E7%B3%BB%E7%BB%9F-fdsafe.html](http://www.aliued.cn/2012/10/27/%E6%9E%84%E5%BB%BAweb%E5%89%8D%E7%AB%AF%E5%BC%82%E5%B8%B8%E7%9B%91%E6%8E%A7%E7%B3%BB%E7%BB%9F-fdsafe.html)
阿里前端异常监控体系`FdSafe`
---
_Source: https://npm.io/package/frontend-monitorjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._