Avoid a blank error page (#3256)

* Protect against undefined `status`

* Only show `statusCode` if we have one

web-admin/src/features/errors/ErrorPage.svelte

@@ -13,11 +13,13 @@
 
 <CtaLayoutContainer>
   <CtaContentContainer>
-    <h1
-      class="text-8xl font-extrabold bg-gradient-to-b from-[#CBD5E1] to-[#E2E8F0] text-transparent bg-clip-text"
-    >
-      {statusCode}
-    </h1>
+    {#if statusCode}
+      <h1
+        class="text-8xl font-extrabold bg-gradient-to-b from-[#CBD5E1] to-[#E2E8F0] text-transparent bg-clip-text"
+      >
+        {statusCode}
+      </h1>
+    {/if}
     <h2 class="text-lg font-semibold">{header}</h2>
     <CtaMessage>
       {body}

web-admin/src/features/errors/error-utils.ts

@@ -17,7 +17,7 @@ export function globalErrorCallback(error: AxiosError): void {
   if (isProjectPage) {
     // If "repository not found", ignore the error and show the page
     if (
-      error.response.status === 400 &&
+      error.response?.status === 400 &&
       (error.response.data as RpcStatus).message === "repository not found"
     ) {
       return;
@@ -29,21 +29,21 @@ export function globalErrorCallback(error: AxiosError): void {
     // If a dashboard wasn't found, let +page.svelte handle the error.
     // Because the project may be reconciling, in which case we want to show a loading spinner not a 404.
     if (
-      error.response.status === 404 &&
+      error.response?.status === 404 &&
       (error.response.data as RpcStatus).message === "not found"
     ) {
       return;
     }
 
     // When a JWT doesn't permit access to a metrics view, the metrics view APIs return 401s.
     // In this scenario, `GetCatalog` returns a 404. We ignore the 401s so we can show the 404.
-    if (error.response.status === 401) {
+    if (error.response?.status === 401) {
       return;
     }
   }
 
   // If Unauthorized, redirect to login page
-  if (error.response.status === 401) {
+  if (error.response?.status === 401) {
     goto(`${ADMIN_URL}/auth/login?redirect=${window.origin}`);
     return;
   }
@@ -57,7 +57,7 @@ export function globalErrorCallback(error: AxiosError): void {
 function createErrorStoreStateFromAxiosError(
   error: AxiosError
 ): ErrorStoreState {
-  const status = error.response.status;
+  const status = error.response?.status;
   const msg = (error.response.data as RpcStatus).message;
 
   // Specifically handle some errors
@@ -69,21 +69,21 @@ function createErrorStoreStateFromAxiosError(
     };
   } else if (msg === "org not found") {
     return {
-      statusCode: error.response.status,
+      statusCode: error.response?.status,
       header: "Organization not found",
       body: "The organization you requested could not be found. Please check that you have provided a valid organization name.",
     };
   } else if (msg === "project not found") {
     return {
-      statusCode: error.response.status,
+      statusCode: error.response?.status,
       header: "Project not found",
       body: "The project you requested could not be found. Please check that you have provided a valid project name.",
     };
   }
 
   // Fallback for all other errors
   return {
-    statusCode: error.response.status,
+    statusCode: error.response?.status,
     header: "Sorry, unexpected error!",
     body: "Try refreshing the page, and reach out to us if that doesn't fix the error.",
   };