Skip to content

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

Merged
geido merged 22 commits intoapache:masterfrom
msyavuz:msyavuz/update-network-errors
Jan 28, 2025
Merged

chore(Network Errors): Update network errors on filter bars and charts#31811
geido merged 22 commits intoapache:masterfrom
msyavuz:msyavuz/update-network-errors

Conversation

@msyavuz
Copy link
Member

@msyavuz msyavuz commented Jan 13, 2025

SUMMARY

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

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:
image

After:
image
Compact Modal:
image
Tooltip:
image

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
Copy link

korbit-ai bot commented Jan 13, 2025

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

@msyavuz msyavuz marked this pull request as ready for review January 13, 2025 17:40
Copy link

@korbit-ai korbit-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.
Category Issue Fix Detected
Error Handling 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

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;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unsafe error object destructuring category Error Handling

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
Copy link
Member

mistercrunch commented Jan 15, 2025

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.

@geido geido added the preset:bounty Issues that have been selected by Preset and have a bounty attached. label Jan 15, 2025
@msyavuz
Copy link
Member Author

msyavuz commented Jan 15, 2025

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

@github-actions github-actions bot removed the github_actions Pull requests that update GitHub Actions code label Jan 24, 2025
@msyavuz
Copy link
Member Author

msyavuz commented Jan 24, 2025

Sorry for the pings people, was trying to solve merge conflicts.

@msyavuz msyavuz marked this pull request as ready for review January 24, 2025 18:24
Copy link

@korbit-ai korbit-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.
Category Issue Fix Detected
Functionality 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-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

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

Comment on lines 24 to 38
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}
/>
);
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused subtitle prop category Functionality

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.

@mistercrunch
Copy link
Member

Merged my Alert-related PRs, and wondering if it make sense to use the compact mode that's now exposed

@mistercrunch
Copy link
Member

Curious to see how it looks when integrating the compact mode once you can share screenshots, hopefully looks good out-of-the-box. I don't think it's used elsewhere in the codebase, so we could alter the compact mode to make sure it looks right in this context (and hopefully other places eventually where we need compact alerts).

@msyavuz
Copy link
Member Author

msyavuz commented Jan 28, 2025

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.

@geido geido merged commit 23d9f46 into apache:master Jan 28, 2025
48 checks passed
@mistercrunch
Copy link
Member

mistercrunch commented Jan 28, 2025

wait don't before/after look the same in the screenshots?

nevermind was looking at the wrong place...

@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 5.0.0 First shipped in 5.0.0 labels Jul 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels preset:bounty Issues that have been selected by Preset and have a bounty attached. size/M 🚢 5.0.0 First shipped in 5.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update Network Error Messages on Filter Bars and Charts

4 participants