{"_id":"@bluesky_tl/logger","name":"@bluesky_tl/logger","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@bluesky_tl/logger","version":"0.0.1","description":"js caught and report error","main":"dist/ohbug.min.js","scripts":{"watch":"rollup -c --watch","build":"rollup -c && rollup -c --compress","lint":"eslint ./src","test":"jest","codecov":"codecov","version":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"},"repository":{"type":"git","url":"git+https://github.com/chenyueban/ohbug.git"},"keywords":["debugger","js","bug"],"author":{"name":"chenyueban"},"license":"MIT","bugs":{"url":"https://github.com/chenyueban/ohbug/issues"},"homepage":"https://github.com/chenyueban/ohbug#readme","devDependencies":{"@babel/core":"^7.1.5","@babel/preset-env":"^7.1.5","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","babel-plugin-external-helpers":"^6.22.0","babel-plugin-lodash":"^3.3.4","babel-plugin-transform-es2015-modules-commonjs":"^6.26.2","body-parser":"^1.18.3","codecov":"^3.1.0","eslint":"^5.7.0","eslint-config-airbnb-base":"^13.1.0","eslint-plugin-import":"^2.14.0","jest":"^23.6.0","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-terser":"^3.0.0"},"jest":{"coverageDirectory":"./coverage/","collectCoverage":true},"dependencies":{"lodash":"^4.17.11","lodash.isequal":"^4.5.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_id":"@bluesky_tl/logger@0.0.1","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-vE4V0T3sMlrkNAlJ/vCyCuOQacDUD+m+8ZOZ0JgksE1uF5JOpBOO/LCI0RgWPkG2JOxwTGmnPcZbhzeMgJvUjQ==","shasum":"7cc672113ac027a866689831fa0a09a43d5ba93a","tarball":"https://registry.npmjs.org/@bluesky_tl/logger/-/logger-0.0.1.tgz","fileCount":21,"unpackedSize":126004,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGOWqyPoRKQool5b0CmjQzlXxB8aUDPH+SGvsezr3hpDAiAlEJrk4d+hlHNCUw3tbLd38HYkccRp0s03kIHeeicNkg=="}]},"_npmUser":{"name":"bluesky_tl","email":"bluesky_tl@163.com"},"directories":{},"maintainers":[{"name":"bluesky_tl","email":"bluesky_tl@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/logger_0.0.1_1702306997152_0.6580907645449996"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-11T15:03:17.047Z","0.0.1":"2023-12-11T15:03:17.352Z","modified":"2023-12-11T15:03:17.598Z"},"maintainers":[{"name":"bluesky_tl","email":"bluesky_tl@163.com"}],"description":"js caught and report error","homepage":"https://github.com/chenyueban/ohbug#readme","keywords":["debugger","js","bug"],"repository":{"type":"git","url":"git+https://github.com/chenyueban/ohbug.git"},"author":{"name":"chenyueban"},"bugs":{"url":"https://github.com/chenyueban/ohbug/issues"},"license":"MIT","readme":"# Ohbug\n\n[![Build Status](https://travis-ci.org/chenyueban/ohbug.svg?branch=master)](https://travis-ci.org/chenyueban/ohbug)\n[![codecov](https://codecov.io/gh/chenyueban/ohbug/branch/master/graph/badge.svg)](https://codecov.io/gh/chenyueban/ohbug)\n[![npm](https://img.shields.io/npm/v/ohbug.svg)](https://www.npmjs.com/package/ohbug)\n[![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/chenyueban/ohbug/blob/master/LICENSE)\n\n## 推荐使用完全重写后的 [ohbug](https://github.com/ohbug-org/ohbug)，本项目已经废弃\n\n## 简介\n\n通过监听/主动捕获 `error` 以及性能信息，获取相关信息后执行特定操作(数据上传记录等)。\n\n## 功能\n\n### 错误捕获\n\n可捕获的异常类型包括：\n\n1. JavaScript执行错误\n2. 资源加载错误\n3. HTTP请求错误\n4. 未catch处理的Promise错误\n\n### 性能监控\n\n可监控页面加载各个阶段所用时间、页面资源加载时间。\n\n信息将于页面 `load` 事件时上报\n\n### 错误上报\n\n上报方法可自定义，上报时机分为：\n\n1. 发生错误时立即上报错误\n2. 页面卸载前上报。\n\n### 性能信息上报\n\n页面加载完成后上报\n\n## Todo\n- [x] 捕获websocket错误\n- [ ] 设置采集率\n- [ ] sourcemap定位压缩代码具体错误位置\n- [x] 页面性能监控\n- [ ] 页面HTTP请求性能监控\n- [x] 页面资源加载性能监控\n\n## 原理\n\n- 通过 `window.addEventListener`，可捕获 `JavaScript` 执行错误，资源加载错误，未catch处理的Promise错误\n- 通过改写 `XMLHttpRequest` / `fetch` 实现监听 `HTTP` 请求错误\n- 页面性能时间\n![image](https://segmentfault.com/img/remote/1460000010209590)\n\n## 使用\n\n#### script mode\n\n```html\n\n\n\n```\n\n#### module mode (React)\n\n1.安装\n\n```sh\nnpm install ohbug --save\n```\n如果想用 `yarn`\n```sh\nyarn add ohbug\n```\n\n2.在 根组件文件中添加\n\n```javascript\nimport Ohbug from 'ohbug'\n\nclass Root extends React.Component {\n componentDidMount() {\n Ohbug.init({\n report(errorList) {\n // 上传错误至服务端\n }\n })\n }\n}\n```\n\n## 主动捕获上报\n\n针对一些特殊需求的错误 使用主动捕获(使用装饰器)\n\n例如在 `react` 中\n\n```javascript\nimport { caughtError } from 'ohbug';\n\nclass Test extends React.Component {\n @caughtError // success\n send() {\n // ...\n }\n}\n```\n\n请注意箭头函数使用 `caughtError` 捕获不到错误信息，例如\n\n```javascript\nimport { caughtError } from 'ohbug';\n\nclass Test extends React.Component {\n @caughtError // fail\n send = () => {\n // ...\n }\n}\n```\n\n针对一些不能使用装饰器或自定义信息使用 `reportInfo`\n\n```javascript\nimport { reportInfo } from 'ohbug';\n\nclass Test extends React.Component {\n send() {\n try {\n // ...\n } catch(e) {\n reportInfo(e)\n }\n }\n}\n```\n\n```javascript\nimport { reportInfo } from 'ohbug';\n\nclass Test extends React.Component {\n hello() {\n reportInfo('hello')\n }\n}\n```\n\n## 配置\n\n使用方式\n```javascript\nconst others = {\n id: window.sessionStorage.getItem('XXX_ID'),\n nick: window.sessionStorage.getItem('XXX_NICK'),\n};\nfunction report(data) {\n ajax('url', JSON.stringify(data))\n}\nOhbug.init({\n report,\n others,\n});\n```\n\n| key | description | type | default |\n| :------: | :------: | :------: | :------: |\n| report | 上传函数 | function | null |\n| others | 自定义信息 | object | null |\n| enabledDev | 开发环境下上传 (默认查看当前 url 中是否含有 `127.0.0.1` / `localhost` ，若传入数组则会遍历数组内每一项 url 与当前 url 是否匹配，匹配则是开发环境) | boolean / string[] | false |\n| | 以下为错误信息上报相关配置 | | |\n| error | 是否上报错误信息 | boolean | true |\n| maxError | 发送日志请求连续出错的最大次数 超过则不再发送请求 | number | 10 | \n| mode | 短信发送模式 ('immediately': 立即发送 'beforeunload': 页面注销前发送) | string | 'immediately' |\n| delay | 错误处理间隔时间 | number | 2000 |\n| ignore | 忽略指定错误 目前只支持忽略 HTTP 请求错误 | array | [] |\n| | 以下为性能信息上报相关配置 | | |\n| performance | 是否上报性能信息 | boolean | false |\n| include | 收集指定用户的特定信息 | function | null |\n## 注意\n\n### `mode` 属性\n设置为 `immediately` 时，`delay` 时间内发生的错误将会统一收集并上报\n\n设置为 `beforeunload` 时，会在卸载当前页面时上报，可能存在用户关闭或切换页面导致漏报问题。\n\n常见的解决方案为发送同步 `ajax` 请求(会导致页面卡顿) 或 使用 `navigator.sendBeacon()` 异步上报(不支持 GET)，两种情况都存在弊端 实际生产环境视情况而定。\n```javascript\nfunction report(data) {\n var xhr = new XMLHttpRequest();\n xhr.open(\"POST\", \"/log\", false); // false 表示同步\n xhr.send(data);\n}\nOhbug.init({\n report,\n});\n```\n```javascript\nfunction report(data) {\n navigator.sendBeacon(\"/log\", data); // 默认发送 POST 请求\n}\nOhbug.init({\n report,\n});\n```\n\n### `ignore` 属性\nOhbug 在捕获错误时会忽略 `ignore` 数组内的 url。\n\n使用场景: \n1. 可能频繁出错或不需上报的api。\n2. 由于上报请求完全自定义，一旦上报请求发生错误，Ohbug无法判断错误来源，会导致无限循环上报，此时将上报的 url 添加入 `ignore` 数组内，忽略上报请求的错误。\n\n### `include` 属性\nOhbug 会调用传入函数, 当使用 `reportInfo` 时只捕获指定的信息.\n\n配置:\n```js\nfunction include() {\n if (window.user === 'frank') return true\n return false\n}\nOhbug.init({\n include,\n})\n```\n使用 `reportInfo` :\n```js\nimport { reportInfo } from 'ohbug';\n\nclass Test extends React.Component {\n hello() {\n reportInfo('hello', true) // 只有当前用户为 `frank` 时, 才会上报信息 'hello'\n }\n}\n```\n\n## 错误类型\n\n| type | description |\n| :------: | :------: |\n| caughtError | 调用 caughtError 装饰器主动捕获的错误 |\n| uncaughtError | 意料之外的错误 |\n| resourceError | 资源加载错误 |\n| grammarError | 语法错误 |\n| promiseError | promise 错误 |\n| ajaxError | ajax 错误 |\n| fetchError | fetch 错误 |\n| websocketError | websocket 错误 |\n| reportInfo | 主动上报的信息 |\n\n## 性能信息类型\n\n| type | description |\n| :------: | :------: |\n| redirect | 重定向耗时 |\n| cache | 应用缓存耗时 |\n| dns | DNS解析耗时 |\n| tcp | TCP链接耗时 |\n| secureConnection | 安全链接耗时 |\n| request | request耗时 |\n| first | 白屏/首屏渲染(跳转到response之间)耗时 |\n| unload | unload耗时 |\n| network | 总体网络交互(开始跳转到服务器资源下载完成)耗时 |\n| domInteractive | DOM结构解析(未加载图片 样式 等)耗时 |\n| script | 脚本执行耗时 |\n| dom | DOM加载(不包括结构解析)耗时 |\n| onload | onload耗时 |\n| total | 合计耗时 |\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n\nCopyright (c) 2018 陈月半","readmeFilename":"README.md"}