Handle downtime errors, give more information on error pages. (#3402)

Co-authored-by: Jai Agrawal <18202329+Geometrically@users.noreply.github.com>

apps/frontend/src/pages/[type]/[id].vue

@@ -1105,14 +1105,19 @@ let project,
   featuredVersions,
   versions,
   organization,
-  resetOrganization;
+  resetOrganization,
+  projectError,
+  membersError,
+  dependenciesError,
+  featuredVersionsError,
+  versionsError;
 try {
   [
-    { data: project, refresh: resetProject },
-    { data: allMembers, refresh: resetMembers },
-    { data: dependencies },
-    { data: featuredVersions },
-    { data: versions },
+    { data: project, error: projectError, refresh: resetProject },
+    { data: allMembers, error: membersError, refresh: resetMembers },
+    { data: dependencies, error: dependenciesError },
+    { data: featuredVersions, error: featuredVersionsError },
+    { data: versions, error: versionsError },
     { data: organization, refresh: resetOrganization },
   ] = await Promise.all([
     useAsyncData(`project/${route.params.id}`, () => useBaseFetch(`project/${route.params.id}`), {
@@ -1159,14 +1164,30 @@ try {
 
   versions = shallowRef(toRaw(versions));
   featuredVersions = shallowRef(toRaw(featuredVersions));
-} catch {
+} catch (err) {
   throw createError({
     fatal: true,
-    statusCode: 404,
-    message: "Project not found",
+    statusCode: err.statusCode ?? 500,
+    message: "Error loading project data" + (err.message ? `: ${err.message}` : ""),
   });
 }
 
+function handleError(err, project = false) {
+  if (err.value && err.value.statusCode) {
+    throw createError({
+      fatal: true,
+      statusCode: err.value.statusCode,
+      message: err.value.statusCode === 404 && project ? "Project not found" : err.value.message,
+    });
+  }
+}
+
+handleError(projectError, true);
+handleError(membersError);
+handleError(dependenciesError);
+handleError(featuredVersionsError);
+handleError(versionsError);
+
 if (!project.value) {
   throw createError({
     fatal: true,

apps/frontend/src/pages/index.vue

@@ -39,7 +39,7 @@
       </div>
     </div>
     <div class="users-section-outer">
-      <div class="projects-showcase">
+      <div v-if="rows" class="projects-showcase">
         <div v-for="(row, index) in rows" :key="index" class="row">
           <div v-for="n in 2" :key="n" class="row__content" :class="{ offset: index % 2 }">
             <nuxt-link
@@ -61,6 +61,9 @@
           </div>
         </div>
       </div>
+      <div v-else class="relative z-[10] w-full text-center text-xl font-bold text-contrast">
+        Failed to load random projects :(
+      </div>
       <div class="projects-transition" />
       <div class="users-section">
         <div class="section-header">
@@ -535,23 +538,27 @@ const sortType = ref("relevance");
 const auth = await useAuth();
 const tags = useTags();
 
-const newProjects = homePageProjects.slice(0, 40);
-const val = Math.ceil(newProjects.length / 3);
-const rows = ref([
-  newProjects.slice(0, val),
-  newProjects.slice(val, val * 2),
-  newProjects.slice(val * 2, val * 3),
-]);
+const newProjects = homePageProjects?.slice(0, 40);
+const val = Math.ceil(newProjects?.length / 3);
+const rows = ref(
+  newProjects.length > 0
+    ? [
+        newProjects.slice(0, val),
+        newProjects.slice(val, val * 2),
+        newProjects.slice(val * 2, val * 3),
+      ]
+    : undefined,
+);
 
-const notifications = ref(homePageNotifs.hits ?? []);
-const searchProjects = ref(homePageSearch.hits ?? []);
+const notifications = ref(homePageNotifs?.hits ?? []);
+const searchProjects = ref(homePageSearch?.hits ?? []);
 
 async function updateSearchProjects() {
   const res = await useBaseFetch(
     `search?limit=3&query=${searchQuery.value}&index=${sortType.value}`,
   );
 
-  searchProjects.value = res.hits ?? [];
+  searchProjects.value = res?.hits ?? [];
 }
 </script>