エラーハンドリングした close #3

src/app/[locale]/(app)/error.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { Button } from '@/shared/components/ui/button';
+import { IconExclamationCircle } from '@tabler/icons-react';
+import { t } from 'i18next';
+import type { FC } from 'react';
+
+type Props = {
+  error: Error;
+  reset: () => void;
+};
+
+const ErrorPage: FC<Props> = ({ error, reset }) => {
+  console.error(error);
+
+  return (
+    <div className="h-full flex flex-col items-center justify-center space-y-4">
+      <IconExclamationCircle className="size-10" />
+      <p>{t('common:error.message')}</p>
+      <Button onClick={reset}>{t('common:error.reload')}</Button>
+    </div>
+  );
+};
+
+export default ErrorPage;

src/locales/en.ts

@@ -219,5 +219,9 @@ export const en = {
         'Calculate the expected value of the dice, etc. You can predict what kind of result you will get when you roll the dice.',
     },
     ccfolia: { title: 'CCFOLIA Export' },
+    error: {
+      message: 'An unexpected error occurred.',
+      reload: 'Reload Page',
+    },
   },
 };

src/locales/ja.ts

@@ -219,5 +219,9 @@ export const ja = {
       description: 'ダイスの期待値などを計算します。ダイスを振るときに、どういう結果が出るのかを予測できます。',
     },
     ccfolia: { title: 'ココフォリア出力' },
+    error: {
+      message: '予期せぬエラーが発生しました',
+      reload: '再読み込み',
+    },
   },
 };