update explore page to show super helpful error messages for almost a…

…ny situation/error
ehanahamed · Feb 1, 2025 · 3f2e6ff · 3f2e6ff
1 parent f2428c6
commit 3f2e6ff
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 5 deletions.
diff --git a/web/src/routes/explore/+page.server.js b/web/src/routes/explore/+page.server.js
@@ -1,5 +1,6 @@
 import { env } from '$env/dynamic/private';
 import { error } from '@sveltejs/kit';
+import checkApiStatus from '$lib/checkApiStatus.server.js';
 
 export async function load({ cookies }) {
     try {
@@ -51,19 +52,50 @@ export async function load({ cookies }) {
         if (apiRes?.data?.recentStudysets?.length >= 0) {
           recentStudysets = apiRes.data.recentStudysets;
         }
+
+        let apiStatus;
+        /* if there's no data, check qzfr-api status */
+        if (!(featuredStudysets?.length >= 1 || recentStudysets?.length >= 1)) {
+          apiStatus = await checkApiStatus({
+            authCookie: cookies.get("auth"),
+            API_URL: env.API_URL
+          })
+        }
         return {
             featuredStudysets: featuredStudysets,
             recentStudysets: recentStudysets,
             authed: authed,
             authedUser: authedUser,
             header: {
                 activePage: "explore"
-            }
+            },
+            graphQLErrors: apiRes?.errors,
+            apiStatus: apiStatus
         }
       } catch (err) {
         console.error(err);
-        error(404, {
-            message: "Not Found"
+        let apiStatus = await checkApiStatus({
+          authCookie: cookies.get("auth"),
+          API_URL: env.API_URL
         })
+        if (!(apiStatus?.apiUp) || (apiStatus?.apiResponseErrorNotJSON)) {
+          return {
+            authed: false,
+            header: {
+                activePage: "explore"
+            },
+            pageServerJSError: false,
+            apiStatus: apiStatus
+          }
+        } else {
+          return {
+            authed: false,
+            header: {
+                activePage: "explore"
+            },
+            pageServerJSError: true,
+            apiStatus: apiStatus
+          }
+        }
       }
 }
diff --git a/web/src/routes/explore/+page.svelte b/web/src/routes/explore/+page.svelte
@@ -11,7 +11,7 @@
 <main>
   <div class="grid page">
     <div class="content">
-      {#if (data.featuredStudysets.length >= 1) }
+      {#if (data.featuredStudysets?.length >= 1) }
       <h2 class="h4">Featured Studysets</h2>
       <div class="grid list" style="overflow-wrap:anywhere">
         {#each data.featuredStudysets as featuredStudyset }
@@ -31,7 +31,7 @@
         {/each}
       </div>
       {/if}
-      {#if (data.recentStudysets.length >= 1) }
+      {#if (data.recentStudysets?.length >= 1) }
       <h2 class="h4">Recently Created or Updated</h2>
         <div class="grid list" style="overflow-wrap:anywhere">
           {#each data.recentStudysets as studyset }
@@ -51,6 +51,44 @@
           {/each}
         </div>
       {/if}
+      {#if data?.pageServerJSError}
+      <div class="box ohno">
+        <h4>Oh no!!</h4>
+        <p class="fg1">There was an error in the code that loads this page.</p>
+        <p class="fg1">If you're a developer/contributor, check web/src/routes/explore/+page.server.js</p>
+        <p class="fg1">You probably don't need to check <a href="/api-status">API Status</a>, because this error is from qzfr-web, but have the link anyway i guess</p>
+      </div>
+      {:else if !(data.featuredStudysets?.length >= 1 || data.recentStudysets?.length >= 1) }
+        {#if data?.apiStatus?.apiUp}
+          {#if data?.apiStatus?.dbConnectionUp}
+            {#if data?.graphQLErrors?.length >= 1}
+            <div class="box ohno">
+              <h4>Oh no!!</h4>
+              <p class="fg1">Quizfreely's API sent us an error via GraphQL.</p>
+              <p class="fg1">That usually means the API is running, but something is wrong in qzfr-web's query or qzfr-api's resolver (i don't know which one while i'm writing this error message)</p>
+            </div>
+            {:else}
+              <div class="box">
+                There are no public studysets to show here. <br>
+                Everything loaded correctly tho (i think)
+              </div>
+            {/if}
+          {:else}
+          <div class="box ohno">
+            <h4>Oh no!!</h4>
+            <p class="fg1">We couldn't load anything because our API's database connection is down.</p>
+            <p class="fg1">Quizfreely's API is running correctly and everything, but the DB isn't :(</p>
+            <p class="fg1">Check <a href="/api-status">API Status</a> for more info</p>
+          </div>
+          {/if}
+        {:else}
+          <div class="box ohno">
+            <h4>Oh no!!</h4>
+            <p class="fg1">We couldn't load anything because Quizfreely's API is down.</p>
+            <p class="fg1">Check <a href="/api-status">API Status</a> for more info</p>
+          </div>
+        {/if}
+      {/if}
     </div>
   </div>
 </main>