error message component

src/app/[ecosystem]/[...packageName]/page.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { mdiAlert, mdiCircleSmall } from "@mdi/js";
 import Icon from "@mdi/react";
 import { notFound } from "next/navigation";
+import ErrorMessage from "@/components/ErrorMessage";
 
 import Risk from "@/components/Risk";
 import Maturity from "@/components/Maturity";
@@ -32,6 +33,11 @@ export default async function PackageScoreComponent({ params }: Props) {
     notFound();
   }
 
+  if (status === "invalid_ecosystem") {
+    const message = `Ecosystem ${ecosystem} is not supported`;
+    return <ErrorMessage message={message} />;
+  }
+
   return (
     <div className="grid grid-cols-2 gap-4">
       <div>

src/components/ErrorMessage.tsx

@@ -0,0 +1,7 @@
+export default function ErrorMessage({ message }: { message: string }) {
+  return (
+    <div>
+      <strong>{message}</strong>
+    </div>
+  );
+}

src/utils/score_res.ts

@@ -89,6 +89,14 @@ export type PackageScore =
       source: null;
       score: null;
     }
+  | {
+      ecosystem: string;
+      package_name: string;
+      status: "invalid_ecosystem";
+      package: Package;
+      source: null;
+      score: null;
+    }
   | {
       ecosystem: string;
       package_name: string;
@@ -106,12 +114,20 @@ export async function fetchPackageScore(
   name: string,
 ): Promise<PackageScore> {
   const url = `${BASE_URL}/score/${ecosystem.toLowerCase()}/${name}`;
-  console.debug(url);
   const res = await fetch(url);
-  if (res.status != 200) {
-    const error = await res.json();
-    throw new Error(error?.detail || "Failed to fetch package score");
+
+  if (!res.ok) {
+    const err = await res.json();
+    return {
+      ecosystem,
+      package_name: name,
+      status: err.error,
+      package: {} as Package,
+      source: null,
+      score: null,
+    };
   }
+
   const data = await res.json();
   return data;
 }