页面崩溃
页面无法到达unload阶段
- 使用Web Worker检测和报告页面崩溃
- 实现心跳机制监控页面响应状态
- 将崩溃信息上报至配置的后端服务
WorkerCode
接受来自主线程的消息
onmessage=(event)=>{let{
type,pageTime: receivedPageTime,
pageUrl,
url,
id,
eventData,
state
}= event.data;if(url){
fetchUrl = url;// 接收主线程传递的配置}if(id){
userId = id;// 接收主线程传递的配置}
nowUrl = pageUrl;
crashState = state;
crashEventData = eventData;if(type ==='heartbeat-response'){
pageTime = receivedPageTime;}elseif(type ==='page-unload'){isCrash();const nowTime = performance.now();if(nowTime - pageTime >= setTimeoutTime *2&&!crash){reportError();}clearInterval(intervalId);close();}};
intervalId =setInterval(()=>{isCrash();sendHeartbeat();}, setTimeoutTime);主线程
functioncrashLoop():void{const workerBlob =newBlob([workerCode],{type:'application/javascript'})const workerUrl =URL.createObjectURL(workerBlob)const worker =newWorker(workerUrl)
worker.postMessage({id: userId, url })
worker.onmessage=(event: MessageEvent)=>{const{ type }= event.data
if(type ==='heartbeat'){const eventData =getRecordScreenData()const behavior =getBehaviour()const state = behavior?.breadcrumbs?.state ||[]
worker.postMessage({type:'heartbeat-response',pageTime: performance.now(),pageUrl: window.location.href,
eventData,
state
})}}// 页面卸载时通知Worker
window.addEventListener('beforeunload',()=>{
worker.postMessage({type:'page-unload'})})}

发布评论