Vansh5632 opened a new pull request, #37131:
URL: https://github.com/apache/superset/pull/37131
fix(charts): show user-friendly error for HTTP 413 payload too large
### SUMMARY
This PR fixes a poor user experience when exporting large chart datasets
that exceed nginx/reverse proxy payload size limits (HTTP 413 errors).
Previously, these errors would open in a new browser tab showing raw JSON or
HTML error pages. Now, users see friendly toast notifications explaining the
issue.
**Key Changes:**
- Added `SupersetClient.postBlob()` method to enable AJAX-based chart
exports with error handling
- Replaced form submission (`postForm`) with AJAX requests (`postBlob`) for
all chart exports
- Implemented HTTP 413-specific error detection and user-friendly toast
notifications
- Added comprehensive error handling in both Explore and Dashboard views
- Exported `downloadBlob` utility function for reuse across components
**Technical Implementation:**
- Modified `exportChart` in `exploreUtils/index.js` to use try-catch with
`SupersetClient.postBlob()`
- Updated `useExploreAdditionalActionsMenu` to handle errors from CSV, JSON,
and Excel exports
- Updated Dashboard's `Chart.jsx` to handle errors from table exports
- All changes maintain backward compatibility with existing export
functionality
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
**BEFORE:**
When downloading large chart data that exceeds nginx payload limits, a new
browser tab opens showing:
```
413 Request Entity Too Large
nginx/1.18.0 (Ubuntu)
```
Or raw JSON error response - confusing and unhelpful to users.
**AFTER:**
User stays on the same page and sees a clear toast notification:
```
⚠️ The chart data is too large. Please reduce your filters or dataset size
and try again.
```
### TESTING INSTRUCTIONS
**Automated Tests:**
```bash
cd superset-frontend
npm run test -- exploreUtils.test.jsx
```
Expected: All 27 tests pass (including 8 new HTTP 413 error handling tests)
**Manual Testing (requires nginx with small payload limit):**
1. **Setup test environment** (optional - only for reproducing HTTP 413
errors):
```bash
# Start test nginx with 1KB payload limit
./test-413.sh
```
2. **Test Explore View Exports:**
- Navigate to Explore view with a chart containing significant data
- Click "Download" → "Export to CSV"
- If data exceeds nginx limit, verify toast notification appears instead
of error page
- Repeat for "Export to JSON" and "Export to Excel"
3. **Test Dashboard Exports:**
- Open a dashboard with table charts
- Click the "..." menu on a table → "Download as CSV"
- Verify same friendly error handling behavior
4. **Test Normal Success Case:**
- Use smaller datasets that don't exceed limits
- Verify downloads still work correctly
- Verify filename generation works as expected
**Expected Behavior:**
- ✅ Small exports: Downloads work normally with correct filenames
- ✅ Large exports (HTTP 413): Toast notification appears, user stays on page
- ✅ Other errors (HTTP 500): Generic error toast appears
- ✅ No console errors or warnings
### ADDITIONAL INFORMATION
- [x] Has associated issue: Fixes poor UX for large dataset exports hitting
proxy limits
- [ ] Required feature flags: None
- [x] Changes UI: Adds toast notifications for export errors
- [ ] Includes DB Migration: No
- [ ] Introduces new feature or API: Yes - adds `SupersetClient.postBlob()`
method (internal API)
- [ ] Removes existing feature or API: No
**Additional Notes:**
- All 8 modified files include comprehensive unit tests
- Pre-commit checks passing (prettier, oxlint, eslint, TypeScript)
- Changes are backward compatible - only affects error handling path
- No database migrations required
- No feature flags needed
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
