fix: app behavior for network request failures

.secrets.baseline

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.0",
+  "version": "1.5.0",
   "plugins_used": [
     {
       "name": "ArtifactoryDetector"
@@ -1119,5 +1119,5 @@
       }
     ]
   },
-  "generated_at": "2024-04-23T18:49:08Z"
+  "generated_at": "2024-05-09T15:53:44Z"
 }

src/app/Components/ArtistAutosuggest/ArtistAutosuggestResults.tsx

@@ -10,7 +10,7 @@ import {
 import { captureMessage } from "@sentry/react-native"
 import { ArtistAutosuggestResultsQuery } from "__generated__/ArtistAutosuggestResultsQuery.graphql"
 import { ArtistAutosuggestResults_results$data } from "__generated__/ArtistAutosuggestResults_results.graphql"
-import { ErrorView } from "app/Components/ErrorView/ErrorView"
+import { ErrorView } from "app/Components/ErrorViews/ErrorView/ErrorView"
 import { getRelayEnvironment } from "app/system/relay/defaultEnvironment"
 import {
   ProvidePlaceholderContext,

src/app/Components/RetryErrorBoundary.tsx

@@ -12,21 +12,21 @@ interface RetryErrorBoundaryProps {
   children: React.ReactNode
 }
 interface RetryErrorBoundaryState {
-  error: Error | null
+  error?: Error
 }
 
 export class RetryErrorBoundary extends Component<
   RetryErrorBoundaryProps,
   RetryErrorBoundaryState
 > {
-  static getDerivedStateFromError(error: Error | null): RetryErrorBoundaryState {
+  static getDerivedStateFromError(error?: Error): RetryErrorBoundaryState {
     return { error }
   }
 
-  state = { error: null }
+  state: RetryErrorBoundaryState = { error: undefined }
 
   _retry = () => {
-    this.setState({ error: null })
+    this.setState({ error: undefined })
   }
 
   render() {

src/app/Scenes/SellWithArtsy/SubmitArtwork/SubmitArtwork.tsx

@@ -12,7 +12,7 @@ import { useActionSheet } from "@expo/react-native-action-sheet"
 import { NavigationContainer } from "@react-navigation/native"
 import { StackScreenProps, createStackNavigator } from "@react-navigation/stack"
 import { captureMessage } from "@sentry/react-native"
-import { ErrorView } from "app/Components/ErrorView/ErrorView"
+import { ErrorView } from "app/Components/ErrorViews/ErrorView/ErrorView"
 import { FancyModal } from "app/Components/FancyModal/FancyModal"
 import { FancyModalHeader } from "app/Components/FancyModal/FancyModalHeader"
 import { fetchUserContactInformation } from "app/Scenes/SellWithArtsy/SubmitArtwork/ArtworkDetails/utils/fetchUserContactInformation"

src/app/system/relay/middlewares/checkAuthenticationMiddleware.ts

@@ -2,15 +2,38 @@ import { GlobalStore, unsafe__getEnvironment } from "app/store/GlobalStore"
 import { Alert } from "react-native"
 import { Middleware } from "react-relay-network-modern"
 
+let alertTimeout: number
+
+const showAlert = (title: string, message: string) => {
+  if (alertTimeout) clearTimeout(alertTimeout)
+
+  alertTimeout = setTimeout(() => {
+    Alert.alert(title, message)
+  }, 200)
+}
+
 // This middleware is responsible of signing the user out if their session expired
 export const checkAuthenticationMiddleware = (): Middleware => {
   // We want to avoid running the forced logout more than once.
   const expiredTokens: Set<string> = new Set()
   return (next) => async (req) => {
-    const res = await next(req)
+    let res
+    try {
+      res = await next(req)
+    } catch (e) {
+      showAlert("Network Error", "Failed to complete the network request.")
+      return next(req)
+    }
+
     const authenticationToken = req.fetchOpts.headers["X-ACCESS-TOKEN"]
     // authenticationToken can be `undefined` if the user was logged out *just* before this request was executed
-    if (res.errors?.length && authenticationToken && !expiredTokens.has(authenticationToken)) {
+    if (
+      !!res &&
+      res.errors &&
+      res.errors?.length &&
+      authenticationToken &&
+      !expiredTokens.has(authenticationToken)
+    ) {
       const { gravityURL } = unsafe__getEnvironment()
       try {
         const result = await fetch(`${gravityURL}/api/v1/me`, {
@@ -29,16 +52,11 @@ export const checkAuthenticationMiddleware = (): Middleware => {
           await GlobalStore.actions.auth.signOut()
           // There is a race condition that prevents the onboarding slideshow from starting if we call an Alert
           // here synchronously, so we need to wait a few ticks.
-          setTimeout(() => {
-            Alert.alert("Session expired", "Please log in to continue.")
-          }, 200)
+          showAlert("Session Expired", "Please log in to continue.")
         }
       } catch (e) {
-        if (__DEV__) {
-          console.error(e)
-        }
         // network problem
-        Alert.alert("Network unavailable", "Please check your connection.")
+        showAlert("Network unavailable", "Please check your connection.")
       }
     }
 

src/app/utils/renderWithPlaceholder.tsx

@@ -70,11 +70,10 @@ export function renderWithPlaceholder<Props>({
         //
         // This will re-use the native view first created in the renderFailure callback, which means it can
         // continue its ‘retry’ animation.
-        return <LoadFailureView />
+        return <LoadFailureView error={error} />
       } else {
         retrying = true
-        // @ts-expect-error STRICTNESS_MIGRATION --- 🚨 Unsafe legacy code 🚨 Please delete this and fix any type errors if you have time 🙏
-        return <LoadFailureView onRetry={retry} />
+        return <LoadFailureView error={error} onRetry={retry ?? undefined} />
       }
     } else if (props) {
       if (render) {