major bug fixed + error handling

components/PublicPage/LinkCard.tsx

@@ -2,6 +2,7 @@ import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
 import { Link as LinkType, Tag } from "@prisma/client";
+import isValidUrl from "@/lib/client/isValidUrl";
 
 interface LinksIncludingTags extends LinkType {
   tags: Tag[];
@@ -13,7 +14,8 @@ type Props = {
 };
 
 export default function LinkCard({ link, count }: Props) {
-  const url = new URL(link.url);
+  const url = isValidUrl(link.url) ? new URL(link.url) : undefined;
+
   const formattedDate = new Date(
     link.createdAt as unknown as string
   ).toLocaleString("en-US", {
@@ -25,30 +27,34 @@ export default function LinkCard({ link, count }: Props) {
   return (
     <a href={link.url} target="_blank" rel="noreferrer" className="rounded-3xl">
       <div className="bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-md sm:hover:shadow-none duration-100 rounded-3xl cursor-pointer p-5 flex items-start relative gap-5 sm:gap-10 group/item">
-        <Image
-          src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-          width={42}
-          height={42}
-          alt=""
-          className="select-none mt-3 z-10 rounded-full shadow border-[3px] border-white bg-white"
-          draggable="false"
-          onError={(e) => {
-            const target = e.target as HTMLElement;
-            target.style.opacity = "0";
-          }}
-        />
-        <Image
-          src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-          width={80}
-          height={80}
-          alt=""
-          className="blur-sm absolute left-2 opacity-40 select-none hidden sm:block"
-          draggable="false"
-          onError={(e) => {
-            const target = e.target as HTMLElement;
-            target.style.opacity = "0";
-          }}
-        />
+        {url && (
+          <>
+            <Image
+              src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
+              width={42}
+              height={42}
+              alt=""
+              className="select-none mt-3 z-10 rounded-full shadow border-[3px] border-white bg-white"
+              draggable="false"
+              onError={(e) => {
+                const target = e.target as HTMLElement;
+                target.style.display = "none";
+              }}
+            />
+            <Image
+              src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
+              width={80}
+              height={80}
+              alt=""
+              className="blur-sm absolute left-2 opacity-40 select-none hidden sm:block"
+              draggable="false"
+              onError={(e) => {
+                const target = e.target as HTMLElement;
+                target.style.display = "none";
+              }}
+            />
+          </>
+        )}
         <div className="flex justify-between items-center gap-5 w-full h-full z-0">
           <div className="flex flex-col justify-between">
             <div className="flex items-baseline gap-1">
@@ -74,7 +80,7 @@ export default function LinkCard({ link, count }: Props) {
             <div className="flex gap-2 items-center flex-wrap mt-2">
               <p className="text-gray-500">{formattedDate}</p>
               <div className="text-sky-400 font-bold flex items-center gap-1">
-                <p>{url.host}</p>
+                <p>{url ? url.host : link.url}</p>
               </div>
             </div>
           </div>