前端埋点SDK封装

前端埋点sdk

学习 小满 前端埋点SDK 带你 从0 开发 并且发布npm

学习文章

github仓库地址

注意点

1. 浏览器左右箭头 触发popstate事件

2. 使用navigator.sendBeacon 上传

页面关闭也可以上传

开启一个服务器： 前端页面

navigator.sendBeacon 上传类型是ping

3. pushState、前进、后退 服务器接收

<script src="./dist/index.js"></script>
<script>
        // 使用amd模式，需要进行使用定义的名称
        new tracker({
                requestUrl: 'http://localhost:9000/tracker',
                historyTracker: true,
        })
</script>

4. dom上报

思路是加一个target-key

<button target-key="888">上报</button>
<button>不上报</button>
<script src="./dist/index.js"></script>
<script>
        // 使用amd模式，需要进行使用定义的名称
        new tracker({
                requestUrl: 'http://localhost:9000/tracker',
                historyTracker: true,
                domTracker: true
        })
</script>

产生四条记录

mouseover --- > mousedown ---> mouseup ---> click

5. js上报

js报错上报 error 事件  promise报错 unhandledrejection

为什么控制台捕获不了错误？

因为控制台会在内部捕获这个错误，并将错误信息输出到控制台，而不会将错误抛到全局作用域中。

使用setTimeout模拟 当使用 setTimeout 函数包裹代码时，代码会被推入到任务队列（task queue）中，直到任务队列被浏览器执行。这样就能够在下一次事件循环中捕获到运行时错误，并且这个错误会被传递到全局作用域中，使得 window.onerror 或 window.addEventListener('error', callback) 能够捕获到这个错误。

import时加载 根据package.json中配置

browser+mjs -> module -> browser+cjs -> main