Merge pull request #1493 from oasisprotocol/lw/throw-5xx

Automatically throw on 5xx error responses

.changelog/1493.bugfix.md

@@ -0,0 +1 @@
+Automatically throw on 5xx error responses

src/app/components/OfflineBanner/hook.ts

@@ -15,7 +15,7 @@ import { UseQueryResult } from '@tanstack/react-query'
 export const useIsApiReachable = (
   network: Network,
 ): { reachable: true } | { reachable: false; reason: 'userOffline' | 'apiOffline' } => {
-  const query = useGetStatus(network)
+  const query = useGetStatus(network, { query: { useErrorBoundary: false } })
   if (query.isPaused) return { reachable: false, reason: 'userOffline' }
   if (query.isFetched && !query.isSuccess) return { reachable: false, reason: 'apiOffline' }
   return { reachable: true }
@@ -80,7 +80,7 @@ export const useConsensusFreshness = (
   queryParams: { polling?: boolean } = {},
 ): FreshnessInfo => {
   const query = useGetStatus(network, {
-    query: { refetchInterval: queryParams.polling ? 8000 : undefined },
+    query: { refetchInterval: queryParams.polling ? 8000 : undefined, useErrorBoundary: false },
   })
 
   return useFreshness(network, query)
@@ -95,7 +95,7 @@ export const useRuntimeFreshness = (
   }
 
   const query = useGetRuntimeStatus(scope.network, scope.layer, {
-    query: { refetchInterval: queryParams.polling ? 8000 : undefined },
+    query: { refetchInterval: queryParams.polling ? 8000 : undefined, useErrorBoundary: false },
   })
 
   return useFreshness(scope.network, query)

src/app/data/oasis-account-names.ts

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import {
   Layer,
   useGetConsensusAccountsAddresses,
@@ -65,19 +65,19 @@ const getOasisAccountsMetadata = async (network: Network, layer: Layer): Promise
 export const useOasisAccountsMetadata = (
   network: Network,
   layer: Layer,
-  queryOptions: { enabled: boolean },
+  queryOptions: UseQueryOptions<AccountData, unknown, AccountData, string[]>,
 ) => {
   return useQuery(['oasisAccounts', network, layer], () => getOasisAccountsMetadata(network, layer), {
-    enabled: queryOptions.enabled,
     staleTime: Infinity,
+    ...queryOptions,
   })
 }
 
 export const useOasisAccountMetadata = (
   network: Network,
   layer: Layer,
   address: string,
-  queryOptions: { enabled: boolean },
+  queryOptions: UseQueryOptions<AccountData, unknown, AccountData, string[]>,
 ): AccountMetadataInfo => {
   const { isLoading, isError, error, data: allData } = useOasisAccountsMetadata(network, layer, queryOptions)
   if (isError) {
@@ -94,14 +94,14 @@ export const useSearchForOasisAccountsByName = (
   network: Network,
   layer: Layer,
   nameFragment: string,
-  queryOptions: { enabled: boolean },
+  queryOptions: { enabled: boolean } & UseQueryOptions<AccountData, unknown, AccountData, string[]>,
 ): AccountNameSearchResults => {
   const {
     isLoading: isMetadataLoading,
     isError: isMetadataError,
     error: metadataError,
     data: namedAccounts,
-  } = useOasisAccountsMetadata(network, layer, queryOptions)
+  } = useOasisAccountsMetadata(network, layer, { useErrorBoundary: false, ...queryOptions })
   if (isMetadataError) {
     console.log('Failed to load Oasis account metadata', metadataError)
   }

src/app/data/pontusx-account-names.ts

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import {
   AccountMetadata,
   AccountMap,
@@ -14,7 +14,12 @@ import { getOasisAddress } from '../utils/helpers'
 
 const DATA_SOURCE_URL = 'https://raw.githubusercontent.com/deltaDAO/mvg-portal/main/pontusxAddresses.json'
 
-const getPontusXAccountsMetadata = async () => {
+type PontusXAccountsMetadata = {
+  map: AccountMap
+  list: AccountMetadata[]
+}
+
+const getPontusXAccountsMetadata = async (): Promise<PontusXAccountsMetadata> => {
   const response = await axios.get(DATA_SOURCE_URL)
   if (response.status !== 200) throw new Error("Couldn't load names")
   if (!response.data) throw new Error("Couldn't load names")
@@ -34,16 +39,18 @@ const getPontusXAccountsMetadata = async () => {
   }
 }
 
-export const usePontusXAccountsMetadata = (queryOptions: { enabled: boolean }) => {
+export const usePontusXAccountsMetadata = (
+  queryOptions: UseQueryOptions<PontusXAccountsMetadata, unknown, PontusXAccountsMetadata, string[]>,
+) => {
   return useQuery(['pontusXNames'], getPontusXAccountsMetadata, {
-    enabled: queryOptions.enabled,
     staleTime: Infinity,
+    ...queryOptions,
   })
 }
 
 export const usePontusXAccountMetadata = (
   address: string,
-  queryOptions: { enabled: boolean },
+  queryOptions: UseQueryOptions<PontusXAccountsMetadata, unknown, PontusXAccountsMetadata, string[]>,
 ): AccountMetadataInfo => {
   const { isLoading, isError, error, data: allData } = usePontusXAccountsMetadata(queryOptions)
   if (isError) {
@@ -59,14 +66,19 @@ export const usePontusXAccountMetadata = (
 export const useSearchForPontusXAccountsByName = (
   network: Network,
   nameFragment: string,
-  queryOptions: { enabled: boolean },
+  queryOptions: { enabled: boolean } & UseQueryOptions<
+    PontusXAccountsMetadata,
+    unknown,
+    PontusXAccountsMetadata,
+    string[]
+  >,
 ): AccountNameSearchRuntimeResults => {
   const {
     isLoading: isMetadataLoading,
     isError: isMetadataError,
     error: metadataError,
     data: namedAccounts,
-  } = usePontusXAccountsMetadata(queryOptions)
+  } = usePontusXAccountsMetadata({ useErrorBoundary: false, ...queryOptions })
   if (isMetadataError) {
     console.log('Failed to load Pontus-X account names', metadataError)
   }

src/coin-gecko/api.ts

@@ -43,6 +43,7 @@ export function useGetTokenPricesFromGecko(tokenIds: string[], fiatCurrency: str
         }),
     {
       staleTime,
+      useErrorBoundary: false,
     },
   )
 }

src/index.tsx

@@ -14,6 +14,11 @@ const queryClient = new QueryClient({
     queries: {
       refetchOnWindowFocus: false,
       retry: false,
+      useErrorBoundary: (error: any) => {
+        // Automatically throw on 5xx errors. Components that want to handle
+        // errors should set `useErrorBoundary: false` in their queries.
+        return error.response?.status >= 500
+      },
     },
   },
 })