Upload data related to browser crashes (#503)

* Upload data related to browser crashes * switch to `os.homedir` * cleanup reportBrowserCrash * merge iterations in `findMostRecentFile`
replayio · Jun 5, 2024 · 4954cd1 · 4954cd1
1 parent a6d7ddc
commit 4954cd1
Show file tree

Hide file tree

Showing 18 changed files with 167 additions and 53 deletions.
diff --git a/.changeset/famous-books-smash.md b/.changeset/famous-books-smash.md
@@ -0,0 +1,5 @@
+---
+"replayio": patch
+---
+
+Added automatic browser crash reporting to the Replay team
diff --git a/packages/replayio/package.json b/packages/replayio/package.json
@@ -48,13 +48,13 @@
     "launchdarkly-node-client-sdk": "^3.2.1",
     "log-update": "^4",
     "mixpanel": "^0.18.0",
-    "node-fetch": "^2.6.8",
     "open": "^8.4.2",
     "pretty-ms": "^7.0.1",
     "query-registry": "^2.6.0",
     "semver": "^7.5.4",
     "superstruct": "^0.15.4",
     "table": "^6.8.2",
+    "undici": "^5.28.4",
     "ws": "^7.5.0"
   },
   "devDependencies": {
@@ -63,7 +63,6 @@
     "@types/fs-extra": "latest",
     "@types/inquirer": "^9",
     "@types/jest": "^28.1.5",
-    "@types/node-fetch": "^2.6.3",
     "@types/table": "^6.3.2",
     "@types/ws": "^8.5.10",
     "jest": "^28.1.3",

diff --git a/packages/replayio/src/commands/record.ts b/packages/replayio/src/commands/record.ts
@@ -1,14 +1,13 @@
 import debug from "debug";
-import { writeFileSync } from "fs-extra";
 import { v4 as uuid } from "uuid";
 import { ProcessError } from "../utils/ProcessError";
 import { logAsyncOperation } from "../utils/async/logAsyncOperation";
 import { getRunningProcess } from "../utils/browser/getRunningProcess";
 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 { getReplayPath } from "../utils/getReplayPath";
 import { killProcess } from "../utils/killProcess";
 import { trackEvent } from "../utils/mixpanel/trackEvent";
 import { canUpload } from "../utils/recordings/canUpload";
@@ -55,19 +54,12 @@ async function record(url: string = "about:blank") {
     await launchBrowser(url, { processGroupId });
   } catch (error) {
     if (error instanceof ProcessError) {
+      const { errorLogPath, uploaded } = await reportBrowserCrash(error.stderr);
       console.log("\nSomething went wrong while recording. Try again.");
-
-      // TODO [PRO-235] Upload recorder crash data somewhere
-
-      const { stderr } = error;
-      if (stderr.length > 0) {
-        const errorLogPath = getReplayPath("recorder-crash.log");
-
-        writeFileSync(errorLogPath, stderr, "utf8");
-
-        console.log(dim(`More information can be found in ${errorLogPath}`));
+      console.log(dim(`More information can be found in ${errorLogPath}`));
+      if (uploaded) {
+        console.log(dim(`The crash was reported to the Replay team`));
       }
-
       await exitProcess(1);
     }
   }

diff --git a/packages/replayio/src/utils/authentication/refreshAccessTokenOrThrow.ts b/packages/replayio/src/utils/authentication/refreshAccessTokenOrThrow.ts
@@ -1,4 +1,4 @@
-import fetch from "node-fetch";
+import { fetch } from "undici";
 import { AuthenticationError } from "./AuthenticationError";
 import { authClientId, authHost } from "./config";
 import { debug } from "./debug";

diff --git a/packages/replayio/src/utils/browser/reportBrowserCrash.ts b/packages/replayio/src/utils/browser/reportBrowserCrash.ts
@@ -0,0 +1,73 @@
+import { readFile, writeFileSync } from "fs-extra";
+import { fetch, File, FormData } from "undici";
+import { replayApiServer } from "../../config";
+import { findMostRecentFile } from "../../utils/findMostRecentFile";
+import { getReplayPath } from "../../utils/getReplayPath";
+import { getUserAgent } from "../../utils/getUserAgent";
+import { checkAuthentication } from "../../utils/initialization/checkAuthentication";
+import { getCurrentRuntimeMetadata } from "../../utils/initialization/getCurrentRuntimeMetadata";
+import { runtimeMetadata } from "../../utils/installation/config";
+import { debug } from "./debug";
+
+export async function reportBrowserCrash(stderr: string) {
+  const errorLogPath = getReplayPath("recorder-crash.log");
+  writeFileSync(errorLogPath, stderr, "utf8");
+
+  const accessToken = await checkAuthentication();
+
+  if (!accessToken) {
+    return {
+      errorLogPath,
+      uploaded: false,
+    };
+  }
+
+  const userAgent = getUserAgent();
+
+  const formData = new FormData();
+
+  formData.set("buildId", getCurrentRuntimeMetadata("chromium")?.buildId ?? "unknown");
+  formData.set("createdAt", new Date().toISOString());
+  formData.set("userAgent", userAgent);
+
+  formData.append(
+    "log",
+    new File([await readFile(errorLogPath)], "log.txt", { type: "text/plain" })
+  );
+
+  const latestCrashpad =
+    runtimeMetadata.crashpadDirectory &&
+    (await findMostRecentFile(runtimeMetadata.crashpadDirectory, fileName =>
+      fileName.endsWith(".dmp")
+    ));
+  if (latestCrashpad) {
+    formData.append(
+      "crashpad",
+      new File([await readFile(latestCrashpad)], "crash.dmp", { type: "application/octet-stream" })
+    );
+  }
+
+  try {
+    const response = await fetch(`${replayApiServer}/v1/browser-crash`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "User-Agent": userAgent,
+      },
+      body: formData,
+    });
+    if (response.status >= 200 && response.status < 300) {
+      return {
+        errorLogPath,
+        uploaded: true,
+      };
+    }
+  } catch (err) {
+    debug("Crash data failed to be uploaded: %o", err);
+  }
+
+  return {
+    errorLogPath,
+    uploaded: false,
+  };
+}
diff --git a/packages/replayio/src/utils/findMostRecentFile.ts b/packages/replayio/src/utils/findMostRecentFile.ts
@@ -0,0 +1,38 @@
+import { readdir, stat } from "fs-extra";
+import { join } from "path";
+
+export async function findMostRecentFile(
+  directory: string,
+  predicate: (fileName: string) => boolean = () => true
+) {
+  let mostRecent = undefined as string | undefined;
+  let mostRecentMtimeMs = 0;
+
+  await Promise.all(
+    (
+      await readdir(directory)
+    ).map(async fileName => {
+      const filePath = join(directory, fileName);
+      let stats;
+
+      try {
+        stats = await stat(filePath);
+      } catch {
+        return;
+      }
+
+      if (
+        !stats.isFile() ||
+        !predicate(fileName) ||
+        (mostRecent && stats.mtimeMs < mostRecentMtimeMs)
+      ) {
+        return;
+      }
+
+      mostRecent = filePath;
+      mostRecentMtimeMs = stats.mtimeMs;
+    })
+  );
+
+  return mostRecent;
+}
diff --git a/packages/replayio/src/utils/getReplayPath.ts b/packages/replayio/src/utils/getReplayPath.ts
@@ -1,15 +1,12 @@
-import assert from "assert";
+import { homedir } from "os";
 import { join, resolve } from "path";
 
 export function getReplayPath(...path: string[]) {
   let basePath;
   if (process.env.RECORD_REPLAY_DIRECTORY) {
     basePath = process.env.RECORD_REPLAY_DIRECTORY;
   } else {
-    const homeDirectory = process.env.HOME || process.env.USERPROFILE;
-    assert(homeDirectory, "HOME or USERPROFILE environment variable must be set");
-
-    basePath = join(homeDirectory, ".replay");
+    basePath = join(homedir(), ".replay");
   }
 
   return resolve(join(basePath, ...path));

diff --git a/packages/replayio/src/utils/graphql/fetchUserIdFromGraphQLOrThrow.ts b/packages/replayio/src/utils/graphql/fetchUserIdFromGraphQLOrThrow.ts
@@ -25,9 +25,7 @@ export async function fetchUserIdFromGraphQLOrThrow(accessToken: string) {
           }
         }
           `,
-    {
-      key: accessToken,
-    },
+    {},
     accessToken
   );
 

diff --git a/packages/replayio/src/utils/graphql/queryGraphQL.ts b/packages/replayio/src/utils/graphql/queryGraphQL.ts
@@ -1,4 +1,4 @@
-import fetch from "node-fetch";
+import { fetch } from "undici";
 import { replayApiServer } from "../../config";
 import { getUserAgent } from "../getUserAgent";
 import { debug } from "./debug";

diff --git a/packages/replayio/src/utils/initialization/checkForNpmUpdate.ts b/packages/replayio/src/utils/initialization/checkForNpmUpdate.ts
@@ -1,3 +1,4 @@
+import { fetch } from "undici";
 import { version as currentVersion, name as packageName } from "../../../package.json";
 import { withTrackAsyncEvent } from "../mixpanel/withTrackAsyncEvent";
 import { shouldPrompt } from "../prompt/shouldPrompt";

diff --git a/packages/replayio/src/utils/initialization/checkForRuntimeUpdate.ts b/packages/replayio/src/utils/initialization/checkForRuntimeUpdate.ts
@@ -1,6 +1,5 @@
 import { existsSync } from "fs-extra";
-import { join } from "path";
-import { runtimeMetadata, runtimePath } from "../installation/config";
+import { getBrowserPath } from "../browser/getBrowserPath";
 import { getLatestRelease } from "../installation/getLatestReleases";
 import { Release } from "../installation/types";
 import { withTrackAsyncEvent } from "../mixpanel/withTrackAsyncEvent";
@@ -38,9 +37,7 @@ export const checkForRuntimeUpdate = withTrackAsyncEvent(
       };
     }
 
-    const { path: executablePath } = runtimeMetadata;
-    const runtimeExecutablePath = join(runtimePath, ...executablePath);
-    if (!existsSync(runtimeExecutablePath)) {
+    if (!existsSync(getBrowserPath())) {
       return {
         hasUpdate: true,
         fromVersion: undefined,

diff --git a/packages/replayio/src/utils/installation/config.ts b/packages/replayio/src/utils/installation/config.ts
@@ -1,9 +1,12 @@
+import { homedir } from "os";
+import { join } from "path";
 import { getReplayPath } from "../getReplayPath";
 import { emphasize } from "../theme";
 import { Architecture, Platform, Runtime } from "./types";
 
 type Metadata = {
   architecture: Architecture;
+  crashpadDirectory: string | undefined;
   destinationName: string;
   downloadFileName: string;
   path: string[];
@@ -20,6 +23,14 @@ switch (process.platform) {
   case "darwin":
     runtimeMetadata = {
       architecture,
+      crashpadDirectory: join(
+        homedir(),
+        "Library",
+        "Application Support",
+        "Chromium",
+        "Crashpad",
+        "pending"
+      ),
       destinationName: "Replay-Chromium.app",
       downloadFileName:
         process.env.RECORD_REPLAY_CHROMIUM_DOWNLOAD_FILE ||
@@ -35,6 +46,7 @@ switch (process.platform) {
   case "linux":
     runtimeMetadata = {
       architecture,
+      crashpadDirectory: undefined,
       destinationName: "chrome-linux",
       downloadFileName:
         process.env.RECORD_REPLAY_CHROMIUM_DOWNLOAD_FILE || "linux-replay-chromium.tar.xz",
@@ -49,6 +61,7 @@ switch (process.platform) {
       // Force override for Replay internal testing purposes
       runtimeMetadata = {
         architecture,
+        crashpadDirectory: undefined,
         destinationName: "replay-chromium",
         downloadFileName:
           process.env.RECORD_REPLAY_CHROMIUM_DOWNLOAD_FILE || "windows-replay-chromium.zip",

diff --git a/packages/replayio/src/utils/installation/getLatestReleases.test.ts b/packages/replayio/src/utils/installation/getLatestReleases.test.ts
@@ -1,10 +1,10 @@
-import fetch from "node-fetch";
 import { mocked } from "jest-mock";
-import { getLatestRelease } from "./getLatestReleases";
+import { fetch } from "undici";
 import { replayAppHost } from "../../config";
+import { getLatestRelease } from "./getLatestReleases";
 import { Release } from "./types";
 
-jest.mock("node-fetch");
+jest.mock("undici");
 const mockedFetch = mocked(fetch, true);
 
 jest.mock("./config", () => ({

diff --git a/packages/replayio/src/utils/installation/getLatestReleases.ts b/packages/replayio/src/utils/installation/getLatestReleases.ts
@@ -1,5 +1,5 @@
 import assert from "assert";
-import fetch from "node-fetch";
+import { fetch } from "undici";
 import { replayAppHost } from "../../config";
 import { runtimeMetadata } from "./config";
 import { debug } from "./debug";

diff --git a/packages/replayio/src/utils/protocol/getKeepAliveAgent.ts b/packages/replayio/src/utils/protocol/getKeepAliveAgent.ts
diff --git a/packages/replayio/src/utils/recordings/metadata/legacy/source.ts b/packages/replayio/src/utils/recordings/metadata/legacy/source.ts
@@ -1,6 +1,6 @@
 import fs from "fs";
-import fetch, { RequestInit } from "node-fetch";
 import { create, defaulted, number, object, optional, Struct } from "superstruct";
+import { fetch, RequestInit } from "undici";
 import { createLog } from "../../../createLog";
 import { UnstructuredMetadata } from "../../types";
 import { envString } from "./env";

diff --git a/packages/replayio/src/utils/recordings/upload/uploadRecording.ts b/packages/replayio/src/utils/recordings/upload/uploadRecording.ts
@@ -1,6 +1,6 @@
 import assert from "assert";
 import { ReadStream, createReadStream, stat } from "fs-extra";
-import fetch from "node-fetch";
+import { fetch } from "undici";
 import { replayWsServer } from "../../../config";
 import { createDeferred } from "../../async/createDeferred";
 import { createPromiseQueue } from "../../async/createPromiseQueue";
@@ -13,7 +13,6 @@ import { endRecordingMultipartUpload } from "../../protocol/api/endRecordingMult
 import { endRecordingUpload } from "../../protocol/api/endRecordingUpload";
 import { processRecording } from "../../protocol/api/processRecording";
 import { setRecordingMetadata } from "../../protocol/api/setRecordingMetadata";
-import { getKeepAliveAgent } from "../../protocol/getKeepAliveAgent";
 import { multiPartChunkSize, multiPartMinSizeThreshold } from "../config";
 import { debug } from "../debug";
 import { LocalRecording, RECORDING_LOG_KIND } from "../types";
@@ -292,14 +291,14 @@ async function uploadRecordingReadStream(
   try {
     const response = await Promise.race([
       fetch(url, {
-        agent: getKeepAliveAgent,
         headers: {
           "Content-Length": size.toString(),
           "User-Agent": getUserAgent(),
           Connection: "keep-alive",
         },
         method: "PUT",
         body: stream,
+        duplex: "half",
         signal: abortSignal,
       }),
       streamError.promise,