前端埋点、监控

news2024/11/17 2:33:03

埋点

埋点主要用于手机用户行为数据。在日常开发中我们会通过在前端代码中插入代码或脚本的方式来实现埋点功能。
埋点的主要作用就是：捕获特定用户行为（如点击、浏览、提交表单、页面跳转等）以及关键业务数据（如下单金额、商品类别等）
在日常开发中，埋点实现方案大致可以分为以下三大类：
- 手动埋点：在代码中手动加入记录代码来捕获特定事件
- 自动埋点：利用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>