ui: fix filekey on prefetched sessions

frontend/app/components/Session/WebPlayer.tsx

@@ -88,7 +88,7 @@ function WebPlayer(props: any) {
     );
     if (usePrefetched) {
       if (mobData?.data) {
-        WebPlayerInst.preloadFirstFile(mobData?.data);
+        WebPlayerInst.preloadFirstFile(mobData?.data, mobData?.fileKey);
       }
     }
     setContextValue({ player: WebPlayerInst, store: PlayerStore });

frontend/app/components/shared/SessionItem/SessionItem.tsx

@@ -182,6 +182,7 @@ function SessionItem(props: RouteComponentProps & Props) {
       await sessionStore.getFirstMob(sessionId);
       setPrefetched(PREFETCH_STATE.fetched);
     } catch (e) {
+      setPrefetched(PREFETCH_STATE.none)
       console.error('Error while prefetching first mob', e);
     }
   }, [prefetchState, live, isAssist, isMobile, sessionStore, sessionId]);

frontend/app/mstore/sessionStore.ts

@@ -200,7 +200,7 @@ export default class SessionStore {
 
   userTimezone = '';
 
-  prefetchedMobUrls: Record<string, { data: Uint8Array; entryNum: number }> =
+  prefetchedMobUrls: Record<string, { data: Uint8Array; entryNum: number, fileKey?: string }> =
     {};
 
   prefetched: boolean = false;
@@ -230,13 +230,13 @@ export default class SessionStore {
   };
 
   getFirstMob = async (sessionId: string) => {
-    const { domURL } = await sessionService.getFirstMobUrl(sessionId);
+    const { domURL, fileKey } = await sessionService.getFirstMobUrl(sessionId);
     await loadFile(domURL[0], (data) =>
-      this.setPrefetchedMobUrl(sessionId, data),
+      this.setPrefetchedMobUrl(sessionId, data, fileKey),
     );
   };
 
-  setPrefetchedMobUrl = (sessionId: string, fileData: Uint8Array) => {
+  setPrefetchedMobUrl = (sessionId: string, fileData: Uint8Array, fileKey?: string) => {
     const keys = Object.keys(this.prefetchedMobUrls);
     const toLimit = 10 - keys.length;
     if (toLimit < 0) {
@@ -255,6 +255,7 @@ export default class SessionStore {
         : 0;
     this.prefetchedMobUrls[sessionId] = {
       data: fileData,
+      fileKey,
       entryNum: nextEntryNum,
     };
   };

frontend/app/player/common/types.ts

@@ -45,7 +45,7 @@ export interface SessionFilesInfo {
   devtoolsURL: string[];
   /** deprecated */
   mobsUrl: string[];
-  fileKey: string | null;
+  fileKey?: string | null;
   events: Record<string, any>[];
   stackEvents: Record<string, any>[];
   frustrations: Record<string, any>[];

frontend/app/player/web/MessageLoader.ts

@@ -224,7 +224,8 @@ export default class MessageLoader {
 
   preloaded = false;
 
-  async preloadFirstFile(data: Uint8Array) {
+  async preloadFirstFile(data: Uint8Array, fileKey?: string) {
+    this.session.fileKey = fileKey;
     this.mobParser = this.createNewParser(true, this.processMessages, 'p:dom');
 
     try {

frontend/app/player/web/WebPlayer.ts

@@ -102,8 +102,8 @@ export default class WebPlayer extends Player {
     window.playerJumpToTime = this.jump.bind(this);
   }
 
-  preloadFirstFile(data: Uint8Array) {
-    void this.messageLoader.preloadFirstFile(data);
+  preloadFirstFile(data: Uint8Array, fileKey?: string) {
+    void this.messageLoader.preloadFirstFile(data, fileKey);
   }
 
   reinit(session: SessionFilesInfo) {

frontend/app/services/SessionService.ts

@@ -45,7 +45,7 @@ export default class SettingsService {
       .catch((e) => Promise.reject(e));
   }
 
-  getFirstMobUrl(sessionId: string): Promise<{ domURL: string[] }> {
+  getFirstMobUrl(sessionId: string): Promise<{ domURL: string[], fileKey?: string }> {
     return this.client
       .get(`/sessions/${sessionId}/first-mob`)
       .then((r) => r.json())