Updating error messages

apps/next/components/user/accounts.tsx

@@ -11,6 +11,7 @@ import {
 } from "@radix-ui/react-icons"
 import { useMutation, useQuery } from "@tanstack/react-query"
 
+import { getDigest } from "@/lib/digest"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
@@ -39,6 +40,8 @@ export const Accounts: React.FC<{ userId: string }> = ({ userId }) => {
     queryFn: () => getProfile({ id: userId }),
   })
 
+  const digest = getDigest(profile.error)
+
   if (profile.isLoading) {
     return (
       <div className="flex h-full flex-col items-center justify-center">
@@ -56,9 +59,7 @@ export const Accounts: React.FC<{ userId: string }> = ({ userId }) => {
           <CrossCircledIcon className="size-4" />
           <AlertTitle>Something went wrong!</AlertTitle>
           <AlertDescription>
-            {profile.error instanceof Error
-              ? profile.error.message
-              : "Unknown error"}
+            Profile loading was not successful, please try again; ref: {digest}
           </AlertDescription>
         </Alert>
       </div>
@@ -97,6 +98,8 @@ export const AccountsContainer: React.FC<{
     mutationFn: signOut,
   })
 
+  const digest = getDigest(logout.error)
+
   return (
     <AccountsComponent
       username={username}
@@ -111,7 +114,7 @@ export const AccountsContainer: React.FC<{
       }
       isPending={logout.isPending}
       isError={logout.isError}
-      errorMessage={logout.error?.message}
+      errorMessage={`Log out was not successful, please try again; ref: ${digest}`}
     />
   )
 }

apps/next/components/user/credentials-form.tsx

@@ -8,6 +8,7 @@ import { useMutation } from "@tanstack/react-query"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
 
+import { getDigest } from "@/lib/digest"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
 import {
@@ -37,6 +38,8 @@ export const CredentialsForm: React.FC<{ userEmail: string }> = ({
     mutationFn: updateUser,
   })
 
+  const digest = getDigest(update.error)
+
   return (
     <CredentialsFormComponent
       userEmail={userEmail}
@@ -57,7 +60,7 @@ export const CredentialsForm: React.FC<{ userEmail: string }> = ({
       }}
       isPending={update.isPending}
       isError={update.isError}
-      errorMessage={update.error?.message}
+      errorMessage={`Credentials update was not successful, please try again; ref: ${digest}`}
     />
   )
 }

apps/next/components/user/login-form.tsx

@@ -8,6 +8,7 @@ import { useMutation } from "@tanstack/react-query"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
 
+import { getDigest } from "@/lib/digest"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
 import {
@@ -64,12 +65,14 @@ export const LoginForm: React.FC = () => {
         })
   }
 
+  const digest = getDigest(signIn.error) ?? getDigest(passwordlessSignIn.error)
+
   return (
     <LoginFormComponent
       signIn={handleSignIn}
       isPending={signIn.isPending || passwordlessSignIn.isPending}
       isError={signIn.isError || passwordlessSignIn.isError}
-      errorMessage={signIn.error?.message ?? passwordlessSignIn.error?.message}
+      errorMessage={`Log in was not successful, please try again; ref: ${digest}`}
     />
   )
 }

apps/next/components/user/new-reset-password-form.tsx

@@ -8,6 +8,7 @@ import { useMutation } from "@tanstack/react-query"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
 
+import { getDigest } from "@/lib/digest"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
 import {
@@ -34,6 +35,8 @@ export const NewResetPasswordForm: React.FC = () => {
     mutationFn: updateUser,
   })
 
