保存上下文tryReport

package-lock.json

 {
   "name": "@tuia/rip",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/lib/monitor.js

@@ -31,7 +31,7 @@ class Monitor {
     this.tracksWorker.onmessage = (event) => {
       switch(event.data) {
         case "resetRecord":
-          this.record();
+          this.record(); // 开启录制
           break;
         default:
           console.log("unknow action", event.data);
@@ -74,6 +74,8 @@ class Monitor {
       clearTimeout(timer);
       timer = setTimeout(() => {
         console.log('hashchange reset');
+        // 路由跳转的前关闭录制
+        this.stop();
         this.reset({ path: location.hash });
       }, 1000);
     });

src/lib/reporter.js

@@ -43,7 +43,10 @@ class Reporter {
     const formData = new FormData();
     // 保存上下文
     const trackId = this.counter.count;
-    uploadingPile.add(trackId);
+    const recordKey = this.recordKey;
+    log('trackId', trackId);
+    log('recordKey', recordKey);
+    this.uploadingPile.add(trackId);
     formData.append("file", blob, `${this.recordKey + trackId}.json`);
     const extra = {
       ...this.baseInfo,
@@ -62,20 +65,28 @@ class Reporter {
           return res.json();
         })
         .then(res => {
-          const snapIndex =  this.bus && this.bus.map((item, index) => {
-            if(item.trackId === trackId) {
+          /** 因为在路由跳转前可能存在上个路由里面遗留的部分数据，
+           * 并且销毁dom的时候数据量又大于40000，那么一定调用了上传toCDN的接口
+           * 而toCDN的接口会保存之前的trackId，而this.bus在路由跳转的时候会被清空
+           * 那么上下文的trackId在this.bus中就会找不到，找到也不是正确的*/
+          if (this.recordKey !== recordKey) {
+            log('路由跳转遗留数据');
+            return;
+          } else {
+            const snapIndex = this.bus && this.bus.findIndex((item, index) => {
+              if (item.trackId === trackId) {
                 return index;
               }
             });
-          log("url定位", snapIndex);
-          log("url内容", res.data.url);
+            log('snapIndex', snapIndex);
             // 向bus中注入
             this.bus.splice(snapIndex, 1, dataWrapper(extra, res.data.url));
             // 在trackId之前 包括trackId本身的数据全部上传
+            this.uploadingPile.delete(trackId);
             const reportData = this.bus.splice(0, snapIndex + 1);
             this.report(reportData);
-          uploadingPile.delete(trackId);
             return res;
+          }
         });
     } catch (e) {
       log("上传失败，原因：", e.message);
@@ -91,18 +102,21 @@ class Reporter {
     this.bus.push(dataWrapper(extra, data));
   }
   // 尝试上传
-  tryReport(data) {
+  tryReport(isOverHundred) {
     // 如果有cdn的内容在上传，那么我们不做任何的上传直接返回
     if (this.uploadingPile.length > 0) {
-      log('有cdn的内容在上传');
+      log('有cdn的内容在上传', this.uploadingPile);
       return;
     } else {
-      this.report(data);
+      let reportData = isOverHundred ? this.bus.splice(0, 100) : this.bus.splice(0, this.bus.length);
+      this.report(reportData);
     }
+
   }
   // 真正上传
   report(data) {
     log("上传数据", data);
+    log('上传后的bus', this.bus);
     try {
       fetch(`${this.environmentUrl}/behavior/record`, {
         // fetch(`http://localhost:3000/behavior/record`, {
@@ -132,7 +146,6 @@ class Reporter {
   reset() {
     this.bus = [];
     this.counter.reset();
-    this.generateKey();
   }
 }
 

src/lib/tracks.worker.js

@@ -16,24 +16,24 @@ onmessage = ({ data: { type, payload } }) => {
       log("bus", reporter.bus);
       // todo : 全量快照上传cdn || 或者字符内容超过3000
       let strData = JSON.stringify(payload.data);
-      if (payload.type === 2 || strData.length > 30000) {
+      if (payload.type === 2 || strData.length > 40000) {
         reporter.toCDN(payload);
       }
       // todo : 数据压缩
       // todo : 根据事件类型优先级触发上传策略(click)
-      if (payload.data.source === 2 && (payload.data.type === 2 || payload.data.type === 3) && !reporter.isUploading) {
-        reporter.tryReport(reporter.bus);
+      if (payload.data.source === 2 && (payload.data.type === 2 || payload.data.type === 3)) {
+        reporter.tryReport(false);
       }
       // todo : 数据超出100条上线,自动上传
-      if (reporter.bus.length > 100 && !reporter.isUploading) {
-        reporter.tryReport(reporter.bus);
+      if (reporter.bus.length > 100) {
+        reporter.tryReport(true);
       }
       break;
     case "reset":
       // todo : 重置参数,重新生成recordKey
-      reporter.updateData(payload);
       reporter.reset();
-      postMessage('resetRecord');
+      reporter.updateData(payload);
+      postMessage('resetRecord'); // 数据重置之后通知录制开启
       log("path", reporter.baseInfo.path);
       log("分片id", reporter.recordKey);
       break;