chore(Network Errors): Update network errors on filter bars and charts#31811
chore(Network Errors): Update network errors on filter bars and charts#31811geido merged 22 commits intoapache:masterfrom
Conversation
|
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
|
There was a problem hiding this comment.
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-reviewon 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-reviewcommand in a comment at the root of your PR.- You can ask Korbit to generate a new PR description using the
/korbit-generate-pr-descriptioncommand in any comment on your PR.- Too many Korbit comments? I can resolve all my comment threads if you use the
/korbit-resolvecommand 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
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
| source = 'dashboard', | ||
| subtitle, | ||
| }: ErrorMessageComponentProps) { | ||
| const { level, message } = error; |
There was a problem hiding this comment.
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.
|
Hey I don't want to derail here but somehow as part of my extremely large "theming PR" I somehow took on completely refactoring 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. |
|
@mistercrunch We can hold off on this pr until #31858 is merged. I can rebase this onto your changes after. |
|
Sorry for the pings people, was trying to solve merge conflicts. |
There was a problem hiding this comment.
Review by Korbit AI
Korbit automatically attempts to detect when you fix issues in new commits.
| Category | Issue | Fix Detected |
|---|---|---|
| Unused subtitle prop ▹ view |
Files scanned
| File Path | Reviewed |
|---|---|
| superset-frontend/src/components/ErrorMessage/types.ts | ✅ |
| superset-frontend/src/components/ErrorMessage/FrontendNetworkErrorMessage.tsx | ✅ |
| superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx | ✅ |
| superset-frontend/src/components/ErrorMessage/ErrorMessage.stories.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-reviewon 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-reviewcommand in a comment at the root of your PR.- You can ask Korbit to generate a new PR description using the
/korbit-generate-pr-descriptioncommand in any comment on your PR.- Too many Korbit comments? I can resolve all my comment threads if you use the
/korbit-resolvecommand 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
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
| function FrontendNetworkErrorMessage({ | ||
| error, | ||
| subtitle, | ||
| compact, | ||
| }: ErrorMessageComponentProps) { | ||
| const { level, message } = error; | ||
| return ( | ||
| <ErrorAlert errorType={t('Network Error')} message={message} type={level} /> | ||
| <ErrorAlert | ||
| compact={compact} | ||
| errorType={t('Network Error')} | ||
| message={message} | ||
| type={level} | ||
| /> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Unused subtitle prop 
Tell me more
What is the issue?
The 'subtitle' prop is declared but never used in the component, which contradicts the expected functionality of displaying a subtitle when provided.
Why this matters
If a consumer passes a subtitle prop, they would expect it to be displayed, leading to confusing behavior when the subtitle doesn't appear in the UI.
Suggested change ∙ Feature Preview
Either remove the unused subtitle prop or implement it in the ErrorAlert component:
function FrontendNetworkErrorMessage({
error,
subtitle,
compact,
}: ErrorMessageComponentProps) {
const { level, message } = error;
return (
<ErrorAlert
compact={compact}
errorType={t('Network Error')}
message={message}
subtitle={subtitle}
type={level}
/>
);
}💡 Does this comment miss the mark? Tell us why and Korbit will adapt to your team’s feedback.
💬 Chat with Korbit by mentioning @korbit-ai.
|
Merged my Alert-related PRs, and wondering if it make sense to use the |
|
Curious to see how it looks when integrating the |
|
Just added more screenshots that show the compact mode on filter bar errors. Chart network errors didn't seem like a good fit for the compact mode. |
superset-frontend/src/components/ErrorMessage/FrontendNetworkErrorMessage.test.tsx
Outdated
Show resolved
Hide resolved
…rrorMessage.test.tsx
|
nevermind was looking at the wrong place... |
SUMMARY
Update network errors on filter bars and charts specified in #31342
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Before:

After:



Compact Modal:
Tooltip:
TESTING INSTRUCTIONS
Run the testing suite and check for visual changes.
ADDITIONAL INFORMATION