fix: handle 5xx server errors gracefully in PromiseRejectionEffect

When a GraphQL request receives a 5xx server error (e.g. 502 Bad Gateway), the ApolloError has no graphQLErrors but only a networkError with a statusCode. Previously, these transient infrastructure errors fell through to the generic error handler, which showed a vague "An error occurred" message and reported the error to Sentry unnecessarily. Now, ApolloErrors with 5xx networkError status codes are: - Shown to the user with a specific "server temporarily unavailable" message - Deduplicated via a snack bar dedupeKey to avoid flooding the UI - Not reported to Sentry, since they are transient infrastructure issues Fixes https://sentry.io/issues/6763156229/ Co-Authored-By: Claude Opus 4.6 <[email protected]>
2026-02-20 03:09:00 +00:00
1 changed files with 17 additions and 0 deletions
@@ -23,6 +23,23 @@ export const PromiseRejectionEffect = () => {
        return; // already handled by apolloLink
      }

+      // Handle ApolloErrors with server network errors (5xx) as transient
+      // infrastructure issues — show a user-friendly message without
+      // reporting to Sentry since these are not application bugs.
+      if (
+        error.name === 'ApolloError' &&
+        isDefined(error.networkError?.statusCode) &&
+        error.networkError.statusCode >= 500
+      ) {
+        enqueueErrorSnackBar({
+          message: 'Network error: the server is temporarily unavailable.',
+          options: {
+            dedupeKey: 'server-network-error',
+          },
+        });
+        return;
+      }
+
      const isAbortError =
        error.networkError?.name === 'AbortError' ||
        error.name === 'AbortError';