adds timeout and humanMessage

www/app/(errors)/errorContext.tsx

@@ -3,7 +3,8 @@ import React, { createContext, useContext, useState } from "react";
 
 interface ErrorContextProps {
   error: Error | null;
-  setError: React.Dispatch<React.SetStateAction<Error | null>>;
+  humanMessage?: string;
+  setError: (error: Error, humanMessage?: string) => void;
 }
 
 const ErrorContext = createContext<ErrorContextProps | undefined>(undefined);
@@ -22,9 +23,16 @@ interface ErrorProviderProps {
 
 export const ErrorProvider: React.FC<ErrorProviderProps> = ({ children }) => {
   const [error, setError] = useState<Error | null>(null);
+  const [humanMessage, setHumanMessage] = useState<string | undefined>();
 
+  const declareError = (error, humanMessage?) => {
+    setError(error);
+    setHumanMessage(humanMessage);
+  };
   return (
-    <ErrorContext.Provider value={{ error, setError }}>
+    <ErrorContext.Provider
+      value={{ error, setError: declareError, humanMessage }}
+    >
       {children}
     </ErrorContext.Provider>
   );

www/app/(errors)/errorMessage.tsx

@@ -4,29 +4,67 @@ import { useEffect, useState } from "react";
 import * as Sentry from "@sentry/react";
 
 const ErrorMessage: React.FC = () => {
-  const { error, setError } = useError();
+  const { error, setError, humanMessage } = useError();
   const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout>();
+
+  // Setup Shortcuts
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      switch (event.key) {
+        case "^":
+          throw new Error("Unhandled Exception thrown by '^' shortcut");
+        case "$":
+          setError(
+            new Error("Unhandled Exception thrown by '$' shortcut"),
+            "You did this to yourself",
+          );
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyPress);
+    return () => document.removeEventListener("keydown", handleKeyPress);
+  }, []);
 
   useEffect(() => {
     if (error) {
-      setIsVisible(true);
-      Sentry.captureException(error);
-      console.error("Error", error.message, error);
+      if (humanMessage) {
+        setIsVisible(true);
+        Sentry.captureException(Error(humanMessage, { cause: error }));
+      } else {
+        Sentry.captureException(error);
+      }
+
+      console.error("Error", error);
     }
   }, [error]);
 
-  if (!isVisible || !error) return null;
+  useEffect(() => {
+    if (isVisible) {
+      setTimeoutId(
+        setTimeout(() => {
+          setIsVisible(false);
+          setTimeoutId(undefined);
+        }, 30000),
+      );
+    }
+    if (!isVisible && timeoutId) {
+      clearTimeout(timeoutId);
+    }
+  }, [isVisible]);
+
+  if (!isVisible || !humanMessage) return null;
 
   return (
     <button
       onClick={() => {
         setIsVisible(false);
-        setError(null);
+        setIsVisible(false);
       }}
       className="max-w-xs z-50 fixed bottom-5 right-5 md:bottom-10 md:right-10 border-solid bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded transition-opacity duration-300 ease-out opacity-100 hover:opacity-80 focus-visible:opacity-80 cursor-pointer transform hover:scale-105 focus-visible:scale-105"
       role="alert"
     >
-      <span className="block sm:inline">{error?.message}</span>
+      <span className="block sm:inline">{humanMessage}</span>
     </button>
   );
 };