前端埋点、监控
埋点
- 埋点主要用于手机用户行为数据。在日常开发中我们会通过在前端代码中插入代码或脚本的方式来实现埋点功能。
- 埋点的主要作用就是：捕获特定用户行为（如点击、浏览、提交表单、页面跳转等）以及关键业务数据（如下单金额、商品类别等）
- 在日常开发中，埋点实现方案大致可以分为以下三大类：
- 手动埋点：在代码中手动加入记录代码来捕获特定事件
- 自动埋点：利用DOM事件代理等技术捕获页面上所有事件，从而减少手动配置
- 可视化埋点：通过工具界面标记需要采集的元素和事件，可以不用手写代码
监控
监控主要关注系统的性能和稳定性。在日常开发中，我们会通过 采集页面加载时间、资源请求、错误日志等数据 的方式来实现前端监控。
- 在日常开发中，监控一般需要完成以下三大部分：
- 性能监控：如首屏加载时间、页面交互耗时、资源加载耗时等。
- 错误监控：捕获JavaScript错误、网络请求失败、资源加载异常等。
- 用户体验监控：收集白屏、卡顿等影响用户体验的问题等。
<body>
<button id="myBtn">保存</button>
<script>
function trackEvent(eventType, details) {
fetch("/上报URL",)
}
myBtn.addEventListener("click", function () {
trackEvent("button_click", {
id: "save_001",
timeStamp: Date.now()
})
})
</script>
</body>
<script>
function trackEvent(eventType, details) {
console.log(eventType, details)
// fetch("/上报URL",)
}
// 页面什么时候加载完成
window.addEventListener('load', function () {
const pageLoadTime = performance.now();
trackEvent('page_load', {
duration: pageLoadTime
})
})
// API调用耗时监控
function apiPerformance() {
const start = performance.now();
fetch("请求的接口").then(rew => res.json()).then(data => {
const duration = performance.now() - start
trackEvent("api_call", {
duration,
endpoint: "请求的接口"
})
})
}
</script>
异常处理
- 可疑区域增加
try-catch - 全局监控
JS异常window.onerror - 全局监控静态资源异常
window.addEventListener - 捕获没有
catch的Promise异常用unhandledrejection Vue errorHandler和React componentDidCatchAxios请求统一异常处理用拦截器interceptors- 使用日志监控服务收集用户错误信息（如sentry、bugly）
原文地址：https://blog.csdn.net/weixin_45932565/article/details/143803851
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！