前端埋点实践
- 介绍
- 1. 实现自定义hook，监测组件
- 2. 收集数据
- 3.前端错误捕捉
- 4. 发送后端保存数据
- 5.收集数据展示
- 总结
这段时间博主一直在投入组件库的开发工作，最初其实就是想提供一套组件库来使用并且开源，和大家一起学习，最近突然有一个思路，可以从组件库文档页拉取一下用户的数据，来对组件库更好的维护。
主要思路还是采用的代码埋点，在每个组件的页面挂载的时候注入埋点，进行数据收集、最后提交给后端来进行长保存。
代码如下：
usePageListener hook主要有两个阶段：
- 组件挂载阶段，进行页面时间监听，计时用户在该页面停留了多少秒。
- 组件销毁阶段，停止计时，并开始收集数据，最后发送给后端。
我这里主要收集了两类数据，个人相关信息的收集函数getUserIp如下：
这里是借助了搜狐的第三方接口来获取用户的IP地址和所在城市。
浏览器原生的数据方法getNativeBrowserInfo如下：
这里是收集了设备、运行环境以及页面加载内存性能相关的数据，也是可以知道h5在每个设备中是否有不一样的加载表现，从而进行针对性优化。
通过window.onerror方法，捕捉到前端出现的错误信息，并上报给后端，主要是实现代码如下：
这里主要收集了报错信息、报错的页面地址、报错时间等参数，这里我们就可以自己去mock出错误。
数据收集完毕，准备发送给后端，这里是加入了一个script脚本，请求后端，并把收集到的数据传给后端，代码如下：
至此…埋点就做完了，线上服务器也可以实时获取到用户的数据，保存在数据库中，提供给我进行参考了~哈哈哈
这里一共有两张表，用户信息表和错误表。
用户信息表：
错误表：
最后…留一下React-View-UI的链接~~
到此这篇前端埋点插件（前端埋点插件怎么用）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdkf/73986.html