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

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

@@ -1,25 +1,24 @@
-.layout {
+.container {
-  display: grid;
+  display: flex;
-  font-family: var(--typography-Body-Regular-fontFamily);
+  flex-direction: column;
-  grid-template-rows: auto 1fr;
+  max-width: var(--max-width-content);
-  min-height: 100dvh;
+  margin: 0 auto;
+  padding: var(--Space-x5) 0;
+  gap: var(--Space-x2);
+
+  min-height: 50dvh;
+  text-align: center;
+  text-wrap: beautiful;
+
+  align-items: center;
+  justify-content: center;
 }
 
-.content {
+.digest {
-  display: grid;
+  text-align: right;
-  padding-bottom: 7.7rem;
-  padding-left: 0;
-  padding-right: 0;
-  position: relative;
 }
 
-@media screen and (min-width: 1367px) {
+.errorDetails {
-  .content {
+  text-align: left;
-    gap: 10rem;
+  margin-top: var(--Space-x5);
-    grid-template-columns: 25rem 1fr;
-    padding-bottom: 17.5rem;
-    padding-left: 2.4rem;
-    padding-right: 2.4rem;
-    padding-top: 5.8rem;
-  }
 }

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.container}>
-      <div className={styles.content}>
+      <Typography variant="Title/md" className={styles.header}>
+        <h1>
           {intl.formatMessage({
             id: "errorMessage.somethingWentWrong",
             defaultMessage: "Something went wrong!",
           })}
-        {env.NEXT_PUBLIC_NODE_ENV === "development" && (
+        </h1>
-          <pre>{error.stack || error.message}</pre>
+      </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>
+      {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>
-    </section>
   )
 }

packages/common/logger/createLogger/index.ts

@@ -21,6 +21,10 @@ function getLogValue(args: unknown[]): Record<string, unknown> | undefined {
           stack: args[0].stack,
           name: args[0].name,
           cause: String(args[0].cause),
+          digest:
+            "digest" in args[0] && args[0].digest
+              ? String(args[0].digest)
+              : undefined,
         },
       }
     }