{"id":13671138,"url":"https://github.com/MriLiuJY/monitorFE","last_synced_at":"2025-04-27T14:33:09.136Z","repository":{"id":36080976,"uuid":"192522349","full_name":"MriLiuJY/monitorFE","owner":"MriLiuJY","description":"🍉前端埋点监控，提供前端 JS 执行错误，第三方资源加载异常，Ajax 请求错误监控","archived":false,"fork":false,"pushed_at":"2023-01-04T00:47:31.000Z","size":4015,"stargazers_count":264,"open_issues_count":24,"forks_count":63,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-11-11T08:44:01.389Z","etag":null,"topics":["monitor","monitor-js","monitoring-plugins","monitoring-scripts","monitoring-tool"],"latest_commit_sha":null,"homepage":"http://monitor.notfish.cn/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MriLiuJY.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-18T10:57:45.000Z","updated_at":"2024-09-26T12:05:04.000Z","dependencies_parsed_at":"2023-01-16T13:01:20.938Z","dependency_job_id":null,"html_url":"https://github.com/MriLiuJY/monitorFE","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MriLiuJY%2FmonitorFE","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MriLiuJY%2FmonitorFE/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MriLiuJY%2FmonitorFE/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MriLiuJY%2FmonitorFE/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MriLiuJY","download_url":"https://codeload.github.com/MriLiuJY/monitorFE/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251154325,"owners_count":21544478,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["monitor","monitor-js","monitoring-plugins","monitoring-scripts","monitoring-tool"],"created_at":"2024-08-02T09:01:00.435Z","updated_at":"2025-04-27T14:33:07.561Z","avatar_url":"https://github.com/MriLiuJY.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# MonitorFE\n\n前端埋点监控SDK，一款开箱即用的前端报错监控的埋点SDK。仅需开发埋点接口即可监控收集整个前端项目在运行的时候产生的js内部报错，资源加载异常，接口返回报错，样式丢失的问题。\n\n项目在 SDK 内监听全局 error 错误信息，ajax 错误信息，以及监听资源加载，在页面出现报错的情况下直接向埋点接口上报错误信息，监控前端项目的稳定性。\n\n[English document](https://github.com/MriLiuJY/monitorFE/blob/master/docs/README_EN.md)\n\n## 设计目的\n\n1.方便更多的前端开发快速接入前端埋点。\n\n2.为更多中小型的项目增加前端的报错监控。\n\n3.作为一款开源产品帮助更多的项目提升稳定性。\n\n![MonitorFE](https://github.com/MriLiuJY/monitorFE/blob/master/MonitorFE.gif \"MonitorFE\")\n\n## 使用\n\n### 配置项\n\n用于传入 `initMonitor` 的配置项。\n\n|属性|参数|默认值|可选值|说明| \n|:----- |:-------|:-----|:-----|----- | \n| method | String | POST | POST，GET | 埋点上报请求方法 |\n| url | String | - | - | 埋点上报url地址 |\n| id | String | - | - | 标识当前用户 |\n| record | Boolean | false | - | 是否录制用户操作用于回放 |\n\n可以直接 [下载](https://github.com/MriLiuJY/FE-Monitor/releases) SDK 引入自己项目中即可使用。(dist/js)目录下的打包文件。\n\n### 引入方式\n\n**npm 下载**\n\n```\nnpm install fe-monitor-sdk\n```\n\n或者你可以使用淘宝 NPM 镜像安装:\n\n```\nnpm install fe-monitor-sdk --registry=https://registry.npm.taobao.org\n```\n\n*使用*\n\n```js\nvar initMonitor = require(\"fe-monitor-sdk\");\n\nvar config = {}\n  // your config\n};\ninitMonitor(config, function(monitor) {\n  // your code...\n  // 销毁实例\n  monitor._destory();\n});\n```\n\n另外，浏览器并不支持 `CommonJS` 规范，因此需要使用 `Browserify` 或者 `Webpack` 等工具进行打包。\n\n\n**js 文件引入**\n\n同源的情况下可以直接引入自己的项目中，注意请使用最新的 SDK 以获取更好的效果。\n\n```js\n\u003cscript src=\"https://test.com/monitor.0.0.1-beta.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\nvar config = {}\n  // your config\n};\ninitMonitor(config, function(monitor) {\n  // your code...\n  // 销毁实例\n  monitor._destory();\n});\n\u003c/script\u003e\n```\n\n如果 JS 放在 CDN 上需要单独引入的情况下需要一些额外的 code 。\n\n```js\n\u003cscript\u003e\nvar config = {}\n  // your config\n};\n    \nvar script = document.createElement(\"script\");\n// 注意不加这个 crossOrigin 会造成第三方引入的资源无法收集页面报错详情\nscript.crossOrigin = \"anonymous\";\nscript.src = `https://test.com/monitor.0.0.1-beta.js`;\ndocument.body.appendChild(script);\nscript.addEventListener('load', (e) =\u003e {\n  initMonitor(config, function(monitor) {\n    // your code...\n    // 销毁实例\n    monitor._destory(); \n  });\n});\n\u003c/script\u003e\n```\n\n项目在v0.0.3 版本之后加入 [rrweb](https://github.com/rrweb-io/rrweb) 录制回放功能，可以通过配置传入 `initMonitor` 的 config 中的 `record` 的值来选择是否开启录制，如果传值为 true 的情况下每次错误都会上报收集到的数据用于回放错误复现。\n\n请注意开启 rrweb 会有部分兼容问题请注意:\n\n\u003e 由于使用 `MutationObserver` API，rrweb 不支持 IE11 以下的浏览器。可以从[这里](https://caniuse.com/#feat=mutationobserver)找到兼容的浏览器列表。\n\n## 项目架构\n\n首先v0.1.0版本设计目的是为了做完整的异常监控，使得前端具备资源加载异常，js运行报错，样式丢失，接口返回异常的捕获能力。\n\n目录结构:\n```\n├── config // webpack 配置文件\n├── dist   // 打包输出文件目录\n├── public // 公共文件目录\n├── server // server\n├── src    // 项目文件目录\n├── test\n```\n\n* JS-SDK具备获取平台信息的能力\n* 获取报错详情与报错的时间\n* 当前的url（完整带参数）\n* 用户可以自定义上传的参数\n\n\n## 开发\n\n自动生成changelog 需要在本地下载：\n\n`npm install -g conventional-changelog-cli`\n\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n\nCopyright (c) 2019 MriLiuJY\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMriLiuJY%2FmonitorFE","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMriLiuJY%2FmonitorFE","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMriLiuJY%2FmonitorFE/lists"}