{"id":16434110,"url":"https://github.com/wangweianger/web-report-sdk","last_synced_at":"2025-05-16T18:09:50.786Z","repository":{"id":43061295,"uuid":"129693390","full_name":"wangweianger/web-report-sdk","owner":"wangweianger","description":"A complet sound web performance report  plug-in.","archived":false,"fork":false,"pushed_at":"2023-04-24T01:19:01.000Z","size":1135,"stargazers_count":396,"open_issues_count":28,"forks_count":145,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-12T17:46:43.171Z","etag":null,"topics":["javascript","performance"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wangweianger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-04-16T06:11:07.000Z","updated_at":"2024-09-11T02:25:38.000Z","dependencies_parsed_at":"2023-07-25T01:07:37.584Z","dependency_job_id":null,"html_url":"https://github.com/wangweianger/web-report-sdk","commit_stats":{"total_commits":141,"total_committers":5,"mean_commits":28.2,"dds":0.05673758865248224,"last_synced_commit":"fbec348e44e2bf00cef81288324129b439c3284d"},"previous_names":["wangweianger/web-performance-report"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangweianger%2Fweb-report-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangweianger%2Fweb-report-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangweianger%2Fweb-report-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangweianger%2Fweb-report-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wangweianger","download_url":"https://codeload.github.com/wangweianger/web-report-sdk/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254184340,"owners_count":22028677,"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":["javascript","performance"],"created_at":"2024-10-11T08:48:11.278Z","updated_at":"2025-05-16T18:09:50.766Z","avatar_url":"https://github.com/wangweianger.png","language":"JavaScript","readme":"###  web-report 是一款浏览器端页面性能，ajax, fetch ,错误信息，资源性能上报SDK，资源小巧，性能强悍\n\n### 上报sdk有五种\n\u003e  * 一 ：所有类型通用的上报SDK 即：web-report-default.js\n\u003e  * 二 ：针对于使用Jquery ajax的上报SDK 即：web-report-jquery.js \n\u003e  * 三 ：针对于使用Axios ajax的上报SDK 即：web-report-axios.js\n\u003e  * 四 ：针对于使用Fetch ajax的上报SDK 即：web-report-fetch.js\n\u003e  * 五 ：针对于业务代码手动触发的上报SDK 即：web-report-none.js\n\n* 通用版本适合所有上报情况\n* 至于四种sdk的选择可酌情选择。通常来说专库专用会更好，因此使用jquery的推荐第二种，使用fetch的推荐第三种,使用Axios的推荐第三种，其他情况使用通用版本\n\n* web-report-sdk 只做页面性，错误信息，资源信息，ajax信息等上报，让你不用关心浏览器上报部分，是一个比较完整和健全的数据上报插件。\n* 在此基础上你可以开发任何自己需要的性能上报系统。 \n\n### web-report SDK主要上报以下性能信息\n\u003e  * url            上报页面地址\n\u003e  * preUrl         来访上一页面URL\n\u003e  * performance    页面性能数据详情，字段含义详情请参考后面内容\n\u003e  * errorList      页面错误信息详情，包含js,img,ajax,fetch等所有错误信息，字段含义详情请参考后面内容\n\u003e  * resoruceList   页面性能数据详情，当前页面所有资源性能详情信息，字段含义详情请参考后面内容\n\u003e  * markUv         统计uv标识\n\u003e  * markUser       从用户进入网站开始标识，直到用户离开销毁，可以用来做用户漏斗分析\n\u003e  * time           当前上报时间\n\u003e  * screenwidth    屏幕宽度\n\u003e  * screenheight   屏幕高度\n\u003e  * isFristIn      是否是某次会话的第一次进入\n\u003e  * type           上报类型  1:页面级性能上报  2:页面ajax性能上报  3：页面内错误信息上报\n\n### 浏览器页面直接引用资源方式：\n\u003e  * 1、下载 dist/web-report-default.min.js 到本地\n\u003e  * 2、使用script标签引入到html的头部（备注：放到所有js资源之前）\n\u003e  * 3、使用performance函数进行数据的监听上报 \n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003ctitle\u003eperformance test\u003c/title\u003e\n  \u003cscript src=\"../dist/web-report-default.min.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n    Performance({\n        domain:'http://some.com/api', //Your API address\n    })\n  \u003c/script\u003e\n\u003c/head\u003e\n```\n\n### npm引入方式\n```js\nnpm install web-report --save\n\nimport {\n  Performance,\n  axiosReport,\n  defaultReport,\n  fetchReport,\n  jqueryReport,\n  noneReport\n} from 'web-report'\n\n```\n\n### webpack 使用\n```js\nnpm install web-report --save\n```\n\n```js\n//New performance.js file\n//The contents are as follows\n\nimport { Performance } from 'web-report'\n\nPerformance({ \n  domain:'http://some.com/api' \n})\n```\n```js\n//Change webpack configuration\n\nentry: {\n    //add performance entry\n    'performance':path.resolve(__dirname, '../src/performance.js'),\n},\n\n//change htmlWebpackPlugin config like this\n//Attention to dependence\nnew htmlWebpackPlugin({\n    ...\n    chunks: ['vendors','performance','main'],\n    chunksSortMode: 'manual',\n}),\n\n```\n\n### none JDK使用方法\n*  none JDK在程序中使用 window.ReportData();来触发上报\n*  在多页面中可加载插件后调用 window.ReportData() 方法直接上报。\n*  在vue中可如此使用：\n```js\nrouter.afterEach((to, from, next) =\u003e {\n  if(from.name){\n    try{ window.ReportData(); }catch(e){}\n  }else{\n    addEventListener(\"load\",function(){\n          try{ window.ReportData(); }catch(e){}\n      },false);\n  }\n})\n```\n*  在react中也可以使用 withRouter 对路由跳转后进行统一上报。\n\n\n### 以下我根据此SDK开发的一款完整版本前端性能监控系统\nhttps://github.com/wangweianger/zanePerfor\n\n### SDK npm 地址\nhttps://www.npmjs.com/package/web-report\n\n### 注意事项\n* jquery和axios JDK需要放在jquery 或 axios之后，不然ajax错误性信息无法采集\n\n### 单页面程序上报处理\n* 增加每次会话的第一次进入标识：isFristIn，客观的统计用户第一次进入页面性能数据\n* 单页面应用程序路由切换时根据页面是否有ajax请求进行性能的上报\n* 也可以自行使用none类型jdk配合路由钩子进行上报\n\n### 上报参数type值说明（重要）\n* type = 1:  页面级别性能数据上报，即页面加载|路由切换时页面性能数据的上报\n* type = 2:  页面已加载完毕，当进行某些操作请求了ajax信息时，对ajax性能数据的上报（如果ajax报错则上报错误信息）\n* type = 3:  页面已加载完毕，当进行某些操作报错时，对错误信息的上报\n\n### 参数说明\n\u003e  * 同时传入 domain和传入的function ，function优先级更高，也就是说function会执行\n\u003e  * domain     ：上报api接口\n\u003e  * outtime    ：上报延迟时间，保证异步数据的加载 （默认：300ms）\n\u003e  * isPage     ：是否上报页面性能数据 （默认：true）\n\u003e  * isResource ：是否上报页面资源性能数据 （默认：true）\n\u003e  * isError    ：是否上报页面错误信息数据 （默认：true）\n\u003e  * isAjax     ：是否上报ajax信息 （默认：true）\n\u003e  * add        ：附带参数 （值为json object 例如：{APPID:'123456789'}）\n\u003e  * filterUrl  ：不需要上报的ajax请求 （例如开发模式下的livereload链接）\n\u003e  * fn         ：自定义上报函数，上报方式可以用ajax可以用fetch (非必填：默认使用fetch,如果使用ajax则必须参数 report:'report-data'，如果是fetch则必须参数：type:'report-data')\n\n* 案例\n```js\n1、最简单最常用的上报\nPerformance({\n  domain:'http://some.com/api'  //你的api地址\n})\n\n2、加add参数上报\nPerformance({\n  domain:'http://some.com/api'  //你的api地址\n  add:{\n    appId:'123456789'\n  }\n})\n\n3、自己写fetch fn上报\nPerformance({},data=\u003e{\n  fetch('http://some.com/api',{\n    type:'POST',\n    report:'report-data',\n    headers: {'Content-Type': 'application/json'},\n    body:JSON.stringify(data)\n  }).then((data)=\u003e{})\n})\n\n4、自己写AJAX fn上报\nPerformance({},data=\u003e{\n  $.ajax({\n    type:'POST',\n    report:'report-data',\n    contentType: 'application/json',\n    data:{\n      data:data\n    },\n    success:data=\u003e{}\n  })\n})\n\n5、完整版本的上报案例\nPerformance({\n    domain:'http://some.com/api', \n    outtime:500,\n    isPage:true,\n    isAjax:true,\n    isResource:true,\n    isError:true,\n    add:{\n      appId:'123456789'\n    },\n    filterUrl:['http://localhost:35729/livereload.js?snipver=1']\n})\n\n```\n\n### 对外方法：\n一：addError  ：此方法向插件中自定义上报错误信息，vue,react，try{}catch 的报错信息均可采用此方法上报\n案例：\n```js\nlet message = 'js add error'\nlet col = 20\nlet line = 20\nlet resourceUrl = 'http://www.xxx.com/01.js'\n\nPerformance.addError({\n      msg:message,\n      col:col,\n      line:line,\n      resourceUrl:resourceUrl\n})\n```\n二：addData  ：上报时自定义的数据\n案例：\n```js\nPerformance.addData((data)=\u003e{\n  data.name = 'wangwei'\n  data.some = {\n    name:'wangwie',\n    age:20\n  }\n})\n\n```\n\n## USE Vue\nIf you use the Vue framework, you can do it like this.\n* 1、Introduce Performance\n* 2、Copy the following code\n```js\nimport { Performance } from 'web-report'\n\nVue.config.errorHandler = function (err, vm, info) {\n    let { message, stack } = err;\n\n    // Processing error\n    let resourceUrl,col,line;\n    let errs = stack.match(/\\(.+?\\)/)\n    if(errs\u0026\u0026errs.length) errs = errs[0]\n    errs=errs.replace(/\\w.+js/g,$1=\u003e{resourceUrl=$1;return '';})\n    errs=errs.split(':')\n    if(errs\u0026\u0026errs.length\u003e1)line=parseInt(errs[1]||0);col=parseInt(errs[2]||0)\n\n    // Fixed parameters\n    // Call the Performance.addError method\n    Performance.addError({\n      msg:message,\n      col:col,\n      line:line,\n      resourceUrl:resourceUrl\n    })\n}\n```\n\n## USE React\nIf you use the React framework, you can do it like this.\n* 1、Introduce Performance\n* 2、Error Handling in React 16.\nIf you don't know Error Handling.Go to the official website to understand\nhttps://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html\nreact16之后提供Error Handling处理报错机制，父组件新增componentDidCatch钩子函数，父组件只能监听子组件的异常信息\n```js\n//Top reference\nimport { Performance } from 'web-report'\n\n//Parent component listens for subcomponent error information\ncomponentDidCatch(error, info) {\n    let {message,stack} = error  \n\n    // Processing error\n    let resourceUrl,col,line;\n    let errs = stack.match(/\\(.+?\\)/)\n    if(errs\u0026\u0026errs.length) errs = errs[0]\n    errs=errs.replace(/\\w.+js/g,$1=\u003e{resourceUrl=$1;return '';})\n    errs=errs.split(':')\n    if(errs\u0026\u0026errs.length\u003e1)line=parseInt(errs[1]||0);col=parseInt(errs[2]||0)\n\n    // Fixed parameters\n    // Call the Performance.addError method\n    Performance.addError({\n      msg:message,\n      col:col,\n      line:line,\n      resourceUrl:resourceUrl\n    })\n}\n```\n\n\n## Runing\n```js\ngit clone https://github.com/wangweianger/web-report-sdk.git\nnpm install\n\n//Development\nnpm run dev\n\n//product\nnpm run build\n\n//test page\nhttp://localhost:8080/test/ \n\n```\n\n\n## Return parameter description\n\n| parameter name | describe | explain |\n| --- | --- | --- |\n| url | 上报页面地址 |  |\n| markUv | 统计uv标识 |  |\n| markUser | 用户标识  | 可用来做UV统计，和用户行为漏斗分析 |\n| isFristIn | 是否是每次会话的第一次渲染 | 可以用来做首屏渲染性能统计分类 |\n| type | 上报类型 | 1:页面级性能上报  2:页面ajax性能上报  3：页面内错误信息上报 |\n| screenwidth | 屏幕宽度  |  |\n| screenheight | 屏幕高度  |  |\n| preUrl | 上一页面  |  |\n|  |  |  |\n| errorList | 错误资源列表信息 |  |\n| -\u003et | 资源时间 |  |\n| -\u003en | 资源类型 | resource，js，ajax，fetch,other  |\n| -\u003emsg | 错误信息 |  |\n| -\u003emethod | 资源请求方式 | GET，POST |\n| -\u003edata-\u003eresourceUrl | 请求资源路径 |  |\n| -\u003edata-\u003ecol | js错误行 |  |\n| -\u003edata-\u003eline |  js错误列 |  |\n| -\u003edata-\u003estatus | ajax错误状态 |  |\n| -\u003edata-\u003etext | ajax错误信息 |  |\n|  |  |  |\n| performance |   页面资源性能数据(单位均为毫秒) |  |\n| -\u003ednst | DNS解析时间 |  |\n| -\u003etcpt | TCP建立时间 |  |\n| -\u003ewit | 白屏时间 |  |\n| -\u003edomt | dom渲染完成时间 |  |\n| -\u003elodt | 页面onload时间 |  |\n| -\u003eradt | 页面准备时间  |  |\n| -\u003erdit | 页面重定向时间 |  |\n| -\u003euodt | unload时间 |  |\n| -\u003ereqt | request请求耗时 |  |\n| -\u003eandt | 页面解析dom耗时 |  |\n|  |  |  |\n| resoruceList | 页面资源性能数据 |  |\n| -\u003edecodedBodySize | 资源返回数据大小 |  |\n| -\u003eduration | 资源耗时 |  |\n| -\u003emethod | 请求方式 | GET,POST |\n| -\u003ename | 请求资源路径 |  |\n| -\u003enextHopProtocol | http协议版本 |  |\n| -\u003etype | 请求资源类型 | script，img，fetchrequest，xmlhttprequest，other |\n\n### A complete report of the report looks like this.\n```js\n{\n  \"time\": 1524136760783, \n  \"preUrl\": \"\", \n  \"appId\":\"123456789\",\n  \"type\": 1,\n  \"isFristIn\": true,\n  \"markUv\": \"hzYyTkk2TzJ2M3dE1aR1539930145705\",\n  \"markUser\": \"FtJ7BykWAPc3SyXQayd1539917250089\",\n  \"url\":\"http://blog.seosiwei.com\",\n  \"errorList\": [\n    {\n      \"t\": 1524136759597, \n      \"n\": \"resource\", \n      \"msg\": \"img is load error\", \n      \"data\": {\n        \"target\": \"img\", \n        \"type\": \"error\", \n        \"resourceUrl\": \"http://img1.imgtn.bd95510/\"\n      }, \n      \"method\": \"GET\"\n    }, \n    {\n      \"t\": 1524136759720, \n      \"n\": \"js\", \n      \"msg\": \"ReferenceError: wangwei is not defined at http://localhost:8080/test/:73:15\", \n      \"data\": {\n        \"resourceUrl\": \"http://localhost:8080/test/\", \n        \"line\": 73, \n        \"col\": 15\n      }, \n      \"method\": \"GET\"\n    }, \n    {\n      \"t\": 1524136759764, \n      \"n\": \"fetch\", \n      \"msg\": \"fetch request error\", \n      \"data\": {\n        \"resourceUrl\": \"http://mock-api.seosiwei.com/guest/order/api/order/getOrde\", \n        \"text\": \"TypeError: Failed to fetch\", \n        \"status\": 0\n      }, \n      \"method\": \"POST\"\n    }, \n    {\n      \"t\": 1524136759780, \n      \"n\": \"ajax\", \n      \"msg\": \"ajax request error\", \n      \"data\": {\n        \"resourceUrl\": \"http://mock-api.seosiwei.com/guest/home/api/shop/getHomeInitInf\", \n        \"text\": \"ajax request error\", \n        \"status\": 0\n      }, \n      \"method\": \"GET\"\n    }\n  ], \n  \"performance\": {\n    \"dnst\": 0, \n    \"tcpt\": 0, \n    \"wit\": 542, \n    \"domt\": 693, \n    \"lodt\": 872, \n    \"radt\": 4, \n    \"rdit\": 0, \n    \"uodt\": 0, \n    \"reqt\": 540, \n    \"andt\": 168\n  }, \n  \"resourceList\": [\n    {\n      \"name\": \"http://localhost:8080/dist/web-report.js\", \n      \"method\": \"GET\", \n      \"type\": \"script\", \n      \"duration\": \"73.70\", \n      \"decodedBodySize\": 18666, \n      \"nextHopProtocol\": \"http/1.1\"\n    }, \n    {\n      \"name\": \"https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js\", \n      \"method\": \"GET\", \n      \"type\": \"script\", \n      \"duration\": \"0.00\", \n      \"decodedBodySize\": 0, \n      \"nextHopProtocol\": \"h2\"\n    }, \n    {\n      \"name\": \"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=295864288,1887240069\u0026fm=27\u0026gp=0.jpg\", \n      \"method\": \"GET\", \n      \"type\": \"img\", \n      \"duration\": \"0.00\", \n      \"decodedBodySize\": 0, \n      \"nextHopProtocol\": \"http/1.1\"\n    }, \n    {\n      \"name\": \"http://localhost:35729/livereload.js?snipver=1\", \n      \"method\": \"GET\", \n      \"type\": \"script\", \n      \"duration\": \"149.00\", \n      \"decodedBodySize\": 0, \n      \"nextHopProtocol\": \"http/1.1\"\n    }, \n    {\n      \"name\": \"http://mock-api.seosiwei.com/guest/home/api/shop/getHomeInitInfo\", \n      \"method\": \"GET\", \n      \"type\": \"fetchrequest\", \n      \"duration\": \"48.80\", \n      \"decodedBodySize\": 0, \n      \"nextHopProtocol\": \"http/1.1\"\n    }, \n    {\n      \"name\": \"http://mock-api.seosiwei.com/guest/order/api/order/getOrder\", \n      \"method\": \"POST\", \n      \"type\": \"xmlhttprequest\", \n      \"duration\": \"40.20\", \n      \"decodedBodySize\": 0, \n      \"nextHopProtocol\": \"http/1.1\"\n    }\n  ], \n  \"addData\": {\n    \"name\": \"wangwei\", \n    \"some\": {\n      \"name\": \"wangwie\", \n      \"age\": 20\n    }\n  }\n}\n```\n\n\n\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangweianger%2Fweb-report-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwangweianger%2Fweb-report-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangweianger%2Fweb-report-sdk/lists"}