React 监控
问题
React 监控
答案
前端监控⼀般分为三种，分别为⻚⾯埋点、性能监控以及异常监控。
这⼀章节我们将来学习这些监控相关的内容，但是基本不会涉及到代码，只是让⼤家了解下前 端监控该⽤什么⽅式实现。毕竟⼤部分公司都只是使⽤到了第三⽅的监控⼯具，⽽不是选择⾃ ⼰造轮⼦
1 ⻚⾯埋点
⻚⾯埋点应该是⼤家最常写的监控了，⼀般起码会监控以下⼏个数据：
- PV / UV
- 停留时⻓
- 流量来源
- ⽤户交互
对于这⼏类统计，⼀般的实现思路⼤致可以分为两种，分别为⼿写埋点和⽆埋 点的⽅式。
相信第⼀种⽅式也是⼤家最常⽤的⽅式，可以⾃主选择需要监控的数据然后在相应的地⽅写⼊ 代码。这种⽅式的灵活性很⼤，但是唯⼀的缺点就是⼯作量较⼤，每个需要监控的地⽅都得插 ⼊代码。
另⼀种⽆埋点的⽅式基本不需要开发者⼿写埋点了，⽽是统计所有的事件并且定时上报。这种 ⽅式虽然没有前⼀种⽅式繁琐了，但是因为统计的是所有事件，所以还需要后期过滤出需要的 数据。
2 性能监控
性能监控可以很好的帮助开发者了解在各种真实环境下，⻚⾯的性能情况是如何的。
对于性能监控来说，我们可以直接使⽤浏览器⾃带的 Performance API 来实现这个功 能。
对于性能监控来说，其实我们只需要调⽤
performance.getEntriesByType(’navigation’) 这⾏代码就⾏了。对，你没看错，⼀ ⾏代码我们就可以获得⻚⾯中各种详细的性能相关信息
我们可以发现这⾏代码返回了⼀个数组，内部包含了相当多的信息，从数据开 始在⽹络中传输到⻚⾯加载完成都提供了相应的数据
3 异常监控
对于异常监控来说，以下两种监控是必不可少的，分别是代码报错以及接⼝异常上报。 对于代码运⾏错误，通常的办法是使⽤ window.onerror 拦截报错。该⽅法能拦截到⼤ 部分的详细报错信息，但是也有例外
-
对于跨域的代码运⾏错误会显示 Script error . 对于这种情况我们需要给 script 标签 添加 crossorigin 属性
-
对于某些浏览器可能不会显示调⽤栈信息，这种情况可以通过 arguments.callee.caller 来做栈递归
对于异步代码来说，可以使⽤ catch 的⽅式捕获错误。⽐如 Promise 可以直接使⽤ catch 函数， async await 可以使⽤ try catch
但是要注意线上运⾏的代码都是压缩过的，需要在打包时⽣成 sourceMap ⽂件便于 debug
对于捕获的错误需要上传给服务器，通常可以通过 img 标签的 src 发起⼀个请求。
另外接⼝异常就相对来说简单了，可以列举出出错的状态码。⼀旦出现此类的状态码就可 以⽴即上报出错。接⼝异常上报可以让开发⼈员迅速知道有哪些接⼝出现了⼤⾯积的报 错，以便迅速修复问题。
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
