Add global sentry error logging for tan-query (#11998)

Author: DejayJD

packages/common/src/api/index.ts

@@ -127,4 +127,4 @@ export * from './tan-query/wallets/useUSDCBalance'
 
 // Saga fetch utils, remove when migration is complete
 export * from './tan-query/saga-utils'
-export * from './tan-query/utils/defaultRetryConfig'
+export * from './tan-query/utils/defaultConfig'

packages/common/src/api/tan-query/utils/defaultConfig.ts

@@ -0,0 +1,49 @@
+import { Query, QueryKey } from '@tanstack/react-query'
+
+import {
+  ErrorLevel,
+  Feature,
+  ReportToSentryArgs
+} from '~/models/ErrorReporting'
+
+export const MAX_RETRIES = 3
+export const HTTP_STATUSES_TO_NOT_RETRY = [400, 401, 403, 404]
+
+export const defaultRetryConfig = (failureCount: number, error: any) => {
+  if (failureCount > MAX_RETRIES) {
+    return false
+  }
+
+  if (
+    Object.hasOwnProperty.call(error, 'status') &&
+    HTTP_STATUSES_TO_NOT_RETRY.includes(error.status)
+  ) {
+    return false
+  }
+
+  return true
+}
+
+type ReportToSentry = (args: ReportToSentryArgs) => Promise<void>
+
+export const queryErrorHandler = (
+  err: unknown,
+  query: Query<unknown, unknown, unknown, QueryKey>,
+  reportToSentry: ReportToSentry
+) => {
+  const error = err instanceof Error ? err : new Error(String(err))
+  reportToSentry({
+    error,
+    level: ErrorLevel.Error,
+    feature: Feature.TanQuery,
+    name: `Query Error: ${query.queryKey[0] as string}`,
+    additionalInfo: {
+      queryHookMetadata: {
+        queryKey: query.queryKey,
+        isActive: query.isActive,
+        isStale: query.isStale,
+        isDisabled: query.isDisabled
+      }
+    }
+  })
+}

packages/common/src/api/tan-query/utils/defaultRetryConfig.ts

@@ -1,9 +1,17 @@
-import { defaultRetryConfig } from '@audius/common/api'
-import { QueryClient } from '@tanstack/react-query'
+import { defaultRetryConfig, queryErrorHandler } from '@audius/common/api'
+import { QueryCache, QueryClient } from '@tanstack/react-query'
 
 import { env } from 'app/services/env'
+import { reportToSentry } from 'app/utils/reportToSentry'
 
 export const queryClient = new QueryClient({
+  // In order to have a default error catcher, we need to use a custom query cache
+  // ref: https://tkdodo.eu/blog/react-query-error-handling
+  queryCache: new QueryCache({
+    onError(error, query) {
+      queryErrorHandler(error, query, reportToSentry)
+    }
+  }),
   defaultOptions: {
     queries: {
       // By default, tan-query will retry on 404s. We intentionally disable retrying on 400 type errors.

packages/mobile/src/services/query-client.ts

@@ -1,8 +1,17 @@
-import { defaultRetryConfig } from '@audius/common/api'
-import { QueryClient } from '@tanstack/react-query'
+import { defaultRetryConfig, queryErrorHandler } from '@audius/common/api'
+import { QueryCache, QueryClient } from '@tanstack/react-query'
+
+import { reportToSentry } from 'store/errors/reportToSentry'
 
 import { env } from './env'
 export const queryClient = new QueryClient({
+  // In order to have a default error catcher, we need to use a custom query cache
+  // ref: https://tkdodo.eu/blog/react-query-error-handling
+  queryCache: new QueryCache({
+    onError(error, query) {
+      queryErrorHandler(error, query, reportToSentry)
+    }
+  }),
   defaultOptions: {
     queries: {
       // By default, tan-query will retry on 404s. We intentionally disable retrying on 400 type errors.