@lowdefy/server-dev 6.1.0 → 7.1.0

package/client/recorder/createRecorder.js

@@ -0,0 +1,216 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import createPairingBuffer from './createPairingBuffer.js';
+import createPasswordRedactor from './createPasswordRedactor.js';
+import createRecordBatcher from './createRecordBatcher.js';
+import createRecordingSession from './createRecordingSession.js';
+import keyChord from './keyChord.js';
+import sendRecords from './sendRecords.js';
+
+// Dev tools draw their own UI over the app; clicks on it are not the app.
+const IGNORED_ROOTS = '[data-lowdefy-feedback]';
+
+function elementOf(target) {
+  if (target === null || target === undefined) return null;
+  if (target.nodeType === 1) return target;
+  return target.parentElement ?? null;
+}
+
+function valueOf(element) {
+  if (element.type === 'checkbox' || element.type === 'radio') return element.checked;
+  if ('value' in element) return element.value;
+  return element.textContent ?? null;
+}
+
+// Guards a listener: a bad payload or a broken hook must never reach the app
+// the recorder rides on.
+function safely(handler) {
+  return function guarded(...args) {
+    try {
+      handler(...args);
+    } catch {
+      // Recording is best effort.
+    }
+  };
+}
+
+// The dev recorder for one tab: subscribes to the engine's trace hook with
+// state, listens to DOM interactions in the capture phase, pairs them through
+// the pairing buffer and batches finished records to /api/dev-recording. It
+// opens no connection of its own: sends are short keepalive POSTs, and the
+// recorder flushes on the shared dev stream's reload event (attachStream).
+// Returns null, subscribing to nothing, when recording is off for this page.
+function createRecorder({ basePath, lowdefy, recording, window, getTrace }) {
+  if (recording?.enabled !== true) return null;
+  const { document } = window;
+  const trace = getTrace(lowdefy);
+  const session = createRecordingSession({ storage: window.sessionStorage });
+  const batcher = createRecordBatcher({
+    send: (records) => sendRecords({ basePath, records, fetch: window.fetch.bind(window) }),
+  });
+  const buffer = createPairingBuffer({
+    onRecord: (record) => batcher.add(record),
+    getSession: () => session.getId(),
+    getRoles: () => lowdefy.user?.roles ?? [],
+    getBuild: () => lowdefy._devBuildId ?? null,
+    redactor: createPasswordRedactor(),
+  });
+  let pageId = null;
+  // A pageview waits here until the page it shows is on screen, because only
+  // the fetched page says which page, and which path values, a path is: the
+  // pageview fires on the route change, while the config fetch is suspended.
+  // A path left before its page was shown names no page and is not recorded.
+  let pendingPageview = null;
+  // The page on screen and the path it was shown for.
+  let shown = null;
+
+  function currentUrl() {
+    return `${window.location.pathname}${window.location.search}`;
+  }
+
+  function describe(element) {
+    if (element === null || element.closest(IGNORED_ROOTS) !== null) return null;
+    return trace.describeElement(element);
+  }
+
+  const onClick = safely((event) => {
+    const element = elementOf(event.target);
+    const target = describe(element);
+    if (target === null) return;
+    buffer.addInteraction({ kind: 'click', element, target, pageId });
+  });
+
+  const onInput = safely((event) => {
+    const element = elementOf(event.target);
+    const target = describe(element);
+    if (target === null) return;
+    buffer.addInteraction({ kind: 'change', element, target, pageId, value: valueOf(element) });
+  });
+
+  const onKeyDown = safely((event) => {
+    const key = keyChord(event, { platform: window.navigator.platform });
+    if (key === null) return;
+    const element = elementOf(event.target);
+    if (element !== null && element.closest(IGNORED_ROOTS) !== null) return;
+    const target = element === null || element === document.body ? null : describe(element);
+    buffer.addInteraction({ kind: 'key', element, target, pageId, key });
+  });
+
+  const onPopState = safely(() => {
+    buffer.addInteraction({ kind: 'back', pageId });
+  });
+
+  const onTrace = safely((payload) => {
+    buffer.addEvent(payload, { urlAfter: currentUrl() });
+  });
+
+  function flush() {
+    try {
+      buffer.flushAll();
+      return batcher.flush();
+    } catch {
+      return Promise.resolve();
+    }
+  }
+
+  // The pending pageview as a visit to `page`, under the build its config was
+  // served under (lowdefy._devBuildId, set as Page.jsx renders it).
+  function recordPendingPageview({ page }) {
+    const { t, path, url } = pendingPageview;
+    pendingPageview = null;
+    pageId = page.pageId;
+    shown = { path, page };
+    buffer.addInteraction({
+      t,
+      kind: 'pageview',
+      pageId: page.pageId,
+      pathParams: page.pathParams,
+      url,
+      build: lowdefy._devBuildId ?? null,
+    });
+  }
+
+  const onPageHide = safely(() => {
+    flush();
+  });
+
+  const unsubscribe = trace.subscribe(onTrace, { state: true });
+  document.addEventListener('click', onClick, true);
+  document.addEventListener('input', onInput, true);
+  document.addEventListener('keydown', onKeyDown, true);
+  window.addEventListener('popstate', onPopState);
+  window.addEventListener('pagehide', onPageHide);
+  window.__lowdefyRecorder = { flush };
+
+  // The time and url are the navigation's; the page and build wait for
+  // pageShown. `path` keys the visit, so moving between two instances of one
+  // page is a pageview. Coming back to the path of the page still on screen
+  // (the page between was never shown) brings no new page to show, so it is
+  // that page's visit at once.
+  function pageview({ path }) {
+    try {
+      pendingPageview = { t: Date.now(), path, url: currentUrl() };
+      if (shown !== null && shown.path === path) {
+        recordPendingPageview({ page: shown.page });
+      }
+    } catch {
+      // Recording is best effort.
+    }
+  }
+
+  // Called with the page instance on screen, { pageId, pathParams,
+  // instanceKey }, each time it changes. It changes after the Recorder's
+  // pageview for the same route change, once Page has rendered the fetched
+  // config; a config reload keeps the instance and changes nothing.
+  function pageShown(page) {
+    try {
+      if (pendingPageview === null) return;
+      recordPendingPageview({ page });
+    } catch {
+      // Recording is best effort.
+    }
+  }
+
+  // Listens on the tab's one shared dev stream (DevStreamContext), never a
+  // stream of its own. A config reload flushes so the attempt before it is
+  // sent promptly; each record already carries the build it was made under.
+  function attachStream(source) {
+    if (source === null || source === undefined) return () => {};
+    const onReload = safely(() => {
+      flush();
+    });
+    source.addEventListener('reload', onReload);
+    return () => source.removeEventListener('reload', onReload);
+  }
+
+  function stop() {
+    flush();
+    unsubscribe();
+    document.removeEventListener('click', onClick, true);
+    document.removeEventListener('input', onInput, true);
+    document.removeEventListener('keydown', onKeyDown, true);
+    window.removeEventListener('popstate', onPopState);
+    window.removeEventListener('pagehide', onPageHide);
+    if (window.__lowdefyRecorder?.flush === flush) {
+      delete window.__lowdefyRecorder;
+    }
+  }
+
+  return { attachStream, flush, pageShown, pageview, stop };
+}
+
+export default createRecorder;

