Skip to content

Instantly share code, notes, and snippets.

@bvaughn
Last active June 16, 2024 21:51
Show Gist options
  • Save bvaughn/ff62f75e4d8ec34ad31ebc2b3b3575ca to your computer and use it in GitHub Desktop.
Save bvaughn/ff62f75e4d8ec34ad31ebc2b3b3575ca to your computer and use it in GitHub Desktop.
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();
@bvaughn
Copy link
Author

bvaughn commented Jul 14, 2023

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>

@Domiii
Copy link

Domiii commented Oct 20, 2023

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment