Added window error handling and reorganized files

dashboard/src/index.tsx

@@ -15,4 +15,10 @@ if (process.env.ENABLE_SENTRY) {
   SetupSentry();
 }
 
+function EnableErrorHandling() {
+  window.onerror = function (msg, file, line, col, error) {
+    StackTrace.fromError(error).then((err) => {});
+  };
+}
+
 ReactDOM.render(<App />, document.getElementById("output"));

dashboard/src/main/MainWrapperErrorBoundary.tsx → dashboard/src/shared/error_handling/MainWrapperErrorBoundary.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import { Context } from "shared/Context";
-import PorterErrorBoundary from "shared/PorterErrorBoundary";
+import PorterErrorBoundary from "./PorterErrorBoundary";
 
 const MainWrapperErrorBoundary: React.FC = ({ children }) => {
   const location = "MainWrapperErrorBoundary";

dashboard/src/shared/PorterErrorBoundary.tsx → dashboard/src/shared/error_handling/PorterErrorBoundary.tsx

@@ -2,8 +2,9 @@ import UnexpectedErrorPage from "components/UnexpectedErrorPage";
 import React from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import * as Sentry from "@sentry/react";
-import StackTrace, { StackFrame } from "stacktrace-js";
+import StackTrace from "stacktrace-js";
 import { Context, Primitive } from "@sentry/types";
+import { stackFramesToString } from "./stack_trace_utils";
 
 export type PorterErrorBoundaryProps<OnResetProps = {}> = {
   // Component or useful name to describe where the error boundary was setted
@@ -20,13 +21,6 @@ export type PorterErrorBoundaryProps<OnResetProps = {}> = {
   };
 };
 
-const stackFramesToString = (stackFrames: StackFrame[]) => {
-  return stackFrames
-    .map(function (sf) {
-      return sf.toString();
-    })
-    .join("\n");
-};
 const PorterErrorBoundary: React.FC<PorterErrorBoundaryProps> = ({
   errorBoundaryLocation,
   onReset,

dashboard/src/shared/error_handling/stack_trace_utils.ts

@@ -0,0 +1,9 @@
+import { StackFrame } from "stacktrace-js";
+
+export const stackFramesToString = (stackFrames: StackFrame[]) => {
+  return stackFrames
+    .map(function (sf) {
+      return sf.toString();
+    })
+    .join("\n");
+};

dashboard/src/shared/error_handling/window_error_handling.ts

@@ -0,0 +1,35 @@
+import { stackFramesToString } from "./stack_trace_utils";
+import * as Sentry from "@sentry/react";
+
+export function EnableErrorHandling() {
+  window.onerror = function (msg, file, line, col, err) {
+    StackTrace.fromError(err).then((stackframes) => {
+      const stackFramesStringify = stackFramesToString(stackframes);
+      // Preserve the old stack just in case
+      const originalStack = err.stack;
+      // Update the error stack with the StackTrace stack (this helps for minified environments)
+      err.stack = stackFramesStringify;
+
+      if (process.env.ENABLE_SENTRY) {
+        Sentry.captureException(err, (scope) => {
+          scope.setTags({
+            error_boundary_location: "window_error_handling",
+            error_message: err?.message,
+          });
+          scope.setContext("Original stack", {
+            originalStack,
+          });
+
+          return scope;
+        });
+      }
+
+      window?.analytics?.track("React Error", {
+        location: "window_error_handling",
+        error: stackFramesStringify,
+        componentStack: err.stack,
+        url: window.location.toString(),
+      });
+    });
+  };
+}