package/client/recorder/createRecorder.test.mjs

@@ -0,0 +1,318 @@
+/**
+ * @jest-environment jsdom
+ */
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { jest } from '@jest/globals';
+
+import createRecorder from './createRecorder.js';
+
+let registry;
+let fetch;
+let recorder;
+
+function createRegistry() {
+  const listeners = [];
+  return {
+    listeners,
+    subscribe: jest.fn((listener, options) => {
+      listeners.push({ listener, options });
+      return () => listeners.splice(listeners.indexOf(listener), 1);
+    }),
+    describeElement: jest.fn((element) => ({
+      page_id: 'tickets',
+      block_id: element.closest('[id^="bl-"]')?.id.slice(3) ?? null,
+      block_type: null,
+      row: null,
+      column: null,
+      text: element.textContent.trim() || null,
+      nth: null,
+      option: false,
+      block_ids: element.closest('[id^="bl-"]') ? [element.closest('[id^="bl-"]').id.slice(3)] : [],
+    })),
+  };
+}
+
+function start(recording = { enabled: true }, lowdefy = { user: { roles: ['admin'] } }) {
+  return createRecorder({
+    basePath: '/base',
+    lowdefy,
+    recording,
+    window,
+    getTrace: () => registry,
+  });
+}
+
+// The page instance on screen, as Routing hands it to the Recorder.
+function page(pageId, pathParams = {}) {
+  return { pageId, pathParams, instanceKey: `page:${pageId}:${JSON.stringify(pathParams)}` };
+}
+
+function sentBodies() {
+  return fetch.mock.calls.map(([, init]) => JSON.parse(init.body));
+}
+
+beforeEach(() => {
+  registry = createRegistry();
+  fetch = jest.fn(() => Promise.resolve({ status: 204 }));
+  window.fetch = fetch;
+  window.sessionStorage.clear();
+  document.body.innerHTML = '<div id="bl-save"><button id="save">Save</button></div>';
+  recorder = null;
+});
+
+afterEach(() => {
+  recorder?.stop();
+  jest.restoreAllMocks();
+});
+
+test('createRecorder with recording off subscribes to nothing and adds no listener', () => {
+  const addListener = jest.spyOn(document, 'addEventListener');
+  expect(start({ enabled: false })).toBe(null);
+  expect(start(null)).toBe(null);
+  expect(registry.subscribe).not.toHaveBeenCalled();
+  expect(addListener).not.toHaveBeenCalled();
+  expect(window.__lowdefyRecorder).toBeUndefined();
+});
+
+test('createRecorder subscribes once with state and posts records as keepalive fetches', async () => {
+  recorder = start();
+  expect(registry.subscribe).toHaveBeenCalledTimes(1);
+  expect(registry.listeners[0].options).toEqual({ state: true });
+  recorder.pageview({ path: 'tickets' });
+  recorder.pageShown(page('tickets'));
+  document.getElementById('save').click();
+  await window.__lowdefyRecorder.flush();
+  expect(fetch).toHaveBeenCalledTimes(1);
+  const [url, init] = fetch.mock.calls[0];
+  expect(url).toBe('/base/api/dev-recording');
+  expect(init).toMatchObject({ method: 'POST', keepalive: true });
+  const [body] = sentBodies();
+  expect(body.session).toMatch(/^\d{8}T\d{6}Z-[a-z0-9]{6}$/);
+  expect(body.records.map((record) => record.kind)).toEqual(['pageview', 'click']);
+  expect(body.records[1]).toMatchObject({ roles: ['admin'], target: { block_id: 'save' } });
+});
+
+test('createRecorder flushes on pagehide', async () => {
+  recorder = start();
+  document.getElementById('save').click();
+  window.dispatchEvent(new Event('pagehide'));
+  await Promise.resolve();
+  expect(sentBodies()[0].records[0].kind).toBe('click');
+});
+
+test("createRecorder flushes on the shared stream's reload event and detaches cleanly", async () => {
+  recorder = start();
+  const source = new EventTarget();
+  const detach = recorder.attachStream(source);
+  document.getElementById('save').click();
+  source.dispatchEvent(new Event('reload'));
+  await Promise.resolve();
+  expect(fetch).toHaveBeenCalledTimes(1);
+  detach();
+  document.getElementById('save').click();
+  source.dispatchEvent(new Event('reload'));
+  expect(fetch).toHaveBeenCalledTimes(1);
+  expect(recorder.attachStream(null)).toEqual(expect.any(Function));
+});
+
+test('an interaction whose hold closes after a config reload keeps the build it was captured under', async () => {
+  const lowdefy = { user: { roles: ['admin'] }, _devBuildId: '2026-10-03T14:02:00.000Z' };
+  recorder = start({ enabled: true }, lowdefy);
+  const source = new EventTarget();
+  recorder.attachStream(source);
+  recorder.pageview({ path: 'tickets' });
+  recorder.pageShown(page('tickets'));
+  document.getElementById('save').click();
+  lowdefy._devBuildId = '2026-10-03T14:05:00.000Z';
+  source.dispatchEvent(new Event('reload'));
+  await Promise.resolve();
+  const [body] = sentBodies();
+  expect(body.records.map((record) => [record.kind, record.build])).toEqual([
+    ['pageview', '2026-10-03T14:02:00.000Z'],
+    ['click', '2026-10-03T14:02:00.000Z'],
+  ]);
+});
+
+test('an engine record keeps the build its trace payload arrived under', async () => {
+  const lowdefy = { user: { roles: ['admin'] }, _devBuildId: '2026-10-03T14:02:00.000Z' };
+  recorder = start({ enabled: true }, lowdefy);
+  registry.listeners[0].listener({
+    scope: 'page',
+    pageId: 'tickets',
+    blockId: 'tickets',
+    blockType: 'Box',
+    eventName: 'onMount',
+    success: true,
+    failure: null,
+    debounceMs: 0,
+    actions: [],
+    record: { startTimestamp: new Date(), responses: {} },
+    context: { state: {}, requests: {} },
+    stateBefore: {},
+  });
+  lowdefy._devBuildId = '2026-10-03T14:05:00.000Z';
+  await window.__lowdefyRecorder.flush();
+  const [record] = sentBodies()[0].records;
+  expect(record).toMatchObject({ kind: 'engine', build: '2026-10-03T14:02:00.000Z' });
+});
+
+test('a record made before any page config named its build carries build null', async () => {
+  recorder = start();
+  document.getElementById('save').click();
+  await window.__lowdefyRecorder.flush();
+  expect(sentBodies()[0].records[0].build).toBe(null);
+});
+
+test('flush resolves only after the POST settles', async () => {
+  let respond;
+  fetch.mockImplementation(
+    () =>
+      new Promise((resolve) => {
+        respond = resolve;
+      })
+  );
+  recorder = start();
+  document.getElementById('save').click();
+  let done = false;
+  const flushed = window.__lowdefyRecorder.flush().then(() => {
+    done = true;
+  });
+  await Promise.resolve();
+  await Promise.resolve();
+  expect(done).toBe(false);
+  respond({ status: 204 });
+  await flushed;
+  expect(done).toBe(true);
+});
+
+test('a throwing trace payload or describeElement leaves the app running', () => {
+  recorder = start();
+  expect(() => registry.listeners[0].listener(null)).not.toThrow();
+  registry.describeElement.mockImplementation(() => {
+    throw new Error('broken');
+  });
+  expect(() => document.getElementById('save').click()).not.toThrow();
+});
+
+test('a throwing sessionStorage leaves the recorder recording under an unremembered session', async () => {
+  jest.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+    throw new Error('SecurityError');
+  });
+  jest.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+    throw new Error('SecurityError');
+  });
+  recorder = start();
+  document.getElementById('save').click();
+  await window.__lowdefyRecorder.flush();
+  expect(sentBodies()[0].session).toMatch(/^\d{8}T\d{6}Z-[a-z0-9]{6}$/);
+});
+
+test('a failed send is dropped silently', async () => {
+  fetch.mockImplementation(() => Promise.reject(new Error('offline')));
+  recorder = start();
+  document.getElementById('save').click();
+  await expect(window.__lowdefyRecorder.flush()).resolves.toBeUndefined();
+});
+
+test('stop unsubscribes, removes listeners and the flush hook', () => {
+  const lowdefy = { user: { roles: ['admin'] } };
+  recorder = start({ enabled: true }, lowdefy);
+  recorder.stop();
+  expect(registry.listeners).toHaveLength(0);
+  expect(window.__lowdefyRecorder).toBeUndefined();
+  document.getElementById('save').click();
+  recorder = null;
+  expect(fetch).not.toHaveBeenCalled();
+});
+
+const BUILD_A = '2026-10-03T14:02:00.000Z';
+const BUILD_B = '2026-10-03T14:05:00.000Z';
+
+test('a pageview waits for its page to be shown and carries the build that page rendered under', async () => {
+  const lowdefy = { user: { roles: ['admin'] } };
+  recorder = start({ enabled: true }, lowdefy);
+  recorder.pageview({ path: 'tickets' });
+  await window.__lowdefyRecorder.flush();
+  expect(fetch).not.toHaveBeenCalled();
+  lowdefy._devBuildId = BUILD_A;
+  recorder.pageShown(page('tickets'));
+  await window.__lowdefyRecorder.flush();
+  const [record] = sentBodies()[0].records;
+  expect(record).toMatchObject({ kind: 'pageview', page_id: 'tickets', build: BUILD_A });
+});
+
+test('a navigation carries the build of the new page config, not the one the previous page ran on', async () => {
+  const lowdefy = { user: { roles: ['admin'] }, _devBuildId: BUILD_A };
+  recorder = start({ enabled: true }, lowdefy);
+  recorder.pageview({ path: 'tickets' });
+  recorder.pageShown(page('tickets'));
+  recorder.pageview({ path: 'orders' });
+  lowdefy._devBuildId = BUILD_B;
+  recorder.pageShown(page('orders'));
+  await window.__lowdefyRecorder.flush();
+  expect(sentBodies()[0].records.map((record) => record.build)).toEqual([BUILD_A, BUILD_B]);
+});
+
+test('a path left before its page was shown is not recorded', async () => {
+  const lowdefy = { user: { roles: ['admin'] }, _devBuildId: BUILD_A };
+  recorder = start({ enabled: true }, lowdefy);
+  recorder.pageview({ path: 'tickets' });
+  recorder.pageShown(page('tickets'));
+  recorder.pageview({ path: 'orders' });
+  recorder.pageview({ path: 'settings' });
+  window.dispatchEvent(new Event('pagehide'));
+  await Promise.resolve();
+  expect(sentBodies()[0].records.map((record) => record.page_id)).toEqual(['tickets']);
+});
+
+test('coming back to the page still on screen is its visit at once', async () => {
+  const lowdefy = { user: { roles: ['admin'] }, _devBuildId: BUILD_A };
+  recorder = start({ enabled: true }, lowdefy);
+  recorder.pageview({ path: 'tickets' });
+  recorder.pageShown(page('tickets'));
+  recorder.pageview({ path: 'broken' });
+  recorder.pageview({ path: 'tickets' });
+  await window.__lowdefyRecorder.flush();
+  expect(sentBodies()[0].records.map((record) => [record.kind, record.page_id])).toEqual([
+    ['pageview', 'tickets'],
+    ['pageview', 'tickets'],
+  ]);
+});
+
+test('a visit to a patterned page records the page and path values of the page shown', async () => {
+  const lowdefy = { user: { roles: ['admin'] }, _devBuildId: BUILD_A };
+  recorder = start({ enabled: true }, lowdefy);
+  recorder.pageview({ path: 'tickets/s/1' });
+  recorder.pageShown(page('ticket', { space: 's', ticket_id: '1' }));
+  recorder.pageview({ path: 'tickets/s/2' });
+  recorder.pageShown(page('ticket', { space: 's', ticket_id: '2' }));
+  await window.__lowdefyRecorder.flush();
+  expect(
+    sentBodies()[0].records.map((record) => [record.kind, record.page_id, record.path_params])
+  ).toEqual([
+    ['pageview', 'ticket', { space: 's', ticket_id: '1' }],
+    ['pageview', 'ticket', { space: 's', ticket_id: '2' }],
+  ]);
+});
+
+test('a page shown with no pageview pending records nothing', async () => {
+  recorder = start();
+  recorder.pageShown(page('tickets'));
+  await window.__lowdefyRecorder.flush();
+  expect(fetch).not.toHaveBeenCalled();
+});

