fix(charts): show user-friendly error for HTTP 413 payload too large

superset-frontend/packages/superset-ui-core/src/connection/SupersetClient.ts

@@ -52,6 +52,7 @@ const SupersetClient: SupersetClientInterface = {
   request: request => getInstance().request(request),
   getCSRFToken: () => getInstance().getCSRFToken(),
   getUrl: (...args) => getInstance().getUrl(...args),
+  postBlob: (endpoint, payload) => getInstance().postBlob(endpoint, payload),
 };
 
 export default SupersetClient;

superset-frontend/packages/superset-ui-core/src/connection/SupersetClientClass.ts

@@ -150,6 +150,25 @@ export default class SupersetClientClass {
     }
   }
 
+  /**
+   * POST request that returns a blob for file downloads.
+   * Unlike postForm, this uses AJAX so errors can be caught and handled.
+   * @param endpoint - API endpoint
+   * @param payload - Request payload
+   * @returns Promise resolving to Response with blob
+   */
+  async postBlob(
+    endpoint: string,
+    payload: Record<string, any>,
+  ): Promise<Response> {
+    await this.ensureAuth();
+    return this.post({
+      endpoint,
+      postPayload: payload,
+      parseMethod: 'raw',
+    });
+  }
+
   async reAuthenticate() {
     return this.init(true);
   }

superset-frontend/packages/superset-ui-core/src/connection/types.ts

@@ -152,6 +152,7 @@ export interface SupersetClientInterface extends Pick<
   | 'get'
   | 'post'
   | 'postForm'
+  | 'postBlob'
   | 'put'
   | 'request'
   | 'init'

superset-frontend/packages/superset-ui-core/test/connection/SupersetClient.test.ts

