Improve error reporting when sagas crash (#8712)

Errors within the sagas are critical. They are reported currently, but
if a simple failing network request brings down the entire sagas (most
have a retry mechanism but some don't), the current error reporting only
shows the failing network request (which doesn't really show the
severity).

### URL of deployed dev instance (used for testing):
- https://___.webknossos.xyz

### Steps to test:
- I added a `throw new Error("bla")` to the brush saga. you can see the
report for it here:
https://scm.airbrake.io/projects/95438/groups/4097474921126226079?tab=notice-detail
- no need to test further imo

### Issues:
- improves error reporting

Author: philippotto

frontend/javascripts/libs/error_handling.ts

@@ -54,6 +54,31 @@ export function handleGenericError(
   console.warn(error);
 }
 
+function mutateErrorMessage(error: Error, newMessage: string) {
+  try {
+    // In the past, we had records of the following line not working because message was read-only.
+    // However, with Chrome, Firefox, Safari and Edge, that bug could not be reproduced in July 2024.
+    // Therefore, we assume that the code should work. If not, we don't augment the error message.
+    // Instead, the exceptionType is passed to the notify() method below.
+    error.message = newMessage;
+  } catch {}
+}
+
+function anyToError(maybeError: any): Error {
+  return maybeError instanceof Error ? maybeError : new Error(maybeError);
+}
+
+function getPrefixedErrorMessage(
+  prefix: string,
+  maybeError: unknown,
+): { prefixedMessage: string; fullMessage: string } {
+  const fullMessage =
+    maybeError instanceof Error ? maybeError.toString() : JSON.stringify(maybeError);
+  const prefixedMessage = prefix + fullMessage.slice(0, 80);
+
+  return { prefixedMessage, fullMessage };
+}
+
 class ErrorHandling {
   // @ts-expect-error ts-migrate(2564) FIXME: Property 'throwAssertions' has no initializer and ... Remove this comment to see the full error message
   throwAssertions: boolean;
@@ -126,20 +151,7 @@ class ErrorHandling {
     window.removeEventListener("unhandledrejection", this.airbrake.onUnhandledrejection);
     window.addEventListener("unhandledrejection", (event) => {
       // Create our own error for unhandled rejections here to get additional information for [Object object] errors in airbrake
-      const reasonAsString = event.reason instanceof Error ? event.reason.toString() : event.reason;
-      let wrappedError = event.reason instanceof Error ? event.reason : new Error(event.reason);
-
-      const newMessage = UNHANDLED_REJECTION_PREFIX + JSON.stringify(reasonAsString).slice(0, 80);
-      try {
-        // In the past, we had records of the following line not working because message was read-only.
-        // However, with Chrome, Firefox, Safari and Edge, that bug could not be reproduced in July 2024.
-        // Therefore, we assume that the code should work. If not, we don't augment the error message.
-        // Instead, the exceptionType is passed to the notify() method below.
-        wrappedError.message = newMessage;
-      } catch {}
-
-      this.notify(wrappedError, {
-        originalError: reasonAsString,
+      this.notifyWithPrefix(event.reason, UNHANDLED_REJECTION_PREFIX, {
         exceptionType: "unhandledrejection",
       });
     });
@@ -214,6 +226,16 @@ class ErrorHandling {
     });
   }
 
+  notifyWithPrefix(error: unknown, prefix: string, optParams: Record<string, any> = {}) {
+    const wrappedError = anyToError(error);
+    const { prefixedMessage, fullMessage } = getPrefixedErrorMessage(prefix, error);
+    mutateErrorMessage(wrappedError, prefixedMessage);
+    this.notify(wrappedError, {
+      originalError: fullMessage,
+      ...optParams,
+    });
+  }
+
   assertExtendContext(additionalContext: Record<string, any>) {
     this.airbrake.addFilter((notice) => {
       // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'error' implicitly has an 'any' type.

frontend/javascripts/viewer/model/sagas/root_saga.ts

@@ -88,13 +88,13 @@ function* restartableSaga(): Saga<void> {
       call(splitBoundaryMeshSaga),
       call(toolSaga),
     ]);
-  } catch (err) {
+  } catch (err: any) {
     rootSagaCrashed = true;
     console.error("The sagas crashed because of the following error:", err);
 
     if (!process.env.IS_TESTING) {
-      // @ts-ignore
-      ErrorHandling.notify(err, {});
+      ErrorHandling.notifyWithPrefix(err, "Root saga crashed: ");
+
       // Hide potentially old error highlighting which mentions a retry mechanism.
       toggleErrorHighlighting(false);
       // Show error highlighting which mentions the permanent error.
@@ -103,10 +103,7 @@ function* restartableSaga(): Saga<void> {
 Internal error.
 Please reload the page to avoid losing data.
 
-${
-  JSON.stringify(err)
-  // @ts-ignore
-} ${err.stack || ""}`);
+${JSON.stringify(err)} ${err.stack || ""}`);
     }
   }
 }