record-with-chromium

record-with-chromium

#!/usr/bin/env node

const { spawn } = require("child_process");
const util = require("node:util");

const exec = util.promisify(require("node:child_process").exec);

async function main() {
  let { REPLAY_CHROME, RECORD_REPLAY_API_KEY } = process.env;
  if (!REPLAY_CHROME || !RECORD_REPLAY_API_KEY) {
    console.error(
      "Script requires REPLAY_CHROME and RECORD_REPLAY_API_KEY environment variables"
    );
    process.exit(1);
  }

  let [_, __, url] = process.argv;
  if (!url) {
    console.error("Usage: record-with-chromium <url>");
    process.exit(1);
  } else {
    url = url.trim();
  }

  try {
    await record(REPLAY_CHROME, url);
    const recordingId = await findRecordingId(url);
    await upload(recordingId);
    await openRecording(recordingId);

    process.exit(0);
  } catch (error) {
    console.error(error);
    process.exit(1);
  }
}

async function findRecordingId(url) {
  const { host } = new URL(url);

  const { stdout } = await exec("replay ls");
  const text = stdout.toString();
  const lines = text.split("\n");
  for (let index = 1; index < lines.length; index++) {
    const line = lines[index];
    const [id, status, title, date] = line.split(/\s{2,}/);

    if (title === `Replay of ${host}`) {
      return id;
    }
  }

  throw Error(`Could not find recording for ${url}`);
}

async function openRecording(recordingId) {
  const url = `https://app.replay.io/recording/${recordingId}`;
  const openCommand =
    process.platform == "darwin"
      ? "open"
      : process.platform == "win32"
      ? "start"
      : "xdg-open";
  await exec(`${openCommand} ${url}`);
}

async function record(chromePath, url) {
  return new Promise((resolve, reject) => {
    console.log(`Recording ${url}...`);

    let replayProcess = spawn(`${chromePath}`, [`${url}`]);
    replayProcess.stderr.on("data", (data) => {
      console.error(data);
    });
    replayProcess.on("close", (code) => {
      console.log("exited with code", code);

      if (code === 0) {
        resolve();
      } else {
        reject(`Process exited with code ${code}`);
      }
    });
  });
}

async function upload(recordingId) {
  console.log(`Uploading recording ${recordingId}...`);

  await exec(`replay upload ${recordingId}`, {
    env: process.env,
  });
}

main();

This script will...

1. Open the specified URL in Replay Chromium
2. Wait until Replay Chromium has closed
3. Find the most recent recording for the URL provided
4. Upload that recording to Replay
5. Open the newly uploaded recording in the default system browser

Usage example:

REPLAY_CHROME=$REPLAY_CHROME \
RECORD_REPLAY_API_KEY=$RECORD_REPLAY_API_KEY \
   record-with-chromium <url-to-record>

Btw: replay ls has a --json flag (ref), and there is now also the launch command.
Other than that, this script is still needed, since there is still no "record and replay it" in one swoop type of command in the CLI. Much appreciated!