fix ui: add wait cycle for canvas url

frontend/app/player/common/types.ts

@@ -51,6 +51,7 @@ export interface SessionFilesInfo {
   frustrations: Record<string, any>[]
   errors: Record<string, any>[]
   agentInfo?: { email: string, name: string }
+  canvasURL?: string[]
 }
 
 export type PlayerMsg = Message & { tabId: string }

frontend/app/player/web/MessageLoader.ts

@@ -129,8 +129,35 @@ export default class MessageLoader {
     };
   }
 
+  waitForCanvasURL = () => {
+    const start = Date.now();
+    return new Promise((resolve) => {
+      const checkInterval = setInterval(() => {
+        if (Boolean(this.session.canvasURL?.length)) {
+          clearInterval(checkInterval);
+          resolve(true);
+        } else {
+          if (Date.now() - start > 15000) {
+            clearInterval(checkInterval);
+            throw new Error('could not load canvas data after 15 seconds')
+          }
+        }
+      }, 100);
+    });
+  };
+
   processMessages = (msgs: PlayerMsg[], file?: string) => {
-    msgs.forEach((msg) => {
+    msgs.forEach(async (msg) => {
+      if (msg.tp === MType.CanvasNode) {
+        /**
+         * in case of prefetched sessions with canvases,
+         * we wait for signed urls and then parse the session
+         * */
+        if (file?.includes('p:dom') && !Boolean(this.session.canvasURL?.length)) {
+          console.warn('⚠️Openreplay is waiting for canvas node to load')
+          await this.waitForCanvasURL();
+        }
+      }
       this.messageManager.distributeMessage(msg);
     });
     logger.info('Messages count: ', msgs.length, msgs, file);

frontend/app/player/web/MessageManager.ts

@@ -106,7 +106,7 @@ export default class MessageManager {
 
   public readonly decoder = new Decoder();
 
-  private readonly sessionStart: number;
+  private sessionStart: number;
   private lastMessageTime: number = 0;
   private firstVisualEventSet = false;
   public readonly tabs: Record<string, TabSessionManager> = {};
@@ -114,7 +114,7 @@ export default class MessageManager {
   private activeTab = '';
 
   constructor(
-    private readonly session: SessionFilesInfo,
+    private session: SessionFilesInfo,
     private readonly state: Store<State & { time: number }>,
     private readonly screen: Screen,
     private readonly initialLists?: Partial<InitialLists>,
@@ -134,6 +134,13 @@ export default class MessageManager {
     return Object.values(this.tabs)[0].getListsFullState();
   };
 
+  public setSession = (session: SessionFilesInfo) => {
+    this.session = session;
+    this.sessionStart = this.session.startedAt;
+    this.state.update({ sessionStart: this.sessionStart });
+    Object.values(this.tabs).forEach((tab) => tab.setSession(session));
+  }
+
   public updateLists(lists: RawList) {
     Object.keys(this.tabs).forEach((tab) => {
       this.tabs[tab]!.updateLists(lists);

frontend/app/player/web/TabManager.ts

@@ -80,7 +80,7 @@ export default class TabSessionManager {
   private canvasReplayWalker: ListWalker<CanvasNode> = new ListWalker();
 
   constructor(
-    private readonly session: any,
+    private session: any,
     private readonly state: Store<{ tabStates: { [tabId: string]: TabState } }>,
     private readonly screen: Screen,
     private readonly id: string,
@@ -98,6 +98,10 @@ export default class TabSessionManager {
     });
   }
 
+  setSession = (session: any) => {
+    this.session = session;
+  }
+
   public getNode = (id: number) => {
     return this.pagesManager.getNode(id);
   };

frontend/app/player/web/WebPlayer.ts

@@ -95,6 +95,7 @@ export default class WebPlayer extends Player {
   reinit(session: SessionFilesInfo) {
     if (this.wpState.get().mobsFetched) return; // already initialized
     this.messageLoader.setSession(session)
+    this.messageManager.setSession(session)
     void this.messageLoader.loadFiles();
 
     this.targetMarker = new TargetMarker(this.screen, this.wpState)