Handle unanswered API requests

frontend/src/components/TableView/errorUtils.ts

@@ -28,6 +28,22 @@ const extractMessageFromData = (data: unknown): string | null => {
   return null
 }
 
+const resolveFetchBaseQueryErrorMessage = (error: FetchBaseQueryError): string | null => {
+  if (typeof error.status === 'number') {
+    return null
+  }
+
+  if (error.status === 'TIMEOUT_ERROR') {
+    return 'The request took too long to answer. Please try again later.'
+  }
+
+  if (error.status === 'FETCH_ERROR') {
+    return 'We could not reach the server. Please check your connection and try again.'
+  }
+
+  return null
+}
+
 export const resolveErrorStatus = (error: FetchBaseQueryError | SerializedError | undefined): number | null => {
   if (!error || !isFetchBaseQueryError(error)) {
     return null
@@ -46,6 +62,11 @@ export const resolveErrorMessage = (
   }
 
   if (error && isFetchBaseQueryError(error)) {
+    const queryErrorMessage = resolveFetchBaseQueryErrorMessage(error)
+    if (queryErrorMessage) {
+      return queryErrorMessage
+    }
+
     const message = extractMessageFromData(error.data)
     if (message) {
       return message

frontend/src/redux/api.ts

@@ -16,8 +16,11 @@ type RefreshTokenResult = {
   meta?: FetchBaseQueryMeta
 }
 
+const REQUEST_TIMEOUT_MS = 60_000
+
 const baseQuery = fetchBaseQuery({
   baseUrl: BACKEND_URL,
+  timeout: REQUEST_TIMEOUT_MS,
   prepareHeaders: (headers, { getState }) => {
     const token = (getState() as RootState).user.token
     if (token) {

frontend/src/tests/components/errorUtils.test.ts

@@ -22,6 +22,22 @@ describe('table view error utilities', () => {
     expect(resolveErrorMessage(status, error, true)).toBe('You do not have permission to view this data.')
   })
 
+  it('returns timeout copy for unanswered requests', () => {
+    const error: FetchBaseQueryError = { status: 'TIMEOUT_ERROR', error: 'AbortError' }
+    const status = resolveErrorStatus(error)
+    expect(resolveErrorMessage(status, error, true)).toBe(
+      'The request took too long to answer. Please try again later.'
+    )
+  })
+
+  it('returns network copy for fetch failures', () => {
+    const error: FetchBaseQueryError = { status: 'FETCH_ERROR', error: 'TypeError: Failed to fetch' }
+    const status = resolveErrorStatus(error)
+    expect(resolveErrorMessage(status, error, true)).toBe(
+      'We could not reach the server. Please check your connection and try again.'
+    )
+  })
+
   it('returns null when not in error state', () => {
     const error = { status: 403, data: {} }
     const status = resolveErrorStatus(error)