Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Automatically throw on 5xx error responses #1493

Merged
merged 3 commits into from
Aug 9, 2024
Merged

Automatically throw on 5xx error responses #1493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9fe4a38
Automatically throw on 5xx error responses
lukaw3d Aug 8, 2024
bc66fc4
Don't automatically throw on API status, gecko, and account names
lukaw3d Aug 8, 2024
92c9bce
Refactor queryOptions type in wrappers
lukaw3d Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .changelog/1493.bugfix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Automatically throw on 5xx error responses
6 changes: 3 additions & 3 deletions src/app/components/OfflineBanner/hook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down Expand Up @@ -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)
Expand All @@ -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)
Expand Down
12 changes: 6 additions & 6 deletions src/app/data/oasis-account-names.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import axios from 'axios'
import { useQuery } from '@tanstack/react-query'
import { useQuery, UseQueryOptions } from '@tanstack/react-query'
import {
Layer,
useGetConsensusAccountsAddresses,
Expand Down Expand Up @@ -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) {
Expand All @@ -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)
}
Expand Down
26 changes: 19 additions & 7 deletions src/app/data/pontusx-account-names.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import axios from 'axios'
import { useQuery } from '@tanstack/react-query'
import { useQuery, UseQueryOptions } from '@tanstack/react-query'
import {
AccountMetadata,
AccountMap,
Expand All @@ -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")
Expand All @@ -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) {
Expand All @@ -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)
}
Expand Down
1 change: 1 addition & 0 deletions src/coin-gecko/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export function useGetTokenPricesFromGecko(tokenIds: string[], fiatCurrency: str
}),
{
staleTime,
useErrorBoundary: false,
},
)
}
Expand Down
5 changes: 5 additions & 0 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we sure that every query is covered? In a sense, I see status queries are disabled, which we don't want to crash the app. But could for example one query on account page "crash" the page to show the error boundary?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah some 5xx failures could hit page-level error boundary

},
},
},
})
Expand Down
Loading