Improve error pages 👌

app/lookup/[domain]/certs/error.tsx

@@ -1,9 +1,47 @@
 'use client';
 
-const CertsError = () => (
-  <div className="flex items-center justify-center">
-    <p className="my-8">An error occurred!</p>
-  </div>
-);
+import { Loader2 } from 'lucide-react';
+import { revalidatePath } from 'next/cache';
+import { useParams } from 'next/navigation';
+import { type FC, useCallback, useEffect, useState } from 'react';
+
+import { Button } from '@/components/ui/button';
+
+type CertsErrorProps = {
+  error: Error & { digest?: string };
+  reset: () => void;
+};
+
+const CertsError: FC<CertsErrorProps> = ({ error }) => {
+  const [isLoading, setLoading] = useState(false);
+  const { domain } = useParams() as { domain: string };
+
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  const handleReset = useCallback(() => {
+    setLoading(true);
+    revalidatePath(`/lookup/${domain}/certs`);
+  }, [domain]);
+
+  return (
+    <div className="mt-12 flex flex-col items-center gap-2">
+      <h2>Something went wrong!</h2>
+      <p className="mt-2 text-center text-sm text-muted-foreground">
+        Digest: {error.digest}
+      </p>
+      <Button
+        className="mt-4"
+        onClick={handleReset}
+        disabled={isLoading}
+        variant="outline"
+      >
+        {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+        Try again
+      </Button>
+    </div>
+  );
+};
 
 export default CertsError;

app/lookup/[domain]/error.tsx

@@ -1,26 +1,29 @@
 'use client';
 
 import { Loader2 } from 'lucide-react';
+import { revalidatePath } from 'next/cache';
+import { useParams } from 'next/navigation';
 import { type FC, useCallback, useEffect, useState } from 'react';
 
 import { Button } from '@/components/ui/button';
 
-type LookupDomainErrorProps = {
+type DomainErrorProps = {
   error: Error & { digest?: string };
   reset: () => void;
 };
 
-const LookupDomainError: FC<LookupDomainErrorProps> = ({ error, reset }) => {
+const DomainError: FC<DomainErrorProps> = ({ error }) => {
   const [isLoading, setLoading] = useState(false);
+  const { domain } = useParams() as { domain: string };
 
   useEffect(() => {
     console.error(error);
   }, [error]);
 
   const handleReset = useCallback(() => {
     setLoading(true);
-    reset();
-  }, [reset]);
+    revalidatePath(`/lookup/${domain}`);
+  }, [domain]);
 
   return (
     <div className="mt-12 flex flex-col items-center gap-2">
@@ -41,4 +44,4 @@ const LookupDomainError: FC<LookupDomainErrorProps> = ({ error, reset }) => {
   );
 };
 
-export default LookupDomainError;
+export default DomainError;

app/lookup/[domain]/whois/error.tsx

@@ -1,9 +1,47 @@
 'use client';
 
-const WhoisError = () => (
-  <div className="flex items-center justify-center">
-    <p className="my-8">An error occurred!</p>
-  </div>
-);
+import { Loader2 } from 'lucide-react';
+import { revalidatePath } from 'next/cache';
+import { useParams } from 'next/navigation';
+import { type FC, useCallback, useEffect, useState } from 'react';
+
+import { Button } from '@/components/ui/button';
+
+type WhoisErrorProps = {
+  error: Error & { digest?: string };
+  reset: () => void;
+};
+
+const WhoisError: FC<WhoisErrorProps> = ({ error }) => {
+  const [isLoading, setLoading] = useState(false);
+  const { domain } = useParams() as { domain: string };
+
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  const handleReset = useCallback(() => {
+    setLoading(true);
+    revalidatePath(`/lookup/${domain}/whois`);
+  }, [domain]);
+
+  return (
+    <div className="mt-12 flex flex-col items-center gap-2">
+      <h2>Something went wrong!</h2>
+      <p className="mt-2 text-center text-sm text-muted-foreground">
+        Digest: {error.digest}
+      </p>
+      <Button
+        className="mt-4"
+        onClick={handleReset}
+        disabled={isLoading}
+        variant="outline"
+      >
+        {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+        Try again
+      </Button>
+    </div>
+  );
+};
 
 export default WhoisError;