+  const digest = getDigest(update.error)
+
   return (
     <NewResetPasswordFormComponent
       updateUser={({
@@ -53,7 +56,7 @@ export const NewResetPasswordForm: React.FC = () => {
       }}
       isPending={update.isPending}
       isError={update.isError}
-      errorMessage={update.error?.message}
+      errorMessage={`Password reset was not successful, please try again; ref: ${digest}`}
     />
   )
 }

apps/next/components/user/otp-login-form.tsx

@@ -8,6 +8,7 @@ import { useMutation } from "@tanstack/react-query"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
 
+import { getDigest } from "@/lib/digest"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
 import {
@@ -39,6 +40,8 @@ export const OtpLoginForm: React.FC<{ email: string }> = ({ email }) => {
     mutationFn: verifyOtp,
   })
 
+  const digest = getDigest(verify.error)
+
   return (
     <OtpLoginFormComponent
       verifyOtp={({ token }) =>
@@ -52,7 +55,7 @@ export const OtpLoginForm: React.FC<{ email: string }> = ({ email }) => {
       }
       isPending={verify.isPending}
       isError={verify.isError}
-      errorMessage={verify.error?.message}
+      errorMessage={`Log in was not successful, please try again; ref: ${digest}`}
     />
   )
 }

apps/next/components/user/profile-form.tsx

@@ -12,6 +12,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
 
+import { getDigest } from "@/lib/digest"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
 import {
@@ -39,6 +40,8 @@ export const ProfileForm: React.FC<{ userId: string }> = ({ userId }) => {
     queryFn: () => getProfile({ id: userId }),
   })
 
+  const digest = getDigest(profile.error)
+
   if (profile.isLoading) {
     return (
       <div className="flex h-full flex-col items-center justify-center">
@@ -56,9 +59,7 @@ export const ProfileForm: React.FC<{ userId: string }> = ({ userId }) => {
           <CrossCircledIcon className="size-4" />
           <AlertTitle>Something went wrong!</AlertTitle>
           <AlertDescription>
-            {profile.error instanceof Error
-              ? profile.error.message
-              : "Unknown error"}
+            Profile loading was not successful, please try again; ref: {digest}
           </AlertDescription>
         </Alert>
       </div>
@@ -103,6 +104,8 @@ export const ProfileFormContainer: React.FC<{
     },
   })
 
+  const digest = getDigest(update.error)
+
   return (
     <ProfileFormComponent
       key={JSON.stringify({ username, fullName, preferredName })}
@@ -133,7 +136,7 @@ export const ProfileFormContainer: React.FC<{
       }
       isPending={update.isPending}
       isError={update.isError}
-      errorMessage={update.error?.message}
+      errorMessage={`Profile update was not successful, please try again; ref: ${digest}`}
     />
   )
 }

apps/next/components/user/register-form.tsx

@@ -8,6 +8,7 @@ import { useMutation } from "@tanstack/react-query"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
 
+import { getDigest } from "@/lib/digest"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
 import {
@@ -34,6 +35,8 @@ export const RegisterForm: React.FC = () => {
     mutationFn: signUpWithEmailPassword,
   })
 
+  const digest = getDigest(signUp.error)
+
   return (
     <RegisterFormComponent
       signUp={({ email, password }: { email: string; password: string }) =>
@@ -47,7 +50,7 @@ export const RegisterForm: React.FC = () => {
       }
       isPending={signUp.isPending}
       isError={signUp.isError}
-      errorMessage={signUp.error?.message}
+      errorMessage={`Registration was not successful, please try again; ref: ${digest}`}
     />
   )
 }

apps/next/components/user/reset-password-form.tsx

@@ -8,6 +8,7 @@ import { useMutation } from "@tanstack/react-query"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
 
+import { getDigest } from "@/lib/digest"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
 import {
@@ -34,12 +35,14 @@ export const ResetPasswordForm: React.FC = () => {
     mutationFn: resetPasswordForEmail,
   })
 
+  const digest = getDigest(reset.error)
+
   return (
     <ResetPasswordFormComponent
       resetPassword={(email: string) => reset.mutate({ email })}
       isPending={reset.isPending}
       isError={reset.isError}
-      errorMessage={reset.error?.message}
+      errorMessage={`Password reset was not successful, please try again; ref: ${digest}`}
     />
   )
 }

apps/next/lib/digest.ts

@@ -0,0 +1,5 @@
+export function getDigest(error: Error | null): string | undefined {
+  return error && "digest" in error && typeof error.digest === "string"
+    ? error.digest
+    : undefined
+}