Fix #4933 when cert may not have domain names

frontend/src/components/Table/Formatter/DomainsFormatter.tsx

@@ -10,35 +10,42 @@ interface Props {
 	color?: string;
 }
 
-const DomainLink = ({ domain, color }: { domain: string; color?: string }) => {
+const DomainLink = ({ domain, color }: { domain?: string; color?: string }) => {
 	// when domain contains a wildcard, make the link go nowhere.
-	let onClick: ((e: React.MouseEvent) => void) | undefined;
-	if (domain.includes("*")) {
-		onClick = (e: React.MouseEvent) => e.preventDefault();
+	// Apparently the domain can be null or undefined sometimes.
+	// This try is just a safeguard to prevent the whole formatter from breaking.
+	if (!domain) return null;
+	try {
+		let onClick: ((e: React.MouseEvent) => void) | undefined;
+		if (domain.includes("*")) {
+			onClick = (e: React.MouseEvent) => e.preventDefault();
+		}
+		return (
+			<a
+				key={domain}
+				href={`http://${domain}`}
+				target="_blank"
+				onClick={onClick}
+				className={cn("badge", color ? `bg-${color}-lt` : null, "domain-name", "me-2")}
+			>
+				{domain}
+			</a>
+		);
+	} catch {
+		return null;
 	}
-	return (
-		<a
-			key={domain}
-			href={`http://${domain}`}
-			target="_blank"
-			onClick={onClick}
-			className={cn("badge", color ? `bg-${color}-lt` : null, "domain-name", "me-2")}
-		>
-			{domain}
-		</a>
-	);
 };
 
 export function DomainsFormatter({ domains, createdOn, niceName, provider, color }: Props) {
 	const elms: ReactNode[] = [];
-	if (domains.length === 0 && !niceName) {
+	if ((!domains || domains.length === 0) && !niceName) {
 		elms.push(
 			<span key="nice-name" className="badge bg-danger-lt me-2">
 				Unknown
 			</span>,
 		);
 	}
-	if (niceName && provider !== "letsencrypt") {
+	if (!domains || (niceName && provider !== "letsencrypt")) {
 		elms.push(
 			<span key="nice-name" className="badge bg-info-lt me-2">
 				{niceName}
@@ -46,7 +53,9 @@ export function DomainsFormatter({ domains, createdOn, niceName, provider, color
 		);
 	}
 
-	domains.map((domain: string) => elms.push(<DomainLink key={domain} domain={domain} color={color} />));
+	if (domains) {
+		domains.map((domain: string) => elms.push(<DomainLink key={domain} domain={domain} color={color} />));
+	}
 
 	return (
 		<div className="flex-fill">