💄 style: add 404 and Error page (lobehub#2299)

* ✨ feat: Add 404 and Error page

* 🐛 fix: Fix dynamic ssr in error page

* ⚡ perf: Dynamic import Sentry

locales/ar/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "العودة إلى الصفحة الرئيسية",
+    "desc": "حاول مرة أخرى في وقت لاحق، أو عد إلى العالم المألوف",
+    "retry": "إعادة التحميل",
+    "title": "واجهت الصفحة مشكلة ما.."
+  },
+  "notFound": {
+    "backHome": "العودة إلى الصفحة الرئيسية",
+    "desc": "لم نتمكن من العثور على الصفحة التي تبحث عنها، يرجى التحقق مما إذا كان الرابط صحيحًا",
+    "title": "هل دخلت إلى مجال غير معروف؟"
+  },
   "pluginSettings": {
     "desc": "أكمل الإعدادات التالية لبدء استخدام هذا المكون الإضافي",
     "title": "تكوين مكون الإضافة {{name}}"

locales/bg-BG/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Върни се в началото",
+    "desc": "Опитайте отново по-късно или се върнете в познатия свят",
+    "retry": "Опитай отново",
+    "title": "Страницата се е сблъскала с проблем.."
+  },
+  "notFound": {
+    "backHome": "Върни се в началото",
+    "desc": "Не можем да намерим страницата, която търсите. Моля, проверете дали връзката е правилна.",
+    "title": "Влезли сте в неизвестна територия?"
+  },
   "pluginSettings": {
     "desc": "Попълнете следната конфигурация, за да започнете да използвате този плъгин",
     "title": "Настройки на плъгина {{name}}"

locales/de-DE/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Zurück zur Startseite",
+    "desc": "Versuchen Sie es später erneut oder kehren Sie in die bekannte Welt zurück",
+    "retry": "Erneut laden",
+    "title": "Ein Problem ist aufgetreten auf der Seite.."
+  },
+  "notFound": {
+    "backHome": "Zurück zur Startseite",
+    "desc": "Die von Ihnen gesuchte Seite konnte nicht gefunden werden. Bitte überprüfen Sie, ob der Link korrekt ist.",
+    "title": "In unbekanntes Gebiet geraten?"
+  },
   "pluginSettings": {
     "desc": "Führen Sie die folgende Konfiguration durch, um das Plugin zu verwenden",
     "title": "{{name}} Plugin-Konfiguration"

locales/en-US/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Back to Home",
+    "desc": "Give it a try later, or go back to the known world.",
+    "retry": "Reload",
+    "title": "Oops, something went wrong.."
+  },
+  "notFound": {
+    "backHome": "Back to Home",
+    "desc": "We couldn't find the page you're looking for, please check if the link is correct",
+    "title": "Entered Unknown Territory?"
+  },
   "pluginSettings": {
     "desc": "Complete the following configuration to start using this plugin",
     "title": "{{name}} Plugin Settings"

locales/es-ES/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Volver a la página de inicio",
+    "desc": "Inténtalo de nuevo más tarde, o regresa al mundo conocido",
+    "retry": "Reintentar",
+    "title": "Se ha producido un problema en la página.."
+  },
+  "notFound": {
+    "backHome": "Volver a la página de inicio",
+    "desc": "No podemos encontrar la página que estás buscando, por favor verifica si el enlace es correcto",
+    "title": "¿Has entrado en un área desconocida?"
+  },
   "pluginSettings": {
     "desc": "Complete la siguiente configuración para comenzar a usar este complemento",
     "title": "Configuración del complemento {{name}}"

locales/fr-FR/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Retour à la page d'accueil",
+    "desc": "Réessayez plus tard, ou retournez au monde connu",
+    "retry": "Recharger",
+    "title": "Un problème est survenu sur la page.."
+  },
+  "notFound": {
+    "backHome": "Retour à la page d'accueil",
+    "desc": "La page que vous recherchez est introuvable. Veuillez vérifier si le lien est correct.",
+    "title": "Êtes-vous entré dans un domaine inconnu ?"
+  },
   "pluginSettings": {
     "desc": "Completez la configuration suivante pour commencer à utiliser ce plugin",
     "title": "Configuration du plugin {{name}}"

locales/it-IT/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Torna alla homepage",
+    "desc": "Prova di nuovo più tardi, o torna al mondo conosciuto",
+    "retry": "Ricarica",
+    "title": "La pagina ha riscontrato un problema.."
+  },
+  "notFound": {
+    "backHome": "Torna alla homepage",
+    "desc": "Non riusciamo a trovare la pagina che stai cercando, controlla che il link sia corretto",
+    "title": "Hai raggiunto un territorio sconosciuto?"
+  },
   "pluginSettings": {
     "desc": "Completa la seguente configurazione per iniziare a utilizzare il plugin",
     "title": "Configurazione del plugin {{name}}"

locales/ja-JP/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "ホームに戻る",
+    "desc": "後で試してみるか、既知の世界に戻る",
+    "retry": "再読み込み",
+    "title": "ページに問題が発生しました.."
+  },
+  "notFound": {
+    "backHome": "ホームに戻る",
+    "desc": "お探しのページが見つかりません。リンクが正しいかどうかをご確認ください",
+    "title": "未知の領域に入りましたか？"
+  },
   "pluginSettings": {
     "desc": "以下の設定を完了すると、プラグインを使用することができます",
     "title": "{{name}} プラグイン設定"

locales/ko-KR/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "홈페이지로 돌아가기",
+    "desc": "잠시 후 다시 시도하거나 익숙한 세계로 돌아가세요",
+    "retry": "다시 시도",
+    "title": "페이지에서 문제가 발생했습니다."
+  },
+  "notFound": {
+    "backHome": "홈페이지로 돌아가기",
+    "desc": "찾고 있는 페이지를 찾을 수 없습니다. 링크가 올바른지 확인해주세요.",
+    "title": "알 수 없는 영역에 들어갔나요?"
+  },
   "pluginSettings": {
     "desc": "다음 구성을 완료하면 플러그인을 사용할 수 있습니다.",
     "title": "{{name}} 플러그인 설정"

locales/nl-NL/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Terug naar startpagina",
+    "desc": "Probeer het later opnieuw of keer terug naar de bekende wereld",
+    "retry": "Opnieuw proberen",
+    "title": "Er is een probleem opgetreden op de pagina.."
+  },
+  "notFound": {
+    "backHome": "Terug naar startpagina",
+    "desc": "We kunnen de pagina die je zoekt niet vinden, controleer of de link juist is",
+    "title": "Betreden onbekend terrein?"
+  },
   "pluginSettings": {
     "desc": "Voltooi de volgende instellingen om de plugin te gebruiken",
     "title": "{{name}} Plugin Instellingen"

locales/pl-PL/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Powrót do strony głównej",
+    "desc": "Spróbuj ponownie później lub wróć do znanego świata",
+    "retry": "Ponów próbę",
+    "title": "Napotkano problem na stronie.."
+  },
+  "notFound": {
+    "backHome": "Powrót do strony głównej",
+    "desc": "Nie możemy odnaleźć strony, której szukasz. Sprawdź, czy link jest poprawny.",
+    "title": "Wkraczasz w nieznane terytorium?"
+  },
   "pluginSettings": {
     "desc": "Wykonaj poniższą konfigurację, aby rozpocząć korzystanie z tego wtyczki",
     "title": "Konfiguracja wtyczki {{name}}"

locales/pt-BR/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Voltar para a página inicial",
+    "desc": "Tente novamente mais tarde, ou retorne ao mundo conhecido",
+    "retry": "Tentar novamente",
+    "title": "Ocorreu um problema na página.."
+  },
+  "notFound": {
+    "backHome": "Voltar para a página inicial",
+    "desc": "Não conseguimos encontrar a página que você está procurando, por favor, verifique se o link está correto",
+    "title": "Entrou em um território desconhecido?"
+  },
   "pluginSettings": {
     "desc": "Complete a seguinte configuração para começar a usar este plugin",
     "title": "Configuração do plugin {{name}}"

locales/ru-RU/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Вернуться на главную",
+    "desc": "Попробуйте позже или вернитесь в знакомый мир",
+    "retry": "Повторить попытку",
+    "title": "Произошла проблема на странице.."
+  },
+  "notFound": {
+    "backHome": "Вернуться на главную",
+    "desc": "Мы не можем найти страницу, которую вы ищете. Пожалуйста, проверьте правильность ссылки",
+    "title": "Заблудились в неизведанных местах?"
+  },
   "pluginSettings": {
     "desc": "Чтобы начать использовать этот плагин, выполните следующую конфигурацию",
     "title": "{{name}} Настройки плагина"

locales/tr-TR/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Ana Sayfaya Dön",
+    "desc": "Biraz sonra tekrar deneyin veya bilinen dünyaya geri dönün",
+    "retry": "Yeniden Yükle",
+    "title": "Sayfa bir sorunla karşılaştı.."
+  },
+  "notFound": {
+    "backHome": "Ana Sayfaya Dön",
+    "desc": "Aradığınız sayfayı bulamadık, lütfen bağlantının doğru olduğundan emin olun",
+    "title": "Bilinmeyen bir alana mı girdiniz?"
+  },
   "pluginSettings": {
     "desc": "Bu eklentiyi kullanmaya başlamak için aşağıdaki yapılandırmayı tamamlayın",
     "title": "{{name}} Eklenti Ayarları"

locales/vi-VN/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "Quay về Trang chủ",
+    "desc": "Hãy thử lại sau, hoặc quay về thế giới đã biết",
+    "retry": "Thử lại",
+    "title": "Trang gặp một chút vấn đề.."
+  },
+  "notFound": {
+    "backHome": "Quay về Trang chủ",
+    "desc": "Chúng tôi không thể tìm thấy trang bạn đang tìm, vui lòng kiểm tra xem liên kết có đúng không",
+    "title": "Bước vào vùng đất chưa biết?"
+  },
   "pluginSettings": {
     "desc": "Hoàn thành cấu hình sau để bắt đầu sử dụng plugin này",
     "title": "Cấu hình Plugin {{name}}"

locales/zh-CN/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "返回首页",
+    "desc": "待会来试试，或者回到已知的世界",
+    "retry": "重新加载",
+    "title": "页面遇到一点问题.."
+  },
+  "notFound": {
+    "backHome": "返回首页",
+    "desc": "我们找不到你正在寻找的页面，请检查链接是否正确",
+    "title": "进入了未知领域？"
+  },
   "pluginSettings": {
     "desc": "完成以下配置，即可开始使用该插件",
     "title": "{{name}} 插件配置"

locales/zh-TW/error.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "backHome": "返回首頁",
+    "desc": "待會再試試，或者回到已知的世界",
+    "retry": "重新加載",
+    "title": "頁面遇到一點問題.."
+  },
+  "notFound": {
+    "backHome": "返回首頁",
+    "desc": "我們找不到您正在尋找的頁面，請檢查連結是否正確",
+    "title": "進入了未知領域？"
+  },
   "pluginSettings": {
     "desc": "完成以下設定後，即可開始使用此外掛",
     "title": "{{name}} 插件設定"

src/app/error.tsx

@@ -0,0 +1,5 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/Error'));

src/app/global-error.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import Error from 'next/error';
+import { useLayoutEffect } from 'react';
+
+import { type ErrorType, sentryCaptureException } from '@/components/Error/sentryCaptureException';
+
+export default function GlobalError({ error }: { error: ErrorType; reset: () => void }) {
+  useLayoutEffect(() => {
+    sentryCaptureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        <Error statusCode={undefined as any} />
+      </body>
+    </html>
+  );
+}

src/app/not-found.tsx

@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic';
+
+export default dynamic(() => import('@/components/404'));

src/components/404/index.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { FluentEmoji } from '@lobehub/ui';
+import { Button } from 'antd';
+import Link from 'next/link';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { MAX_WIDTH } from '@/const/layoutTokens';
+
+const Page404 = memo(() => {
+  const { t } = useTranslation('error');
+  return (
+    <Flexbox align={'center'} justify={'center'} style={{ height: '100%', width: '100%' }}>
+      <h1
+        style={{
+          filter: 'blur(8px)',
+          fontSize: `min(${MAX_WIDTH / 3}px, 50vw)`,
+          fontWeight: 'bolder',
+          margin: 0,
+          opacity: 0.12,
+          position: 'absolute',
+          zIndex: 0,
+        }}
+      >
+        404
+      </h1>
+      <FluentEmoji emoji={'👀'} size={64} />
+      <h2 style={{ fontWeight: 'bold', marginTop: '1em', textAlign: 'center' }}>
+        {t('notFound.title')}
+      </h2>
+      <p style={{ marginBottom: '2em' }}>{t('notFound.desc')}</p>
+      <Link href="/">
+        <Button type={'primary'}>{t('notFound.backHome')}</Button>
+      </Link>
+    </Flexbox>
+  );
+});
+
+export default Page404;