Merge pull request #163 from jedmund/catch-api-errors

Basic error handling for API errors in SSR

pages/[username].tsx

@@ -15,6 +15,7 @@ import organizeRaids from '~utils/organizeRaids'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
+import { printError } from '~utils/reportError'
 
 import GridRep from '~components/GridRep'
 import GridRepCollection from '~components/GridRepCollection'
@@ -350,6 +351,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   // Set headers for server-side requests
   setUserToken(req, res)
 
+  try {
     // Fetch and organize raids
     let { raids, sortedRaids } = await api.endpoints.raids
       .getAll()
@@ -395,6 +397,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
         // Will be passed to the page component as props
       },
     }
+  } catch (error) {
+    printError(error, 'axios')
+  }
 }
 
 export default ProfileRoute

pages/new/index.tsx

@@ -5,11 +5,12 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 import Party from '~components/Party'
 
-import { appState } from '~utils/appState'
+import api from '~utils/api'
-import { groupWeaponKeys } from '~utils/groupWeaponKeys'
 import organizeRaids from '~utils/organizeRaids'
 import setUserToken from '~utils/setUserToken'
-import api from '~utils/api'
+import { appState } from '~utils/appState'
+import { groupWeaponKeys } from '~utils/groupWeaponKeys'
+import { printError } from '~utils/reportError'
 
 import type { NextApiRequest, NextApiResponse } from 'next'
 import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys'
@@ -82,13 +83,12 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   // Set headers for server-side requests
   setUserToken(req, res)
 
+  try {
     let { raids, sortedRaids } = await api.endpoints.raids
       .getAll()
       .then((response) => organizeRaids(response.data))
 
-  let jobs = await api.endpoints.jobs
+    let jobs = await api.endpoints.jobs.getAll().then((response) => {
-    .getAll()
-    .then((response) => {
       return response.data
     })
 
@@ -109,6 +109,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
         // Will be passed to the page component as props
       },
     }
+  } catch (error) {
+    printError(error, 'axios')
+  }
 }
 
 export default NewRoute

pages/p/[party].tsx

@@ -6,17 +6,17 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 
 import Party from '~components/Party'
 
-import { appState } from '~utils/appState'
+import api from '~utils/api'
-import { groupWeaponKeys } from '~utils/groupWeaponKeys'
 import generateTitle from '~utils/generateTitle'
 import organizeRaids from '~utils/organizeRaids'
 import setUserToken from '~utils/setUserToken'
-import api from '~utils/api'
+import { appState } from '~utils/appState'
+import { groupWeaponKeys } from '~utils/groupWeaponKeys'
 import { GridType } from '~utils/enums'
+import { printError } from '~utils/reportError'
 
 import type { NextApiRequest, NextApiResponse } from 'next'
 import type { GroupedWeaponKeys } from '~utils/groupWeaponKeys'
-import { useQueryState } from 'next-usequerystate'
 
 interface Props {
   party: Party
@@ -154,19 +154,16 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   // Set headers for server-side requests
   setUserToken(req, res)
 
+  try {
     let { raids, sortedRaids } = await api.endpoints.raids
       .getAll()
       .then((response) => organizeRaids(response.data))
 
-  let jobs = await api.endpoints.jobs
+    let jobs = await api.endpoints.jobs.getAll().then((response) => {
-    .getAll()
-    .then((response) => {
       return response.data
     })
 
-  let jobSkills = await api
+    let jobSkills = await api.allJobSkills().then((response) => response.data)
-    .allJobSkills()
-    .then((response) => response.data)
 
     let weaponKeys = await api.endpoints.weapon_keys
       .getAll()
@@ -175,7 +172,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
     let party: Party | null = null
     if (query.party) {
       let response = await api.endpoints.parties.getOne({
-      id: query.party
+        id: query.party,
       })
       party = response.data.party
     } else {
@@ -223,6 +220,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
         // Will be passed to the page component as props
       },
     }
+  } catch (error) {
+    printError(error, 'axios')
+  }
 }
 
 export default PartyRoute

pages/saved.tsx

@@ -16,6 +16,7 @@ import organizeRaids from '~utils/organizeRaids'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
+import { printError } from '~utils/reportError'
 
 import GridRep from '~components/GridRep'
 import GridRepCollection from '~components/GridRepCollection'
@@ -352,6 +353,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   // Set headers for server-side requests
   setUserToken(req, res)
 
+  try {
     // Fetch and organize raids
     let { raids, sortedRaids } = await api.endpoints.raids
       .getAll()
@@ -386,6 +388,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
         // Will be passed to the page component as props
       },
     }
+  } catch (error) {
+    printError(error, 'axios')
+  }
 }
 
 export default SavedRoute

pages/teams.tsx

@@ -16,6 +16,7 @@ import organizeRaids from '~utils/organizeRaids'
 import useDidMountEffect from '~utils/useDidMountEffect'
 import { elements, allElement } from '~data/elements'
 import { emptyPaginationObject } from '~utils/emptyStates'
+import { printError } from '~utils/reportError'
 
 import GridRep from '~components/GridRep'
 import GridRepCollection from '~components/GridRepCollection'
@@ -364,6 +365,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   setUserToken(req, res)
 
   // Fetch and organize raids
+  try {
     let { raids, sortedRaids } = await api.endpoints.raids
       .getAll()
       .then((response) => organizeRaids(response.data))
@@ -397,6 +399,9 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
         // Will be passed to the page component as props
       },
     }
+  } catch (error) {
+    printError(error, 'axios')
+  }
 }
 
 export default TeamsRoute

utils/reportError.tsx

@@ -0,0 +1,20 @@
+import { AxiosError } from 'axios'
+
+function handleError(error: any) {
+  if (error instanceof Error) return error.message
+}
+
+function handleAxiosError(error: any) {
+  const axiosError = error as AxiosError
+  return axiosError.response
+}
+
+export function printError(error: any, type?: string) {
+  if (type === 'axios') {
+    const response = handleAxiosError(error)
+    console.log(`${response?.status} ${response?.statusText}`)
+    console.log(response?.data.toJSON())
+  } else {
+    console.log(handleError(error))
+  }
+}