Merge pull request #569 from openreplay/fix-tracker-srcset-fix

Tracker 3.5.15
fix(tracker): fix srcset tracking
fix(tracker): capture timing of images with relative urls
fix(tracker): observer - Removed recents type overrides Changed

frontend/app/player/MessageDistributor/messages/MFileReader.ts

@@ -45,9 +45,11 @@ export default class MFileReader extends RawMessageReader {
     }
 
     while (this.needSkipMessage()) {
-      if (!this.readRawMessage()) {
+      const skippedMessage = this.readRawMessage()
+      if (!skippedMessage) {
         return null
       }
+      logger.log("Skipping message: ", skippedMessage)
     }
 
     this.pLastMessageID = this.p

tracker/tracker/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "3.5.14",
+  "version": "3.5.15",
   "keywords": [
     "logging",
     "replay"

tracker/tracker/src/main/app/observer/observer.ts

@@ -184,7 +184,7 @@ export default abstract class Observer {
     const [ id,  isNew ]= this.app.nodes.registerNode(node);
     if (isNew){
       this.recents.set(id, RecentsType.New)
-    } else if (!this.recents.has(id)) {
+    } else if (this.recents.get(id) !== RecentsType.New) { // can we do just `else` here?
       this.recents.set(id, RecentsType.Removed)
     }
   }
@@ -231,6 +231,8 @@ export default abstract class Observer {
     // TODO: Clean the logic (though now it workd fine)
     if (!hasTag(node, "HTML") || !this.isTopContext) {
       if (parent === null) {
+        // Sometimes one observation contains attribute mutations for the removimg node, which gets ignored here.
+        // That shouldn't affect the visual rendering ( should it? )
         this.unbindNode(node);
         return false;
       }

tracker/tracker/src/main/modules/img.ts

@@ -3,7 +3,20 @@ import { timestamp, isURL } from "../utils.js";
 import { ResourceTiming, SetNodeAttributeURLBased, SetNodeAttribute } from "../../common/messages.js";
 import { hasTag } from "../app/guards.js";
 
-
+function resolveURL(url: string, location: Location = document.location) {
+  url = url.trim()
+  if  (url.startsWith('/')) {
+    return location.origin + url
+  } else if (
+    url.startsWith('http://') ||
+    url.startsWith('https://') ||
+    url.startsWith('data:') // any other possible value here?
+   ){
+    return url
+  } else {
+   return location.origin + location.pathname + url
+  }
+}
 
 const PLACEHOLDER_SRC = "https://static.openreplay.com/tracker/placeholder.jpeg";
 
@@ -28,15 +41,19 @@ export default function (app: App): void {
     if (!complete) {
       return;
     }
+    const resolvedSrc = resolveURL(src || '') // Src type is null sometimes. - is it true?
     if (naturalWidth === 0 && naturalHeight === 0) {
-      if (src != null && isURL(src)) { // TODO: How about relative urls ? Src type is null sometimes.
-        app.send(new ResourceTiming(timestamp(), 0, 0, 0, 0, 0, src, 'img'));
+      if (isURL(resolvedSrc)) {
+        app.send(new ResourceTiming(timestamp(), 0, 0, 0, 0, 0, resolvedSrc, 'img'));
       }
-    } else if (src.length >= 1e5 || app.sanitizer.isMasked(id)) {
+    } else if (resolvedSrc.length >= 1e5 || app.sanitizer.isMasked(id)) {
       sendPlaceholder(id, this)
     } else {
-      app.send(new SetNodeAttributeURLBased(id, 'src', src, app.getBaseHref()));
-      srcset && app.send(new SetNodeAttribute(id, 'srcset', srcset));
+      app.send(new SetNodeAttribute(id, 'src', resolvedSrc))
+      if (srcset) {
+        const resolvedSrcset = srcset.split(',').map(str => resolveURL(str)).join(',')
+        app.send(new SetNodeAttribute(id, 'srcset', resolvedSrcset))
+      }
     }
   });
 

tracker/tracker/src/main/utils.ts

@@ -13,7 +13,7 @@ export function normSpaces(str: string): string {
 
 // isAbsoluteUrl regexp:  /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url)
 export function isURL(s: string): boolean {
-  return s.substr(0, 8) === 'https://' || s.substr(0, 7) === 'http://';
+  return s.startsWith('https://')|| s.startsWith('http://');
 }
 
 export const IN_BROWSER = !(typeof window === "undefined");