前端埋点、pv/uv统计、前端监控
1. pv/uv统计
pv: 页面重复浏览量
统计方式，多页面应用通常在页面load事件，单页应用通常在页面路由中
uv: 页面独立访客浏览量
统计方式，pv统计的基础上，添加唯一标识，可以是IP地址，用户浏览器localStorage存储的uuid等。
IP地址存在局域网内的共享一个ip、代理、动态ip等误差
uuid存在用户删除localStorage等，需权衡选取，uuid的准确度更高
2. 前端埋点
无侵入式的埋点方式，就是理由冒泡，在dom层级挂载 track-key，记录上报参数，在document层级监听事件，截获埋点参数，触发上报
vue框架，可以使用 v-track 这个库
react框架，可以使用 react-tracking 或者 react-decorator-track
3. 上报埋点的方式
1. gif图get请求上报，首选，get请求，数据量小，支持跨域，无阻塞(new Image无需append到body即可发送请求)
2. img beacon上报，次之，post请求，数据量大，需后端支持跨域
3. ajax上报，最次，需后端支持跨域
埋点库封装可参考 前端埋点sdk封装
4. 前端监控
监控平台可使用
Sentry：一个开源的前端错误监控工具，可以捕获和报告 JavaScript 和前端框架的错误和异常。它提供详细的错误信息和堆栈跟踪，帮助开发人员快速定位和解决问题。
前端要封装监控库，收集监控信息
前端需要捕获异常类型
JS 语法错误、代码异常
AJAX 请求异常
静态资源加载异常
Promise 异常
Iframe 异常
跨域 Script error
1. window.onerror捕获异常
当 JS 运行时错误发生时，window 会触发一个 ErrorEvent 接口的 error 事件，并执行 window.onerror()
window.onerror = function(message, source, lineno, colno, error) { // message：错误信息（字符串）。 // source：发生错误的脚本URL（字符串） // lineno：发生错误的行号（数字） // colno：发生错误的列号（数字） // error：Error对象（对象） console.log('捕获到异常：',{message, source, lineno, colno, error}); }
2. window.addEventListener捕获资源加载异常
当一项资源（如图片或脚本）加载失败异常，由于网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉到才行，
但是这种方式虽然可以捕捉到网络请求的异常，却无法判断 HTTP 的状态是 404 还是 500 等
<scritp> window.addEventListener('error', (error) => { console.log('捕获到异常：', error); }, true) </script> <img src="./xxx.png"></img>
3. Promise异常 用 unhandledrejection 全局监听
window.addEventListener("unhandledrejection", function(e){
e.preventDefault() //此句可以去掉控制台的异常显示，适当选用
console.log('捕获到异常：', e);
return true;
});
4. VUE异常捕获用errorHandler, React异常捕获用componentDidCatch
5. 对于 iframe 的异常捕获，使用 window.onerror
<iframe src="./iframe.html" frameborder="0"></iframe> <script> window.frames[0].onerror = function (message, source, lineno, colno, error) { console.log('捕获到 iframe 异常：',{message, source, lineno, colno, error}); return true; } </script>
6. Script error
出现 Script error 错误，是因为引用了跨域的脚本，浏览器出于安全原因，window.onerror无法捕获完整错误信息，只能显示 Script error.
解决方法
1. 服务器端配置设置：Access-Control-Allow-Origin，允许当前域名，即引用脚本的页面的域名
2. 脚本添加 crossorigin 属性
<script src="http://xxx/index.js" crossorigin="anonymous"></script>
响应头和crossorigin取值问题
1. 设置 crossorigin属性后，script标签去请求资源的时候，request会带上origin头，然后会要求服务器进行 cors校验，跨域的时候如果response header 没有 ‘Access-Control-Allow-Origin’ 是不会拿到资源的。cors验证通过后，拿到的script运行内部报错的话, window.onerror 捕获的时候，内部的error.message可以看到完整的错误信息。
2. crossorigin的属性值分为 anonymous和use-credentials。如果设置了crossorigin属性，但是属性值不正确的话，默认是anonymous。
3. anonymous代表同域会带上cookie，跨域则不带上cookie，相当于 fecth请求的credentials: 'same-origin'。
4. use-credentials跨域也会带上cookie，相当于fetch请求的 credentials: 'include'，这种情况下跨域的response header 需要设置'Access-Control-Allow-Credentials' = true，否则cors失败
参考： 如何优秀的处理前端异常
