Refine error logging

Previous attempt resulted in truncated error object which is not readable

src/api/general.ts

@@ -39,10 +39,7 @@ const apiGeneral = async <T = unknown>({
     url,
     params,
     headers: {
-      'Content-Type':
+      'Content-Type': body && body instanceof FormData ? 'multipart/form-data' : 'application/json',
-        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,8 +8,31 @@ const userAgent = {
 }
 
 const ctx = new chalk.Instance({ level: 3 })
-const handleError = (error: any) => {
+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(
@@ -17,6 +41,8 @@ const handleError = (error: any) => {
         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'
@@ -26,9 +52,13 @@ const handleError = (error: any) => {
       // `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()
     }
   }

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 => {
+    .catch(
-      Sentry.setContext('API request', { url, params, body })
+      handleError({
-      Sentry.setContext('Error response', {
+        message: 'API error',
-        ...(error?.response && { response: error.response?._response })
+        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', {
+        handleError({ message: 'Push connect error', captureResponse: true })
-          ...(error?.response && { response: error.response?._response })
+
-        })
-        Sentry.setContext('Error object', { error })
-        Sentry.captureMessage('Push connect error')
         Notifications.setBadgeCountAsync(0)
         if (error?.status == 404) {
           displayMessage({