chore(Network Errors): Update network errors on filter bars and charts

[msyavuz]

SUMMARY

Update network errors on filter bars and charts specified in #31342

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Filter Bar Before:

Filter Bar After:

Network Error Before:

Network Error After:

TESTING INSTRUCTIONS

1. Go to a dashboard and wait for it to load.
2. Throttle to offline from browser devtools.
3. Force refresh a chart.

Run the testing suite and check for visual changes.

ADDITIONAL INFORMATION

• Has associated issue: Fixes Update Network Error Messages on Filter Bars and Charts #31342
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[korbit-ai]

Based on your review schedule, I'll hold off on reviewing this PR until it's marked as ready for review. If you'd like me to take a look now, comment /korbit-review.

Your admin can change your review schedule in the Korbit Console

[korbit-ai]

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Fix Detected
	Unsafe error object destructuring ▹ view

Files scanned

​

File Path	Reviewed
superset-frontend/src/components/ErrorMessage/NetworkErrorMessage.tsx	✅
superset-frontend/src/components/ErrorMessage/ErrorMessage.stories.tsx	✅
superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx	✅
superset-frontend/src/setup/setupErrorMessages.ts	✅
superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx	✅
superset-frontend/packages/superset-ui-core/src/query/getClientErrorObject.ts	✅
superset-frontend/src/components/Chart/Chart.tsx	✅
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Need a new review? Comment /korbit-review on this PR and I'll review your latest changes.

Korbit Guide: Usage and Customization

Interacting with Korbit

• You can manually ask Korbit to review your PR using the /korbit-review command in a comment at the root of your PR.
• You can ask Korbit to generate a new PR description using the /korbit-generate-pr-description command in any comment on your PR.
• Too many Korbit comments? I can resolve all my comment threads if you use the /korbit-resolve command in any comment on your PR.
• Chat with Korbit on issues we post by tagging @korbit-ai in your reply.
• Help train Korbit to improve your reviews by giving a 👍 or 👎 on the comments Korbit posts.

Customizing Korbit

• Check out our docs on how you can make Korbit work best for you and your team.
• Customize Korbit for your organization through the Korbit Console.

Current Korbit Configuration

General Settings

​

Setting	Value
Review Schedule	Automatic excluding drafts
Max Issue Count	10
Automatic PR Descriptions	❌

Issue Categories

​

Category	Enabled
Naming	✅
Database Operations	✅
Documentation	✅
Logging	✅
Error Handling	✅
Systems and Environment	✅
Objects and Data Structures	✅
Readability and Maintainability	✅
Asynchronous Processing	✅
Design Patterns	✅
Third-Party Libraries	✅
Performance	✅
Security	✅
Functionality	✅

Feedback and Support

• Tell us what you think of Korbit
• Schedule a call with our team
• Email us @ [email protected]

Note

Korbit Pro is free for open source projects 🎉

Looking to add Korbit to your team? Get started with a free 2 week trial here

[korbit-ai]

Unsafe error object destructuring

Tell me more

What is the issue?

Direct destructuring of error object properties without checking if they exist could lead to runtime errors.

Why this matters

If the error object is malformed or missing expected properties, the application could crash when trying to access undefined properties.

Suggested change ∙ Feature Preview

Add property existence checks or provide default values during destructuring:
const { level = 'error', message = 'Unknown network error' } = error || {};

Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.

[mistercrunch]

Hey I don't want to derail here but somehow as part of my extremely large "theming PR" I somehow took on completely refactoring Alert and ErrorAlert into something much simpler, vanilla antd, that includes a compact prop for this type of stuff.

https://github.com/apache/superset/pull/31590/files#diff-0e958cf2ea1bc7da177b24b9cfe5aef75308a080f22e2a0cada374ade11ba2cfR121-R140

I'm working at breaking down the PR into smaller chunks, but wondering whether it may make sense to align here. Somehow there are a lot of different ErrorAlert derivatives or components that should in theory BE and ErrorAlert but don't compose things as expected.

Wondering if it'd be reasonable to bring in the Alert/ErrorAlert parts of my PR in here, though it may be a bit of a surgery.

Clearly on a merge conflict collision course here.

[msyavuz]

@mistercrunch We can hold off on this pr until #31858 is merged. I can rebase this onto your changes after.