From d0c01fffa8a867ce9c60510e1c78a436ef5daba4 Mon Sep 17 00:00:00 2001
From: "Lin, Hung-Shin" <wancat@wancat.cc>
Date: Fri, 17 Nov 2023 11:18:14 +0800
Subject: [PATCH] fix: enhance error handling in frontend

---
 app/src/store/session.js   | 18 +++++++++++++++---
 app/src/utils/errors.js    | 18 ++++++++++++++----
 app/src/views/GamePage.vue | 13 ++++++++++++-
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/app/src/store/session.js b/app/src/store/session.js
index 4c85f76..ac64e88 100644
--- a/app/src/store/session.js
+++ b/app/src/store/session.js
@@ -4,6 +4,7 @@ import { FileGraph } from '@linux-odyssey/file-graph'
 import api from '../utils/api'
 import Socket from '../utils/socket'
 import SocketTerminal from '../utils/terminal'
+import { LoadQuestError, LoadSessionError } from '../utils/errors'
 
 const toast = useToast()
 
@@ -32,7 +33,7 @@ const socket = new Socket()
 const term = new SocketTerminal(40, 80)
 
 function setQuest(questId) {
-  api.get(`/quests/${questId}`).then((res) => {
+  return api.get(`/quests/${questId}`).then((res) => {
     store.questId = res.data._id
     store.quest = res.data
   })
@@ -108,9 +109,20 @@ export function reset() {
 }
 
 export async function init(questId) {
+  if (!questId) throw new Error('No quest ID provided')
   reset()
-  await setQuest(questId)
-  await getActiveSession(questId)
+  try {
+    await setQuest(questId)
+  } catch (err) {
+    console.error(err)
+    throw new LoadQuestError('Failed to load quest', questId)
+  }
+  try {
+    await getActiveSession(questId)
+  } catch (err) {
+    console.error(err)
+    throw new LoadSessionError('Failed to load session', questId)
+  }
 }
 
 function setup() {
diff --git a/app/src/utils/errors.js b/app/src/utils/errors.js
index 2fe0cbb..ff8af71 100644
--- a/app/src/utils/errors.js
+++ b/app/src/utils/errors.js
@@ -20,8 +20,18 @@ export class UnauthorizedError extends Error {
   }
 }
 
-export default {
-  TooManyRequestsError,
-  ValidationError,
-  UnauthorizedError,
+export class LoadQuestError extends Error {
+  constructor(message, questId) {
+    super(message)
+    this.name = 'LoadQuestError'
+    this.questId = questId
+  }
+}
+
+export class LoadSessionError extends Error {
+  constructor(message, questId) {
+    super(message)
+    this.name = 'LoadSessionError'
+    this.questId = questId
+  }
 }
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index d34a80c..5e49e12 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -10,6 +10,7 @@ import TerminalPart from '../components/TerminalPart.vue'
 import VisualizationPart from '../components/VisualizationPart.vue'
 import ControlPalette from '../components/ControlPalette.vue'
 import CompleteModal from '../components/CompleteModal.vue'
+import { LoadQuestError, LoadSessionError } from '../utils/errors'
 
 const completed = computed(() => {
   return sessionStore.session.status === 'finished'
@@ -28,8 +29,18 @@ onMounted(async () => {
   try {
     await init(props.questId)
   } catch (err) {
+    if (err instanceof LoadQuestError) {
+      toast.error(`Failed to load quest: ${err.questId}. Please check the URL.`)
+      return
+    }
+    if (err instanceof LoadSessionError) {
+      toast.error(
+        `Failed to create session for quest: ${err.questId}. Please re-login and try again.`
+      )
+      return
+    }
     console.error(err)
-    toast.error('Failed to initialize game session')
+    toast.error(err.message)
   }
 })
 </script>