Refine error logging

Previous attempt resulted in truncated error object which is not readable

src/api/general.ts

@@ -22,13 +22,13 @@ const apiGeneral = async <T = unknown>({
 }: Params): Promise<{ body: T }> => {
   console.log(
     ctx.bgGreen.bold(' API general ') +
-    ' ' +
-    domain +
-    ' ' +
-    method +
-    ctx.green(' -> ') +
-    `/${url}` +
-    (params ? ctx.green(' -> ') : ''),
+      ' ' +
+      domain +
+      ' ' +
+      method +
+      ctx.green(' -> ') +
+      `/${url}` +
+      (params ? ctx.green(' -> ') : ''),
     params ? params : ''
   )
 
@@ -39,10 +39,7 @@ const apiGeneral = async <T = unknown>({
     url,
     params,
     headers: {
-      'Content-Type':
-        body && body instanceof FormData
-          ? 'multipart/form-data'
-          : 'application/json',
+      'Content-Type': body && body instanceof FormData ? 'multipart/form-data' : 'application/json',
       Accept: '*/*',
       ...userAgent,
       ...headers
@@ -54,7 +51,7 @@ const apiGeneral = async <T = unknown>({
         body: response.data
       })
     })
-    .catch(handleError)
+    .catch(handleError())
 }
 
 export default apiGeneral

src/api/helpers/index.ts

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/react-native'
 import chalk from 'chalk'
 import Constants from 'expo-constants'
 import { Platform } from 'react-native'
@@ -7,30 +8,59 @@ const userAgent = {
 }
 
 const ctx = new chalk.Instance({ level: 3 })
-const handleError = (error: any) => {
-  if (error?.response) {
-    // The request was made and the server responded with a status code
-    // that falls out of the range of 2xx
-    console.error(
-      ctx.bold(' API '),
-      ctx.bold('response'),
-      error.response.status,
-      error?.response.data?.error || error?.response.message || 'Unknown error'
-    )
-    return Promise.reject({
-      status: error?.response.status,
-      message: error?.response.data?.error || error?.response.message || 'Unknown error'
-    })
-  } else if (error?.request) {
-    // The request was made but no response was received
-    // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-    // http.ClientRequest in node.js
-    console.error(ctx.bold(' API '), ctx.bold('request'), error)
-    return Promise.reject()
-  } else {
-    console.error(ctx.bold(' API '), ctx.bold('internal'), error?.message)
-    return Promise.reject()
+const handleError =
+  (
+    config: {
+      message: string
+      captureRequest?: { url: string; params: any; body: any }
+      captureResponse?: boolean
+    } | void
+  ) =>
+  (error: any) => {
+    const shouldReportToSentry = config && (config.captureRequest || config.captureResponse)
+    shouldReportToSentry && Sentry.setContext('Error object', error)
+
+    if (config?.captureRequest) {
+      Sentry.setContext('Error request', config.captureRequest)
+    }
+
+    if (error?.response) {
+      if (config?.captureResponse) {
+        Sentry.setContext('Error response', {
+          data: error.response.data,
+          status: error.response.status,
+          headers: error.response.headers
+        })
+      }
+
+      // The request was made and the server responded with a status code
+      // that falls out of the range of 2xx
+      console.error(
+        ctx.bold(' API '),
+        ctx.bold('response'),
+        error.response.status,
+        error?.response.data?.error || error?.response.message || 'Unknown error'
+      )
+
+      shouldReportToSentry && Sentry.captureMessage(config.message)
+      return Promise.reject({
+        status: error?.response.status,
+        message: error?.response.data?.error || error?.response.message || 'Unknown error'
+      })
+    } else if (error?.request) {
+      // The request was made but no response was received
+      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+      // http.ClientRequest in node.js
+      console.error(ctx.bold(' API '), ctx.bold('request'), error)
+
+      shouldReportToSentry && Sentry.captureMessage(config.message)
+      return Promise.reject()
+    } else {
+      console.error(ctx.bold(' API '), ctx.bold('internal'), error?.message)
+
+      shouldReportToSentry && Sentry.captureMessage(config.message)
+      return Promise.reject()
+    }
   }
-}
 
 export { ctx, handleError, userAgent }

src/api/instance.ts

@@ -86,7 +86,7 @@ const apiInstance = async <T = unknown>({
         links: { prev, next }
       })
     })
-    .catch(handleError)
+    .catch(handleError())
 }
 
 export default apiInstance

src/api/tooot.ts

@@ -55,16 +55,13 @@ const apiTooot = async <T = unknown>({
         body: response.data
       })
     })
-    .catch(error => {
-      Sentry.setContext('API request', { url, params, body })
-      Sentry.setContext('Error response', {
-        ...(error?.response && { response: error.response?._response })
+    .catch(
+      handleError({
+        message: 'API error',
+        captureRequest: { url, params, body },
+        captureResponse: true
       })
-      Sentry.setContext('Error object', { error })
-      Sentry.captureMessage('API error')
-
-      return handleError(error)
-    })
+    )
 }
 
 export default apiTooot

src/screens/Compose.tsx

@@ -1,3 +1,4 @@
+import { handleError } from '@api/helpers'
 import { ComponentEmojis } from '@components/Emojis'
 import { EmojisState } from '@components/Emojis/helpers/EmojisContext'
 import { HeaderLeft, HeaderRight } from '@components/Header'
@@ -6,7 +7,6 @@ import haptics from '@root/components/haptics'
 import { useAppDispatch } from '@root/store'
 import ComposeRoot from '@screens/Compose/Root'
 import formatText from '@screens/Compose/utils/formatText'
-import * as Sentry from '@sentry/react-native'
 import { RootStackScreenProps } from '@utils/navigation/navigators'
 import { useTimelineMutation } from '@utils/queryHooks/timeline'
 import { updateStoreReview } from '@utils/slices/contextsSlice'
@@ -319,9 +319,8 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
                   ]
                 )
               } else {
-                Sentry.setContext('Error object', { error })
-                Sentry.captureMessage('Posting error')
                 haptics('Error')
+                handleError({ message: 'Posting error', captureResponse: true })
                 composeDispatch({ type: 'posting', payload: false })
                 Alert.alert(t('heading.right.alert.default.title'), undefined, [
                   {

src/utils/push/useConnect.ts

@@ -1,4 +1,5 @@
 import apiGeneral from '@api/general'
+import { handleError } from '@api/helpers'
 import apiTooot from '@api/tooot'
 import { displayMessage } from '@components/Message'
 import navigationRef from '@helpers/navigationRef'
@@ -33,11 +34,8 @@ const pushUseConnect = () => {
     })
       .then(() => Notifications.setBadgeCountAsync(0))
       .catch(error => {
-        Sentry.setContext('Error response', {
-          ...(error?.response && { response: error.response?._response })
-        })
-        Sentry.setContext('Error object', { error })
-        Sentry.captureMessage('Push connect error')
+        handleError({ message: 'Push connect error', captureResponse: true })
+
         Notifications.setBadgeCountAsync(0)
         if (error?.status == 404) {
           displayMessage({