Garbini/plo 244 feature error page next

apps/web/public/dictionaries/de-DE.json

@@ -917,5 +917,11 @@
     "go_to_profile": "Zum Profil",
     "continue": "Weiter",
     "syncing": "Profil wird gespeichert..."
+  },
+  "error_page": {
+    "title": "Etwas ist schiefgelaufen",
+    "description": "Ein unerwarteter Fehler ist aufgetreten. Keine Sorge, es liegt nicht an dir.",
+    "try_again": "Erneut versuchen",
+    "go_home": "Zur Startseite"
   }
 }

apps/web/public/dictionaries/en-US.json

@@ -919,5 +919,11 @@
     "go_to_profile": "Go to Profile",
     "continue": "Continue",
     "syncing": "Saving profile..."
+  },
+  "error_page": {
+    "title": "Something went wrong",
+    "description": "An unexpected error occurred. Don't worry, it's not your fault.",
+    "try_again": "Try again",
+    "go_home": "Go to home"
   }
 }

apps/web/public/dictionaries/es-ES.json

@@ -921,5 +921,11 @@
     "go_to_profile": "Ir a Perfil",
     "continue": "Continuar",
     "syncing": "Guardando perfil..."
+  },
+  "error_page": {
+    "title": "Algo salió mal",
+    "description": "Ocurrió un error inesperado. No te preocupes, no es tu culpa.",
+    "try_again": "Intentar de nuevo",
+    "go_home": "Ir al inicio"
   }
 }

apps/web/public/dictionaries/fr-FR.json

@@ -923,5 +923,11 @@
     "go_to_profile": "Aller au profil",
     "continue": "Continuer",
     "syncing": "Enregistrement du profil..."
+  },
+  "error_page": {
+    "title": "Quelque chose s'est mal passé",
+    "description": "Une erreur inattendue s'est produite. Ne vous inquiétez pas, ce n'est pas de votre faute.",
+    "try_again": "Réessayer",
+    "go_home": "Retour à l'accueil"
   }
 }

apps/web/public/dictionaries/it-IT.json

@@ -920,5 +920,11 @@
     "go_to_profile": "Vai al Profilo",
     "continue": "Continua",
     "syncing": "Salvataggio profilo..."
+  },
+  "error_page": {
+    "title": "Qualcosa è andato storto",
+    "description": "Si è verificato un errore imprevisto. Non preoccuparti, non è colpa tua.",
+    "try_again": "Riprova",
+    "go_home": "Vai alla home"
   }
 }

apps/web/public/dictionaries/ja-JP.json

@@ -923,5 +923,11 @@
     "go_to_profile": "プロフィールへ",
     "continue": "続ける",
     "syncing": "プロフィールを保存中..."
+  },
+  "error_page": {
+    "title": "問題が発生しました",
+    "description": "予期しないエラーが発生しました。ご心配なく、あなたのせいではありません。",
+    "try_again": "もう一度試す",
+    "go_home": "ホームへ戻る"
   }
 }

apps/web/public/dictionaries/pt-BR.json

@@ -922,5 +922,11 @@
     "go_to_profile": "Ir para o Perfil",
     "continue": "Continuar",
     "syncing": "Salvando perfil..."
+  },
+  "error_page": {
+    "title": "Algo deu errado",
+    "description": "Um erro inesperado aconteceu. Não se preocupe, não é sua culpa.",
+    "try_again": "Tentar novamente",
+    "go_home": "Ir para o início"
   }
 }

apps/web/src/app/[lang]/error.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { AlertCircle } from 'lucide-react'
+import { Button } from '@plotwist/ui/components/ui/button'
+import { useLanguage } from '@/context/language'
+
+export default function ErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  const { dictionary } = useLanguage()
+  const { lang } = useParams()
+  const router = useRouter()
+
+  useEffect(() => {
+    console.error(error)
+  }, [error])
+
+  const { error_page } = dictionary
+
+  return (
+    <div className="flex min-h-[70svh] w-full flex-col items-center justify-center gap-6 px-4">
+      <div className="flex flex-col items-center gap-4 text-center">
+        <div className="rounded-full border border-destructive/20 bg-destructive/10 p-4">
+          <AlertCircle className="size-10 text-destructive" />
+        </div>
+
+        <div className="space-y-2">
+          <h1 className="text-3xl font-bold tracking-tight">
+            {error_page.title}
+          </h1>
+
+          <p className="max-w-md text-muted-foreground">
+            {error_page.description}
+          </p>
+        </div>
+      </div>
+
+      <div className="flex gap-3">
+        <Button variant="outline" onClick={() => router.push(`/${lang}`)}>
+          {error_page.go_home}
+        </Button>
+
+        <Button onClick={() => reset()}>{error_page.try_again}</Button>
+      </div>
+    </div>
+  )
+}

apps/web/src/app/global-error.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import '@plotwist/ui/globals.css'
+
+import { useEffect } from 'react'
+import { AlertCircle } from 'lucide-react'
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    console.error(error)
+  }, [error])
+
+  return (
+    <html lang="en">
+      <body className="bg-background antialiased">
+        <div className="flex min-h-svh w-full flex-col items-center justify-center gap-6 px-4">
+          <div className="flex flex-col items-center gap-4 text-center">
+            <div className="rounded-full border border-destructive/20 bg-destructive/10 p-4">
+              <AlertCircle className="size-10 text-destructive" />
+            </div>
+
+            <div className="space-y-2">
+              <h1 className="text-3xl font-bold tracking-tight">
+                Something went wrong
+              </h1>
+
+              <p className="max-w-md text-muted-foreground">
+                An unexpected error occurred. Don&apos;t worry, it&apos;s not
+                your fault.
+              </p>
+            </div>
+          </div>
+
+          <div className="flex gap-3">
+            <a
+              href="/"
+              className="inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground"
+            >
+              Go to home
+            </a>
+
+            <button
+              type="button"
+              onClick={() => reset()}
+              className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90"
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+      </body>
+    </html>
+  )
+}