Refactoring to use Error instead of string in the useError hook state variable

www/app/(errors)/errorMessage.tsx

@@ -1,13 +1,18 @@
 "use client";
 import { useError } from "./errorContext";
 import { useEffect, useState } from "react";
+import * as Sentry from "@sentry/react";
 
 const ErrorMessage: React.FC = () => {
   const { error, setError } = useError();
   const [isVisible, setIsVisible] = useState<boolean>(false);
 
   useEffect(() => {
-    if (error) setIsVisible(true);
+    if (error) {
+      setIsVisible(true);
+      Sentry.captureException(error);
+      console.error("Error", error.message, error);
+    }
   }, [error]);
 
   if (!isVisible || !error) return null;
@@ -16,12 +21,12 @@ const ErrorMessage: React.FC = () => {
     <div
       onClick={() => {
         setIsVisible(false);
-        setError("");
+        setError(null);
       }}
       className="max-w-xs z-50 fixed top-16 right-10 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-75 cursor-pointer transform hover:scale-105"
       role="alert"
     >
-      <span className="block sm:inline">{error}</span>
+      <span className="block sm:inline">{error?.message}</span>
     </div>
   );
 };