package/client/recorder/createRecordingSession.js

@@ -0,0 +1,61 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { createTraceId, isTraceId } from '@lowdefy/helpers';
+
+const STORAGE_KEY = 'lowdefy_dev_recording';
+const IDLE_MS = 10 * 60 * 1000;
+
+function readStored(storage) {
+  try {
+    const stored = JSON.parse(storage.getItem(STORAGE_KEY));
+    if (isTraceId(stored?.id) && typeof stored.lastAt === 'number') return stored;
+  } catch {
+    // Blocked or malformed storage: start an unremembered session.
+  }
+  return null;
+}
+
+function writeStored(storage, value) {
+  try {
+    storage.setItem(STORAGE_KEY, JSON.stringify(value));
+  } catch {
+    // A browser that blocks site data records under an unremembered session.
+  }
+}
+
+// The tab's recording session. sessionStorage lives as long as the tab, so a
+// session survives the reload a dev server restart triggers; a gap of more
+// than 10 minutes starts a new one.
+function createRecordingSession({ storage, now = Date.now }) {
+  let current = null;
+
+  function getId() {
+    const time = now();
+    const stored = readStored(storage) ?? current;
+    const session =
+      stored !== null && time - stored.lastAt <= IDLE_MS
+        ? { id: stored.id, lastAt: time }
+        : { id: createTraceId({ now: time }), lastAt: time };
+    current = session;
+    writeStored(storage, session);
+    return session.id;
+  }
+
+  return { getId };
+}
+
+export default createRecordingSession;

