@lvce-editor/renderer-process 30.55.2 → 30.57.0

package/dist/sessionReplayWorkerMain.js

@@ -0,0 +1,219 @@
+const version = 1;
+const maxEventBytes = 750_000;
+const maxSessionBytes = 64 * 1024 * 1024;
+const bytes = (value) => new TextEncoder().encode(JSON.stringify(value)).byteLength;
+
+const validateSession = (session) => {
+  if (session?.version !== version || !Array.isArray(session.events) || session.events.length > 200_000 || bytes(session) > maxSessionBytes) {
+    throw new Error('Unsupported or oversized session replay')
+  }
+  let time = 0;
+  for (const [sequence, event] of session.events.entries()) {
+    if (event.sequence !== sequence || !Number.isFinite(event.timestamp) || event.timestamp < time || !['frame', 'message'].includes(event.type)) {
+      throw new Error('Invalid session replay event sequence')
+    }
+    if (bytes(event) > maxEventBytes) throw new Error('Session replay event is too large')
+    time = event.timestamp;
+  }
+  return session
+};
+
+// Binary search makes dragging independent of the number of diagnostic messages.
+const loadContent = (session) => {
+  validateSession(session);
+  const frames = session.events.filter((event) => event.type === 'frame');
+  if (!frames.length) throw new Error('This session has no visual frames')
+  const duration = session.events.at(-1)?.timestamp || 0;
+  const seek = (timestamp) => {
+    const position = Math.max(0, Math.min(duration, Number(timestamp) || 0));
+    let low = 0;
+    let high = frames.length;
+    while (low < high) {
+      const middle = (low + high) >>> 1;
+      if (frames[middle].timestamp <= position) low = middle + 1;
+      else high = middle;
+    }
+    return { position, duration, frame: frames[Math.max(0, low - 1)].data }
+  };
+  return { duration, seek }
+};
+
+const createRecorder = ({ storage, fetch: request = globalThis.fetch, now = () => performance.now() }) => {
+  let metadata;
+  let options;
+  let events = [];
+  let pending = [];
+  let size = 0;
+  let origin = 0;
+  let remote;
+  let uploadPromise;
+  let lastError = '';
+  let saved = 0;
+  let uploaded = 0;
+  const start = async (config) => {
+    if (metadata) throw new Error('A session is already recording')
+    options = config;
+    origin = now();
+    metadata = { id: crypto.randomUUID(), version, createdAt: new Date().toISOString() };
+    if (options.local) await storage.save(metadata, []);
+    return metadata.id
+  };
+  const record = async (type, data) => {
+    if (!metadata) return
+    const event = { sequence: events.length, timestamp: Math.max(events.at(-1)?.timestamp || 0, now() - origin), type, data };
+    const eventSize = bytes(event);
+    if (eventSize > maxEventBytes || size + eventSize > maxSessionBytes)
+      throw new Error('Session replay storage limit reached; download this session and start a new one')
+    size += eventSize;
+    events.push(event);
+    if (options.upload) pending.push(event);
+    if (options.local) {
+      await storage.save(metadata, [event]);
+      saved++;
+    }
+  };
+  const doUpload = async () => {
+    if (!options?.upload || !pending.length) return
+    const endpoint = new URL(options.endpoint);
+    if (!['https:', 'http:'].includes(endpoint.protocol)) throw new Error('Invalid session replay backend URL')
+    const headers = { 'Content-Type': 'application/json', ...(options.token ? { Authorization: `Bearer ${options.token}` } : {}) };
+    const send = async (url, body) => {
+      const response = await request(url, {
+        method: 'POST',
+        credentials: 'include',
+        headers,
+        body: JSON.stringify(body),
+        signal: AbortSignal.timeout(10_000),
+      });
+      if (!response.ok) throw new Error(`Session replay upload failed (${response.status})`)
+      return response.json()
+    };
+    if (!remote) remote = await send(endpoint, { version, createdAt: metadata.createdAt });
+    while (pending.length) {
+      const batch = [];
+      let batchBytes = 0;
+      for (const event of pending) {
+        const length = bytes(event);
+        if (batch.length && (batchBytes + length > 800_000 || batch.length >= 250)) break
+        batch.push(event);
+        batchBytes += length;
+      }
+      const url = new URL(endpoint);
+      url.pathname = `${url.pathname.replace(/\/$/, '')}/${encodeURIComponent(remote.id)}/events`;
+      await send(url, { uploadToken: remote.uploadToken, events: batch });
+      pending.splice(0, batch.length);
+      uploaded += batch.length;
+    }
+  };
+  const flush = () => {
+    uploadPromise ||= doUpload()
+      .then(
+        () => {
+          lastError = '';
+        },
+        (error) => {
+          lastError = error.message;
+          throw error
+        },
+      )
+      .finally(() => {
+        uploadPromise = undefined;
+      });
+    return uploadPromise
+  };
+  return {
+    start,
+    record,
+    flush,
+    export: () => ({ ...metadata, events }),
+    status: () => ({ id: metadata?.id, events: events.length, saved, uploaded, pending: pending.length, bytes: size, error: lastError }),
+  }
+};
+
+const open = () =>
+  new Promise((resolve, reject) => {
+    const request = indexedDB.open('lvce-session-replays', 1);
+    request.onupgradeneeded = () => {
+      request.result.createObjectStore('sessions', { keyPath: 'id' });
+      request.result.createObjectStore('events', { keyPath: ['sessionId', 'sequence'] });
+    };
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+
+const createStorage = async () => {
+  const db = await open();
+  const transaction = (stores, action) =>
+    new Promise((resolve, reject) => {
+      const tx = db.transaction(stores, 'readwrite');
+      action(tx);
+      tx.oncomplete = () => resolve();
+      tx.onerror = tx.onabort = () => reject(tx.error || new Error('Replay storage transaction aborted'));
+    });
+  return {
+    save: (session, events) =>
+      transaction(['sessions', 'events'], (tx) => {
+        tx.objectStore('sessions').put(session);
+        for (const event of events) tx.objectStore('events').put({ ...event, sessionId: session.id });
+      }),
+    read: (id) =>
+      new Promise((resolve, reject) => {
+        const tx = db.transaction(['sessions', 'events']);
+        const metadata = tx.objectStore('sessions').get(id);
+        const events = tx.objectStore('events').getAll(IDBKeyRange.bound([id, 0], [id, Number.MAX_SAFE_INTEGER]));
+        tx.oncomplete = () =>
+          metadata.result
+            ? resolve({ ...metadata.result, events: events.result.map(({ sessionId, ...event }) => event) })
+            : reject(new Error('Session replay not found'));
+        tx.onerror = () => reject(tx.error);
+      }),
+    close: () => db.close(),
+  }
+};
+
+let storage;
+let recorder;
+let content;
+let queue = Promise.resolve();
+let timer;
+const getStorage = async () => (storage ||= await createStorage());
+const commands = {
+  async start(options) {
+    recorder = createRecorder({ storage: options.local ? await getStorage() : undefined });
+    const id = await recorder.start(options);
+    clearInterval(timer);
+    timer = setInterval(() => recorder.flush().catch(() => {}), 2000);
+    return id
+  },
+  record: (type, data) => recorder.record(type, data),
+  flush: () => recorder.flush(),
+  export: () => recorder.export(),
+  status: () => recorder.status(),
+  async load(source) {
+    let session;
+    if (source.localId) session = await (await getStorage()).read(source.localId);
+    else if (source.url) {
+      const response = await fetch(source.url, { credentials: 'include', headers: { Accept: 'application/json' } });
+      if (!response.ok) throw new Error(`Cannot load session replay (${response.status})`)
+      session = await response.json();
+    } else session = source.session;
+    content = loadContent(session);
+    return content.seek(0)
+  },
+  seek: (timestamp) => content.seek(timestamp),
+  async stop() {
+    clearInterval(timer);
+    await recorder?.flush();
+    storage?.close();
+  },
+};
+self.onmessage = ({ data: { id, method, params = [] } }) => {
+  queue = queue.then(async () => {
+    try {
+      if (!Object.hasOwn(commands, method)) throw new Error('Unknown session replay command')
+      self.postMessage({ id, result: await commands[method](...params) });
+    } catch (error) {
+      self.postMessage({ id, error: error.message });
+    }
+  });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/renderer-process",
-  "version": "30.55.2",
+  "version": "30.57.0",
   "keywords": [
     "lvce-editor",
     "renderer-process"