chore: Centralize clientside logging

app/utils/files.ts

@@ -1,6 +1,6 @@
-import * as Sentry from "@sentry/react";
 import invariant from "invariant";
 import { client } from "./ApiClient";
+import Logger from "./logger";
 
 type UploadOptions = {
   /** The user facing name of the file */
@@ -45,7 +45,6 @@ export const uploadFile = async (
   }
 
   // Using XMLHttpRequest instead of fetch because fetch doesn't support progress
-  let error;
   const xhr = new XMLHttpRequest();
   const success = await new Promise((resolve) => {
     xhr.upload.addEventListener("progress", (event) => {
@@ -53,7 +52,12 @@ export const uploadFile = async (
         options.onProgress(event.loaded / event.total);
       }
     });
-    xhr.addEventListener("error", (err) => (error = err));
+    xhr.addEventListener("error", () => {
+      Logger.error(
+        "File upload failed",
+        new Error(`${xhr.status} ${xhr.statusText}`)
+      );
+    });
     xhr.addEventListener("loadend", () => {
       resolve(xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 400);
     });
@@ -62,7 +66,6 @@ export const uploadFile = async (
   });
 
   if (!success) {
-    Sentry.captureException(error);
     throw new Error("Upload failed");
   }
 

app/utils/logger.ts

@@ -0,0 +1,86 @@
+import * as Sentry from "@sentry/react";
+import env from "~/env";
+
+type LogCategory =
+  | "lifecycle"
+  | "http"
+  | "editor"
+  | "router"
+  | "collaboration"
+  | "misc";
+
+type Extra = Record<string, any>;
+
+class Logger {
+  /**
+   * Log information
+   *
+   * @param category A log message category that will be prepended
+   * @param extra Arbitrary data to be logged that will appear in prod logs
+   */
+  info(label: LogCategory, message: string, extra?: Extra) {
+    console.info(`[${label}] ${message}`, extra);
+  }
+
+  /**
+   * Debug information
+   *
+   * @param category A log message category that will be prepended
+   * @param extra Arbitrary data to be logged
+   */
+  debug(label: LogCategory, message: string, extra?: Extra) {
+    if (env.ENVIRONMENT === "development") {
+      console.debug(`[${label}] ${message}`, extra);
+    }
+  }
+
+  /**
+   * Log a warning
+   *
+   * @param message A warning message
+   * @param extra Arbitrary data to be logged that will appear in prod logs
+   */
+  warn(message: string, extra?: Extra) {
+    if (env.SENTRY_DSN) {
+      Sentry.withScope(function (scope) {
+        scope.setLevel(Sentry.Severity.Warning);
+
+        for (const key in extra) {
+          scope.setExtra(key, extra[key]);
+        }
+
+        Sentry.captureMessage(message);
+      });
+    }
+
+    console.warn(message, extra);
+  }
+
+  /**
+   * Report a runtime error
+   *
+   * @param message A description of the error
+   * @param error The error that occurred
+   * @param extra Arbitrary data to be logged that will appear in prod logs
+   */
+  error(message: string, error: Error, extra?: Extra) {
+    if (env.SENTRY_DSN) {
+      Sentry.withScope(function (scope) {
+        scope.setLevel(Sentry.Severity.Error);
+
+        for (const key in extra) {
+          scope.setExtra(key, extra[key]);
+        }
+
+        Sentry.captureException(error);
+      });
+    }
+
+    console.error(message, {
+      error,
+      extra,
+    });
+  }
+}
+
+export default new Logger();