package/client/recorder/createRecordingSession.test.mjs

@@ -0,0 +1,72 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import createRecordingSession from './createRecordingSession.js';
+
+const START = Date.parse('2026-10-03T14:03:11.000Z');
+
+function createStorage() {
+  const values = new Map();
+  return {
+    getItem: (key) => (values.has(key) ? values.get(key) : null),
+    setItem: (key, value) => values.set(key, value),
+  };
+}
+
+test('createRecordingSession keeps one session id while the tab is active', () => {
+  let time = START;
+  const session = createRecordingSession({ storage: createStorage(), now: () => time });
+  const id = session.getId();
+  expect(id).toMatch(/^20261003T140311Z-[a-z0-9]{6}$/);
+  time += 9 * 60 * 1000;
+  expect(session.getId()).toBe(id);
+  time += 9 * 60 * 1000;
+  expect(session.getId()).toBe(id);
+});
+
+test('createRecordingSession starts a new session after 10 minutes idle', () => {
+  let time = START;
+  const session = createRecordingSession({ storage: createStorage(), now: () => time });
+  const id = session.getId();
+  time += 10 * 60 * 1000 + 1;
+  const next = session.getId();
+  expect(next).not.toBe(id);
+  expect(next).toMatch(/^20261003T141311Z-/);
+});
+
+test('createRecordingSession survives a reload through sessionStorage', () => {
+  const storage = createStorage();
+  let time = START;
+  const id = createRecordingSession({ storage, now: () => time }).getId();
+  time += 2000;
+  expect(createRecordingSession({ storage, now: () => time }).getId()).toBe(id);
+});
+
+test('createRecordingSession records under an unremembered session when storage throws', () => {
+  const storage = {
+    getItem: () => {
+      throw new Error('SecurityError');
+    },
+    setItem: () => {
+      throw new Error('SecurityError');
+    },
+  };
+  let time = START;
+  const session = createRecordingSession({ storage, now: () => time });
+  const id = session.getId();
+  time += 1000;
+  expect(session.getId()).toBe(id);
+});