Merge branch 'opt' into 'master'

Opt

See merge request !2

package-lock.json

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

package.json

 {
   "name": "@tuia/rip",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Tools for user behavior recording and playback based on rrweb",
   "main": "dist/index.js",
   "scripts": {

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

@@ -13,10 +13,9 @@ class Reporter {
   };
   recordKey = "";
   environmentUrl = ""; // 环境配置
-  isUploading = false; // 是否在上传cdn
   bus = []; // 上传分片数据
   counter = new Counter(); // 计数器和recordKey一起重置
-  cache = []; // cdn数据缓存
+  uploadingPile = new Set([]);
   init({ env, ...baseInfo }) {
     this.baseInfo = baseInfo;
     this.setEnvironment(env);
@@ -40,11 +39,21 @@ class Reporter {
   }
   // 上传CDN
   toCDN(payload) {
-    this.isUploading = true;
     const blob = new Blob([JSON.stringify(payload)], { type: "application/json" });
     const formData = new FormData();
+    // 保存上下文
     const trackId = this.counter.count;
+    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,
+      recordKey: this.recordKey,
+      trackId: trackId,
+      isCDN: true
+    };
     try {
       fetch(`${this.environmentUrl}/upload`, {
         // fetch(`http://localhost:3000/upload`, {
@@ -56,36 +65,28 @@ class Reporter {
           return res.json();
         })
         .then(res => {
-          // 如果cache中有数据，说明是多次提交并且数据缓存在了cache中，那么我们全量快照可能在cache[0]
-          const snapArr = this.cache && this.cache.length > 0 ? this.cache : this.bus;
-          const snapIndex = snapArr.findIndex((item, index) => {
-            if (item.track.type === 2) {
-              return index;
-            }
-          });
-          const extra = {
-            ...this.baseInfo,
-            recordKey: this.recordKey,
-            trackId: trackId,
-            isCDN: true,
-          };
-          log("type=2定位", snapIndex);
-          log("cnd Url", res.data.url);
-          // 向cache或者bus中注入
-          if (this.cache && this.cache.length > 0) {
-            this.cache[0].splice(snapIndex, 1, dataWrapper(extra, res.data.url));
+          /** 因为在路由跳转前可能存在上个路由里面遗留的部分数据，
+           * 并且销毁dom的时候数据量又大于40000，那么一定调用了上传toCDN的接口
+           * 而toCDN的接口会保存之前的trackId，而this.bus在路由跳转的时候会被清空
+           * 那么上下文的trackId在this.bus中就会找不到，找到也不是正确的*/
+          if (this.recordKey !== recordKey) {
+            log('路由跳转遗留数据');
+            return;
           } else {
-            this.bus.splice(snapIndex, 1, dataWrapper(extra, res.data.url));
-          }
-          this.isUploading = false;
-          // 如果cache里面有数据需要上传的，那么先上传
-          if (this.cache && this.cache.length > 0) {
-            this.cache.map(item => {
-              this.report(item);
+            const snapIndex = this.bus && this.bus.findIndex((item, index) => {
+              if (item.trackId === trackId) {
+                return index;
+              }
             });
-            this.cache = [];
+            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);
+            return res;
           }
-          return res;
         });
     } catch (e) {
       log("上传失败，原因：", e.message);
@@ -96,20 +97,26 @@ class Reporter {
       ...this.baseInfo,
       recordKey: this.recordKey,
       trackId: this.counter.next(),
-      isCDN: false,
+      isCDN: false
     };
     this.bus.push(dataWrapper(extra, data));
   }
-  // 上传
-  report(data) {
-    log("上传数据", data);
-    const reportData = data;
-    this.bus = [];
-    if (this.isUploading) {
-      log("cdn数据正在上传，先将内容存到cache", this.cache);
-      this.cache.push(reportData);
+  // 尝试上传
+  tryReport(isOverHundred) {
+    // 如果有cdn的内容在上传，那么我们不做任何的上传直接返回
+    if (this.uploadingPile.length > 0) {
+      log('有cdn的内容在上传', this.uploadingPile);
       return;
+    } else {
+      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`, {
@@ -137,14 +144,8 @@ class Reporter {
   }
   // 重置数据（分条使用）
   reset() {
-    // 将前部分的数据在清空前上传
-    // if(this.bus.length > 0) {
-    //   this.report();
-    // }
-    this.cache = [];
     this.bus = [];
     this.counter.reset();
-    this.generateKey();
   }
 }
 

src/lib/tracks.worker.js

@@ -14,26 +14,26 @@ onmessage = ({ data: { type, payload } }) => {
       // todo : 数据本地存储
       reporter.toBus(payload);
       log("bus", reporter.bus);
-      // todo : 全量快照上传cdn
-      log("track type", payload.type, payload);
-      if (payload.type === 2) {
+      // todo : 全量快照上传cdn || 或者字符内容超过3000
+      let strData = JSON.stringify(payload.data);
+      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.report(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.report(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;