@@ -36,12 +36,13 @@ describe('SupersetClient', () => {
     getUrl: (...args: unknown[]) => string;
   };
 
-  test('exposes configure, init, get, post, postForm, delete, put, request, reset, getGuestToken, getCSRFToken, getUrl, isAuthenticated, and reAuthenticate methods', () => {
+  test('exposes configure, init, get, post, postForm, postBlob, delete, put, request, reset, getGuestToken, getCSRFToken, getUrl, isAuthenticated, and reAuthenticate methods', () => {
     expect(typeof SupersetClient.configure).toBe('function');
     expect(typeof SupersetClient.init).toBe('function');
     expect(typeof SupersetClient.get).toBe('function');
     expect(typeof SupersetClient.post).toBe('function');
     expect(typeof SupersetClient.postForm).toBe('function');
+    expect(typeof SupersetClient.postBlob).toBe('function');
     expect(typeof SupersetClient.delete).toBe('function');
     expect(typeof SupersetClient.put).toBe('function');
     expect(typeof SupersetClient.request).toBe('function');
@@ -53,11 +54,12 @@ describe('SupersetClient', () => {
     expect(typeof SupersetClient.reAuthenticate).toBe('function');
   });
 
-  test('throws if you call init, get, post, postForm, delete, put, request, getGuestToken, getCSRFToken, getUrl, isAuthenticated, or reAuthenticate before configure', () => {
+  test('throws if you call init, get, post, postForm, postBlob, delete, put, request, getGuestToken, getCSRFToken, getUrl, isAuthenticated, or reAuthenticate before configure', () => {
     expect(SupersetClient.init).toThrow();
     expect(SupersetClient.get).toThrow();
     expect(SupersetClient.post).toThrow();
     expect(SupersetClient.postForm).toThrow();
+    expect(SupersetClient.postBlob).toThrow();
     expect(SupersetClient.delete).toThrow();
     expect(SupersetClient.put).toThrow();
     expect(SupersetClient.request).toThrow();

superset-frontend/packages/superset-ui-core/test/connection/SupersetClientClass.test.ts

@@ -780,4 +780,74 @@ describe('SupersetClientClass', () => {
       expect(authSpy).toHaveBeenCalledTimes(0);
     });
   });
+
+  describe('.postBlob()', () => {
+    const protocol = 'https:';
+    const host = 'host';
+    const mockPostBlobEndpoint = '/api/v1/chart/data';
+    const mockPostBlobUrl = `${protocol}//${host}${mockPostBlobEndpoint}`;
+    const postBlobPayload = { form_data: '{"viz_type":"table"}' };
+
+    let authSpy: jest.SpyInstance;
+    let client: SupersetClientClass;
+
+    beforeEach(async () => {
+      fetchMock.removeRoute(LOGIN_GLOB);
+      fetchMock.get(LOGIN_GLOB, { result: 1234 }, { name: LOGIN_GLOB });
+
+      client = new SupersetClientClass({ protocol, host });
+      await client.init();
+      authSpy = jest.spyOn(SupersetClientClass.prototype, 'ensureAuth');
+    });
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    test('calls ensureAuth and delegates to post with raw parseMethod', async () => {
+      const mockResponse = new Response('csv data', { status: 200 });
+      const postSpy = jest.spyOn(client, 'post').mockResolvedValue(mockResponse);
+
+      const response = await client.postBlob(
+        mockPostBlobEndpoint,
+        postBlobPayload,
+      );
+
+      expect(authSpy).toHaveBeenCalledTimes(1);
+      expect(postSpy).toHaveBeenCalledWith({
+        endpoint: mockPostBlobEndpoint,
+        postPayload: postBlobPayload,
+        parseMethod: 'raw',
+      });
+      expect(response).toBe(mockResponse);
+    });
+
+    test('passes payload in request body', async () => {
+      fetchMock.post(mockPostBlobUrl, {
+        status: 200,
+        body: 'csv data',
+      });
+
+      await client.postBlob(mockPostBlobEndpoint, postBlobPayload);
+
+      const fetchRequest = fetchMock.callHistory.calls(mockPostBlobUrl)[0]
+        .options as CallApi;
+      const formData = fetchRequest.body as FormData;
+
+      expect(formData.get('form_data')).toBe(
+        JSON.stringify(postBlobPayload.form_data),
+      );
+    });
+
+    test('rejects when response is not ok', async () => {
+      fetchMock.post(mockPostBlobUrl, {
+        status: 413,
+        body: 'Payload Too Large',
+      });
+
+      await expect(
+        client.postBlob(mockPostBlobEndpoint, postBlobPayload),
+      ).rejects.toMatchObject({ status: 413 });
+    });
+  });
 });

superset-frontend/src/dashboard/components/gridComponents/Chart/Chart.tsx

@@ -480,7 +480,7 @@ const Chart = (props: ChartProps) => {
   (formData as JsonObject).dashboardId = dashboardInfo.id;
 
   const exportTable = useCallback(
-    (format: string, isFullCSV: boolean, isPivot = false) => {
+    async (format: string, isFullCSV: boolean, isPivot = false) => {
       const logAction =
         format === 'csv'
           ? LOG_ACTIONS_EXPORT_CSV_DASHBOARD_CHART
@@ -555,24 +555,48 @@ const Chart = (props: ChartProps) => {
           }
         : baseOwnState;
 
-      exportChart({
-        formData:
-          exportFormData as unknown as import('@superset-ui/core').QueryFormData,
-        resultType,
-        resultFormat: format,
-        force: true,
-        ownState: exportOwnState,
-        onStartStreamingExport: shouldUseStreaming
-          ? (exportParams: JsonObject) => {
-              setIsStreamingModalVisible(true);
-              startExport({
-                ...(exportParams as Record<string, unknown>),
-                filename,
-                expectedRows: actualRowCount,
-              } as Parameters<typeof startExport>[0]);
-            }
-          : null,
-      });
+      try {
+        await exportChart({
+          formData:
+            exportFormData as unknown as import('@superset-ui/core').QueryFormData,
+          resultType,
+          resultFormat: format,
+          force: true,
+          ownState: exportOwnState,
+          onStartStreamingExport: shouldUseStreaming
+            ? (exportParams: JsonObject) => {
+                setIsStreamingModalVisible(true);
+                startExport({
+                  ...(exportParams as Record<string, unknown>),
+                  filename,
+                  expectedRows: actualRowCount,
+                } as Parameters<typeof startExport>[0]);
+              }
+            : null,
+        });
+      } catch (error) {
+        const exportError = error as Error & {
+          status?: number;
+          statusText?: string;
+          response?: { status?: number };
+        };
+        const status = exportError.status || exportError.response?.status;
+        if (status === 413) {
+          boundActionCreators.addDangerToast(
+            t(
+              'The chart data is too large to download. Please try reducing the date range, limiting rows, or using fewer columns.',
+            ),
+          );
+        } else {
+          const errorMessage =
+            exportError.message ||
+            exportError.statusText ||
+            t(
+              'Failed to export chart data. Please try again or contact your administrator.',
+            );
+          boundActionCreators.addDangerToast(errorMessage);
+        }
+      }
     },
     [
       sliceSliceId,
@@ -584,6 +608,7 @@ const Chart = (props: ChartProps) => {
       chartState,
       props.id,
       boundActionCreators.logEvent,
+      boundActionCreators.addDangerToast,
       queriesResponse,
       startExport,
       resetExport,