Don't show a white page when a network or CORS failure occurs

.github/workflows/pages.yml

@@ -16,7 +16,7 @@ jobs:
                 node-version: '20'
                 cache: 'yarn'
             - run: yarn install --frozen-lockfile
-            - run: ROTO_API_HOST=https://rest.bgp-api.net ROUTINATOR_API_HOST=https://routinator.nlnetlabs.nl yarn build
+            - run: ROTO_API_HOST=https://example.org ROUTINATOR_API_HOST=https://routinator.nlnetlabs.nl yarn build
             - name: Deploy
               uses: cloudflare/wrangler-action@v3
               with:

src/components/prefix-check/SearchOptions.tsx

@@ -1,5 +1,6 @@
-import React, { JSX } from 'react';
+import React, { JSX, useContext } from 'react';
 import Help from '../Help';
+import { StatusContext } from '../../hooks/useStatus';
 
 export interface SearchOptionsProps {
   validatePrefix: boolean;
@@ -18,9 +19,18 @@ export default function SearchOptions({
   setAsnString,
   onSubmit,
 }: SearchOptionsProps): JSX.Element {
+  const { roto } = useContext(StatusContext);
+
+  if (!roto) {
+    setValidatePrefix(false);
+  }
+
   const disabled = validatePrefix ? '' : 'disabled';
   return (
     <div id="search-options">
+      {!roto && <div className='warning-message'>
+        The Roto API is unresponsive. Some features may not be available.
+      </div>}
       <h2>
         ASN Lookup
         <Help>
@@ -31,10 +41,11 @@ export default function SearchOptions({
           </p>
         </Help>
       </h2>
-      <p>
+      <p className={roto ? "" : "disabled"}>
         <label className="checkbox">
           <input
             type="checkbox"
+            disabled={!roto}
             checked={validatePrefix}
             onChange={(e) => {
               if (e.target.checked) {

src/hooks/useSearch.ts

@@ -159,22 +159,43 @@ export default function useSearch(
       return;
     }
 
-    const search = async () => {
-      const response = queryPrefix ? 
-        await fetch(
-          `${ROTO_ENDPOINT}/api/v1/prefix/${queryPrefix}/search`
-        ) :
-        await fetch(
-          `${ROTO_ENDPOINT}/api/v1/asn/${arrayFromCommaSeperated(params.asns).map(parseASN).join()}/search`
-        );
-
-      if (response.status !== 200) {
-        // TODO as soon as we get a JSON error message via https://github.com/NLnetLabs/routinator/issues/925
-        //  we should display them to the user
-        return setError();
+    const retrieve = async (): Promise<Search> => {
+      try {
+        const response = queryPrefix ? 
+          await fetch(
+            `${ROTO_ENDPOINT}/api/v1/prefix/${queryPrefix}/search`
+          ) :
+          await fetch(
+            `${ROTO_ENDPOINT}/api/v1/asn/${arrayFromCommaSeperated(params.asns).map(parseASN).join()}/search`
+          );
+
+        if (response.status !== 200) {
+          // TODO as soon as we get a JSON error message via https://github.com/NLnetLabs/routinator/issues/925
+          //  we should display them to the user
+          throw new Error(response.statusText);
+        }
+
+        const searchResult: Search = await response.json();
+        return searchResult;
+      } catch (err) {
+        setNotification({message: "bgp-api responded with the following error:\n" + err, level: "error"});
       }
+      const searchResult: Search = {
+        prefix: queryPrefix || "",
+        type: "empty-match",
+        result: {
+          prefix: queryPrefix || "",
+          meta: [],
+          type: "empty-match"
+        }
+      };
+      return searchResult;
+    }
+
+    const search = async () => {
+      const searchResult: Search = await retrieve();
 
-      const searchResult: Search = await response.json();
+      const bgpApiError = searchResult.type == 'empty-match';
 
       if (searchResult.error_msg) {
         return setError(searchResult.error_msg);
@@ -190,7 +211,7 @@ export default function useSearch(
       let nextAsns = arrayFromCommaSeperated(params.asns);
 
       // fill in the asn provided in the search result
-      if (validatePrefix) {
+      if (validatePrefix && !bgpApiError) {
         const resultAsns = searchResult.result.meta
           .map((m) => (m.originASNs ? m.originASNs : null))
           .find((asns) => asns);
@@ -237,7 +258,7 @@ export default function useSearch(
       setValidationResults(res);
     };
 
-    search().catch(setError);
+    search().catch(err => setError(err + ""));
   }, [params.prefix, params.asns, validatePrefix, exactMatch]);
 
   // when the search form is submitted

src/style/prefix-check.css

@@ -289,3 +289,16 @@
 #prefix-check .matched {
   border-left: 0.5rem solid var(--success-border);
 }
+
+#prefix-check .warning-message {
+  color: var(--warning);
+  background-color: var(--warning-bg);
+  border: 1px solid var(--warning-border);
+  padding: 0.5rem;
+  border-radius: var(--radius);
+  margin: 0.5rem 0;
+}
+
+#prefix-check.searched .warning-message {
+  max-width: 18rem;
+}