.

Author: kantord

src/app/catalog/error.tsx

@@ -1,29 +1,12 @@
 "use client";
 
-import { useEffect } from "react";
-import { ErrorPage } from "@/components/error-page";
-import { Button } from "@/components/ui/button";
+import { RuntimeError } from "@/components/error-page";
 
 interface ErrorProps {
   error: Error & { digest?: string };
   reset: () => void;
 }
 
 export default function CatalogErrorPage({ error, reset }: ErrorProps) {
-  useEffect(() => {
-    console.error(error);
-  }, [error]);
-
-  return (
-    <ErrorPage
-      title="Something went wrong"
-      actions={
-        <Button onClick={reset} variant="default">
-          Try again
-        </Button>
-      }
-    >
-      An unexpected error occurred. Please try again.
-    </ErrorPage>
-  );
+  return <RuntimeError error={error} reset={reset} />;
 }

src/app/error.tsx

@@ -1,29 +1,12 @@
 "use client";
 
-import { useEffect } from "react";
-import { ErrorPage } from "@/components/error-page";
-import { Button } from "@/components/ui/button";
+import { RuntimeError } from "@/components/error-page";
 
 interface ErrorProps {
   error: Error & { digest?: string };
   reset: () => void;
 }
 
 export default function RootErrorPage({ error, reset }: ErrorProps) {
-  useEffect(() => {
-    console.error(error);
-  }, [error]);
-
-  return (
-    <ErrorPage
-      title="Something went wrong"
-      actions={
-        <Button onClick={reset} variant="default">
-          Try again
-        </Button>
-      }
-    >
-      An unexpected error occurred. Please try again.
-    </ErrorPage>
-  );
+  return <RuntimeError error={error} reset={reset} />;
 }

src/components/error-page/index.ts

@@ -1 +1,2 @@
 export { ErrorPage } from "./error-page";
+export { RuntimeError } from "./runtime-error";

src/components/error-page/runtime-error.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { ErrorPage } from "./error-page";
+
+interface RuntimeErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export function RuntimeError({ error, reset }: RuntimeErrorProps) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <ErrorPage
+      title="Something went wrong"
+      actions={
+        <Button onClick={reset} variant="default">
+          Try again
+        </Button>
+      }
+    >
+      An unexpected error occurred. Please try again.
+    </ErrorPage>
+  );
+}