Removed awaits, clean up API route

frontend/components/ChampionSelector.vue

@@ -102,9 +102,9 @@ watch(
 )
 
 // Navigation
-async function navigateToChampion(championAlias: string): Promise<void> {
+function navigateToChampion(championAlias: string): void {
   try {
-    await navigateTo(`/champion/${championAlias.toLowerCase()}`)
+    navigateTo(`/champion/${championAlias.toLowerCase()}`)
   } catch (error) {
     console.error('Navigation error:', error)
   }

frontend/components/ChampionTitle.vue

@@ -21,14 +21,20 @@ watch(
   }
 )
 
-const { data: championData }: ChampionResponse = await useFetch(
+const { data: championData } = useFetch<{ name: string; title: string }>(
   CDRAGON_BASE +
     'plugins/rcp-be-lol-game-data/global/default/v1/champions/' +
     props.championId +
-    '.json'
+    '.json',
+  {
+    lazy: true, // Don't block rendering
+    server: false // Client-side only
+  }
 )
-const championName = championData.value.name
+
-const championDescription = championData.value.title
+// Handle loading and error states
+const championName = computed(() => championData.value?.name || 'Loading...')
+const championDescription = computed(() => championData.value?.title || '')
 </script>
 
 <template>

frontend/components/nav/SideBar.vue

@@ -19,8 +19,10 @@ function handleStateChange(newState: string, newLane: number) {
   emit('stateChange', newState, newLane)
 }
 
-const { data: stats }: { data: Ref<{ patch: number; count: number }> } =
+const { data: stats }: { data: Ref<{ patch: number; count: number }> } = useFetch('/api/stats', {
-  await useFetch('/api/stats')
+  lazy: true, // Don't block rendering
+  server: false // Client-side only
+})
 
 const route = useRoute()
 
@@ -127,8 +129,13 @@ if (route.path.startsWith('/tierlist/')) {
     </div>
 
     <div style="position: absolute; bottom: 0; margin-bottom: 10px; padding-left: 10px">
+      <template v-if="stats">
         <h3 style="font-size: 23px; font-weight: 200">Patch {{ stats.patch }}</h3>
         <h3 style="font-size: 23px; font-weight: 200">{{ stats.count }} games</h3>
+      </template>
+      <template v-else>
+        <h3 style="font-size: 23px; font-weight: 200; opacity: 0.5">Loading stats...</h3>
+      </template>
       <NuxtLink to="/about"><h3>About</h3></NuxtLink>
       <h2 style="font-size: 12px; font-weight: 200; margin-top: 5px">
         BuildPath isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot

frontend/server/api/champion/[alias].ts

@@ -5,15 +5,62 @@ async function championInfos(client: MongoClient, patch: string, championAlias:
   const database = client.db('champions')
   const collection = database.collection(patch)
   const query = { alias: championAlias }
-  const championInfo = (await collection.findOne(query)) as unknown as ChampionData
+  const championInfo = (await collection.findOne(query)) as unknown as ChampionData | null
   return championInfo
 }
 
 export default defineEventHandler(async event => {
+  try {
     const championAlias = (getRouterParam(event, 'alias') as string).toLowerCase()
+
+    // Validate champion alias
+    if (!championAlias || typeof championAlias !== 'string') {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Invalid champion alias',
+        data: { alias: championAlias }
+      })
+    }
+
     const client = await connectToDatabase()
     const latestPatch = await fetchLatestPatch(client)
     const data = await championInfos(client, latestPatch, championAlias)
     await client.close()
+
+    if (!data) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: 'Champion not found',
+        data: { alias: championAlias, patch: latestPatch }
+      })
+    }
+
     return data
+  } catch (error) {
+    console.error('Error in champion API:', error)
+
+    // Handle different error types
+    if (error instanceof Error) {
+      throw createError({
+        statusCode: 500,
+        statusMessage: 'Failed to fetch champion data',
+        data: {
+          error: error.message,
+          championAlias: getRouterParam(event, 'alias')
+        }
+      })
+    }
+
+    // Re-throw if it's already a proper error
+    if (error && typeof error === 'object' && 'statusCode' in error) {
+      throw error
+    }
+
+    // Fallback error
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Internal server error',
+      data: { championAlias: getRouterParam(event, 'alias') }
+    })
+  }
 })