Add "replayio open" command to launch browser in non-recording mode

.changeset/grumpy-icons-brush.md

@@ -0,0 +1,5 @@
+---
+"replayio": patch
+---
+
+Add "open" command to open Replay browser in non-recording mode

packages/replayio/src/bin.ts

@@ -6,6 +6,7 @@ import "./commands/info";
 import "./commands/list";
 import "./commands/login";
 import "./commands/logout";
+import "./commands/open";
 import "./commands/record";
 import "./commands/remove";
 import "./commands/update";

packages/replayio/src/commands/open.ts

@@ -0,0 +1,18 @@
+import { killBrowserIfRunning } from "../utils/browser/killBrowserIfRunning";
+import { launchBrowser } from "../utils/browser/launchBrowser";
+import { registerCommand } from "../utils/commander/registerCommand";
+import { exitProcess } from "../utils/exitProcess";
+
+registerCommand("open", { checkForRuntimeUpdate: true, requireAuthentication: true })
+  .argument("[url]", `URL to open (default: "about:blank")`)
+  .description("Open the replay browser with recording disabled")
+  .action(open)
+  .allowUnknownOption();
+
+async function open(url: string = "about:blank") {
+  await killBrowserIfRunning();
+
+  await launchBrowser(url, { record: false });
+
+  await exitProcess(0);
+}

packages/replayio/src/commands/record.ts

@@ -2,13 +2,12 @@ import debug from "debug";
 import { v4 as uuid } from "uuid";
 import { ProcessError } from "../utils/ProcessError";
 import { logAsyncOperation } from "../utils/async/logAsyncOperation";
-import { getRunningProcess } from "../utils/browser/getRunningProcess";
+import { killBrowserIfRunning } from "../utils/browser/killBrowserIfRunning";
 import { launchBrowser } from "../utils/browser/launchBrowser";
 import { reportBrowserCrash } from "../utils/browser/reportBrowserCrash";
 import { registerCommand } from "../utils/commander/registerCommand";
 import { confirm } from "../utils/confirm";
 import { exitProcess } from "../utils/exitProcess";
-import { killProcess } from "../utils/killProcess";
 import { trackEvent } from "../utils/mixpanel/trackEvent";
 import { canUpload } from "../utils/recordings/canUpload";
 import { getRecordings } from "../utils/recordings/getRecordings";
@@ -34,22 +33,7 @@ async function record(url: string = "about:blank") {
   const processGroupId = uuid();
 
   try {
-    const process = await getRunningProcess();
-    if (process) {
-      const confirmed = await confirm(
-        "The replay browser is already running. You'll need to close it before starting a new recording.\n\nWould you like to close it now?",
-        true
-      );
-      if (confirmed) {
-        const killResult = await killProcess(process.pid);
-        if (!killResult) {
-          console.log("Something went wrong trying to close the replay browser. Please try again.");
-          await exitProcess(1);
-        }
-      } else {
-        await exitProcess(0);
-      }
-    }
+    await killBrowserIfRunning();
 
     await launchBrowser(url, { processGroupId });
   } catch (error) {

packages/replayio/src/utils/browser/killBrowserIfRunning.ts

@@ -0,0 +1,24 @@
+import { confirm } from "../confirm";
+import { exitProcess } from "../exitProcess";
+import { killProcess } from "../killProcess";
+import { getRunningProcess } from "./getRunningProcess";
+
+export async function killBrowserIfRunning() {
+  const process = await getRunningProcess();
+  if (process) {
+    const confirmed = await confirm(
+      "The replay browser is already running. You'll need to close it before running this command.\n\nWould you like to close it now?",
+      true
+    );
+    if (confirmed) {
+      const killResult = await killProcess(process.pid);
+      if (!killResult) {
+        console.log("Something went wrong trying to close the replay browser. Please try again.");
+
+        await exitProcess(1);
+      }
+    } else {
+      await exitProcess(0);
+    }
+  }
+}

packages/replayio/src/utils/browser/launchBrowser.ts

@@ -11,10 +11,11 @@ import { getBrowserPath } from "./getBrowserPath";
 export async function launchBrowser(
   url: string,
   options: {
-    processGroupId: string;
+    processGroupId?: string;
+    record?: boolean;
   }
 ) {
-  const { processGroupId } = options;
+  const { processGroupId, record = true } = options;
 
   const profileDir = join(runtimePath, "profiles", runtimeMetadata.runtime);
   ensureDirSync(profileDir);
@@ -28,9 +29,10 @@ export async function launchBrowser(
   ];
   const processOptions = {
     env: {
-      RECORD_ALL_CONTENT: "1",
+      RECORD_ALL_CONTENT: record ? "1" : undefined,
+      RECORD_REPLAY_DONT_RECORD: record ? undefined : "1",
       RECORD_REPLAY_DIRECTORY: getReplayPath(),
-      RECORD_REPLAY_METADATA: JSON.stringify({ processGroupId }),
+      RECORD_REPLAY_METADATA: processGroupId ? JSON.stringify({ processGroupId }) : undefined,
       RECORD_REPLAY_VERBOSE: "1",
     },
     stdio: undefined,
@@ -55,7 +57,11 @@ export async function launchBrowser(
   const spawnDeferred = spawnProcess(browserExecutablePath, args, processOptions, {
     onSpawn: () => {
       if (process.stdin.isTTY) {
-        console.log(`Recording... ${dim("(press any key to stop recording)")}`);
+        if (record) {
+          console.log(`Recording... ${dim("(press any key to stop recording)")}`);
+        } else {
+          console.log("Press any key to close the browser");
+        }
 
         prompt({
           signal: abortControllerForPrompt.signal,
@@ -66,7 +72,11 @@ export async function launchBrowser(
           spawnDeferred.data.kill();
         });
       } else {
-        console.log(`Recording... ${dim("(quit the Replay Browser to stop recording)")}`);
+        if (record) {
+          console.log(`Recording... ${dim("(quit the Replay Browser to stop recording)")}`);
+        } else {
+          console.log("Quit the Replay browser when you're finished");
+        }
       }
     },
     printStderr: (text: string) => {