refactor: update error handling and logging for improved error details display

apps/scandic-web/app/[lang]/(live)/error.tsx

@@ -7,6 +7,7 @@ import { useIntl } from "react-intl"
 
 import { login } from "@scandic-hotels/common/constants/routes/handleAuth"
 import { logger } from "@scandic-hotels/common/logger"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { SESSION_EXPIRED } from "@scandic-hotels/trpc/errors"
 
 import { env } from "@/env/client"
@@ -39,7 +40,7 @@ export default function Error({
     }
 
     logger.error("(live)/error", error)
-    Sentry.captureException(error)
+    Sentry.captureException(error, { extra: { digest: error.digest } })
   }, [error, params.lang])
 
   useEffect(() => {
@@ -60,16 +61,41 @@ export default function Error({
   }, [searchParams, reset, router])
 
   return (
-    <section className={styles.layout}>
-      <div className={styles.content}>
-        {intl.formatMessage({
-          id: "errorMessage.somethingWentWrong",
-          defaultMessage: "Something went wrong!",
-        })}
-        {env.NEXT_PUBLIC_NODE_ENV === "development" && (
-          <pre>{error.stack || error.message}</pre>
-        )}
+    <div className={styles.container}>
+      <Typography variant="Title/md" className={styles.header}>
+        <h1>
+          {intl.formatMessage({
+            id: "errorMessage.somethingWentWrong",
+            defaultMessage: "Something went wrong!",
+          })}
+        </h1>
+      </Typography>
+      <div>
+        <Typography variant="Body/Paragraph/mdRegular" className={styles.text}>
+          <p>
+            {intl.formatMessage({
+              id: "errorMessage.somethingWentWrong.message",
+              defaultMessage:
+                "Please try refreshing the page or come back later. If the problem persists, please contact support.",
+            })}
+          </p>
+        </Typography>
       </div>
-    </section>
+      {error.digest && (
+        <Typography
+          variant="Body/Supporting text (caption)/smRegular"
+          className={styles.digest}
+        >
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+          <p>Error reference ID: {error.digest}</p>
+        </Typography>
+      )}
+      {env.NEXT_PUBLIC_SENTRY_ENVIRONMENT !== "production" && (
+        <pre className={styles.errorDetails}>
+          {error.message && <div>{error.message}</div>}
+          {error.stack && <span>{error.stack}</span>}
+        </pre>
+      )}
+    </div>
   )
 }