Handle 413 with user friendly message (#17870)

Add friendly message for 413 errors. Currently, 413 errors originate
from the nginx server.

Author: etiennejouan

packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts

@@ -89,6 +89,14 @@ export const useApolloFactory = (options: Partial<Options<any>> = {}) => {
           },
         });
       },
+      onPayloadTooLarge: (message) => {
+        enqueueErrorSnackBar({
+          message,
+          options: {
+            dedupeKey: 'payload-too-large',
+          },
+        });
+      },
       extraLinks: [],
       isDebugMode: process.env.IS_DEBUG_MODE === 'true',
       // Override options

packages/twenty-front/src/modules/apollo/services/__tests__/apollo.factory.test.ts

@@ -27,6 +27,7 @@ jest.mock('@/auth/services/AuthService', () => {
 
 const mockOnError = jest.fn();
 const mockOnNetworkError = jest.fn();
+const mockOnPayloadTooLarge = jest.fn();
 
 const mockWorkspaceMember = {
   id: 'workspace-member-id',
@@ -81,6 +82,7 @@ const createMockOptions = (): Options<any> => ({
   isDebugMode: true,
   onError: mockOnError,
   onNetworkError: mockOnNetworkError,
+  onPayloadTooLarge: mockOnPayloadTooLarge,
   appVersion: '1.0.0',
 });
 
@@ -226,4 +228,21 @@ describe('ApolloFactory', () => {
     apolloFactory.updateWorkspaceMember(newWorkspaceMember);
     expect(apolloFactory['currentWorkspaceMember']).toEqual(newWorkspaceMember);
   });
+
+  it('should call onPayloadTooLarge when encountering a 413 error', async () => {
+    fetchMock.mockResponse(() =>
+      Promise.reject({
+        statusCode: 413,
+        message: 'Payload Too Large',
+      }),
+    );
+
+    try {
+      await makeRequest();
+    } catch {
+      expect(mockOnPayloadTooLarge).toHaveBeenCalledWith(
+        expect.stringContaining('Uploaded content is too large'),
+      );
+    }
+  }, 10000);
 });

packages/twenty-front/src/modules/apollo/services/apollo.factory.ts

@@ -53,6 +53,7 @@ export interface Options<TCacheShape> extends ApolloClientOptions<TCacheShape> {
   onTokenPairChange?: (tokenPair: AuthTokenPair) => void;
   onUnauthenticatedError?: () => void;
   onAppVersionMismatch?: (message: string) => void;
+  onPayloadTooLarge?: (message: string) => void;
   currentWorkspaceMember: CurrentWorkspaceMember | null;
   currentWorkspace: CurrentWorkspace | null;
   extraLinks?: ApolloLink[];
@@ -74,6 +75,7 @@ export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
       onTokenPairChange,
       onUnauthenticatedError,
       onAppVersionMismatch,
+      onPayloadTooLarge,
       currentWorkspaceMember,
       currentWorkspace,
       extraLinks,
@@ -142,6 +144,9 @@ export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
             if (this.isAuthenticationError(error)) {
               return false;
             }
+            if (this.isPayloadTooLargeError(error)) {
+              return false;
+            }
             return Boolean(error);
           },
         },
@@ -296,6 +301,11 @@ export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
               return handleTokenRenewal(operation, forward);
             }
 
+            if (this.isPayloadTooLargeError(networkError as ServerError)) {
+              onPayloadTooLarge?.(t`Uploaded content is too large.`);
+              return;
+            }
+
             if (isDebugMode === true) {
               logDebug(`[Network error]: ${networkError}`);
             }
@@ -344,6 +354,10 @@ export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
     return error.statusCode === 401;
   }
 
+  private isPayloadTooLargeError(error: ServerError): boolean {
+    return error.statusCode === 413;
+  }
+
   updateWorkspaceMember(workspaceMember: CurrentWorkspaceMember | null) {
     this.currentWorkspaceMember = workspaceMember;
   }