Implement graceful error handling for trend charts #43090

JesseSDevaney · 2024-05-23T19:08:05Z

Closes: Trend charts should break down gracefully on missing data #42948

Before

2024-05-23.14-56-03.mp4

After

2024-05-23.14-51-01.mp4

Desired Behavior/Acceptance Criteria

Trend charts no longer error when the latest value is null. computeTrend now finds the latest non-null data point and compares it with a the first non-null previous data point
Trend chart no longer throws an error that it does not handle. If computeTrend throws an error, displays a warning icon and error message detailing the error.
- You can continue using the query builder (w/o needing to refresh): switching to new chart types, viewing the data as a table, etc.
Tests have been added to cover the above cases (compute.unit.spec.js, smartscalar.unit.spec.js, smartscalar-trend.cy.spec.js)

github-actions · 2024-05-23T19:09:22Z

Codenotify: Notifying subscribers in CODENOTIFY files for diff 5e29f43...facb385.

Notify	File(s)
@alxnddr	frontend/src/metabase/visualizations/components/Visualization/Visualization.jsx frontend/src/metabase/visualizations/visualizations/SmartScalar/SmartScalar.jsx frontend/src/metabase/visualizations/visualizations/SmartScalar/SmartScalar.unit.spec.js frontend/src/metabase/visualizations/visualizations/SmartScalar/compute.js frontend/src/metabase/visualizations/visualizations/SmartScalar/compute.unit.spec.js

replay-io · 2024-05-23T19:20:04Z

Status	Complete ↗︎
Commit	`facb385`
Results	✅ 2579 Passed

frontend/src/metabase/static-viz/components/SmartScalar/SmartScalar.tsx

alxnddr

There was also a bit related to the inability to switch to other viz types if such error has happened. I think we should also address that even though it is not related to Trend viz. It is likely related to the logic in the Visualization.tsx component which has error local state

…efully

…alization.tsx

JesseSDevaney · 2024-05-24T18:32:39Z

frontend/src/metabase/visualizations/visualizations/SmartScalar/SmartScalar.jsx

This is an old, dead conditional. There can no longer be a null or undefined trend returned. Either computeTrend returns the actual trend, or throws an error.

JesseSDevaney · 2024-05-24T18:33:27Z

frontend/src/metabase/visualizations/visualizations/SmartScalar/compute.js

+  const latestRowIndex = _.findLastIndex(rows, row => {
+    const date = row[dimensionColIndex];
+    const value = row[metricColIndex];
+
+    return !isEmpty(value) && !isEmpty(date);
+  });
+  if (latestRowIndex === -1) {
+    throw Error("No rows contain a valid value.");
+  }


This is the fix for the latest data point being null. If it is, we skip it and find the most recent non-null data point.

JesseSDevaney · 2024-05-24T18:33:41Z

frontend/src/metabase/visualizations/visualizations/SmartScalar/compute.js

  const date = rows[latestRowIndex][dimensionColIndex];
  const value = rows[latestRowIndex][metricColIndex];
-  if (isEmpty(value) || isEmpty(date)) {


This conditional is no longer needed because of the fix above

JesseSDevaney · 2024-05-24T18:34:45Z

frontend/src/metabase/visualizations/visualizations/SmartScalar/compute.js

+  const previousRowIndex = _.findLastIndex(rows, (row, i) => {
+    if (i >= nextValueRowIndex) {
+      return false;
+    }
+
+    const date = row[dimensionColIndex];
+    const value = row[metricColIndex];
+
+    return !isEmpty(value) && !isEmpty(date);
+  });
+
  // if no row exists with non-null date and non-null value
-  if (isEmpty(previousRow)) {
+  if (previousRowIndex === -1) {
    return null;
  }

-  const prevDate = previousRow[dimensionColIndex];
-  const prevValue = previousRow[metricColIndex];
+  const prevDate = rows[previousRowIndex][dimensionColIndex];
+  const prevValue = rows[previousRowIndex][metricColIndex];


Refactored this to have the same structure as getCurrentMetricData does.

JesseSDevaney · 2024-05-24T18:36:45Z

frontend/src/metabase/visualizations/components/Visualization/Visualization.jsx

@@ -467,7 +471,7 @@ class Visualization extends PureComponent {
      (replacementContent && (dashcard.size_y !== 1 || isMobile) && !isAction);

    return (
-      <ErrorBoundary>
+      <ErrorBoundary onError={this.onRenderError}>


The reason users could not switch between visualizations or to the table view was because this ErrorBoundary was catching the errors, but no function was provided to pass off that error information to the Visualization component. Because it was not passed off, ErrorBoundary held onto its local state of hasError and therefore would not render its children.

JesseSDevaney · 2024-05-24T18:38:03Z

frontend/src/metabase/visualizations/components/Visualization/Visualization.jsx

+    if (error?.message) {
+      return this.setState({ error: error.message });
+    }
+


The ErrorView component within Visualization.jsx expects the error to be a string. So we need to check if the error is a regular error object and only pass the string message.

JesseSDevaney · 2024-05-24T19:14:04Z

New After (trend chart)

2024-05-24.15-03-02.mp4

What an actual trend chart error would look like in app (dev mode react does not show errors if they hit ErrorBoundary):
What the new static-viz error will look like with the added error message:

How Visualization now handles errors that hit ErrorBoundary

2024-05-24.15-08-14.mp4

JesseSDevaney · 2024-05-24T20:11:48Z

frontend/src/metabase/visualizations/components/Visualization/Visualization.jsx

A generic error component was added to this on top of the regular error component, because they are serving different needs.

The regular error component contains errors that we are expecting to be thrown in certain conditions, and because of that, we have a particular error message we are wanting to display.

The generic error component is for errors that we are not expecting to be thrown and therefore have no specific message to display. We should still allow the user the option to get diagnostic info in order to help them out in the event that unintended errors are thrown.

…efully

github-actions · 2024-05-28T15:41:45Z

@JesseSDevaney Did you forget to add a milestone to the issue for this PR? When and where should I add a milestone?

* fix trend charts erroring on latest value being null * refactor previousRowIndex calculation * handle errors gracefully * refactor error messages * update computeTrend unit tests * add error handling integration test * add E2E test to check that errors are gracefully handled * add integration test to enforce the fix * fix static viz * display more meaningful error on static-viz trend charts * move error handling out of trend chart and fix error handling in Visualization.tsx * update compute.unit.spec.js * update SmartScalar.unit.spec.js * use separate error handler for ErrorBoundary errors in Visualization.jsx * update E2E test * update error handling * update compute.unit.spec.js * fix react state change error in render function * show generic error message for ErrorBoundary caught errors * revert ErrorBoundary changes * remove generic error border for visualizations

JesseSDevaney · 2024-05-28T15:44:09Z

@metabase-bot backport release-x.49.x

github-actions · 2024-05-28T15:45:10Z

@JesseSDevaney something went wrong while creating a backport [Logs]

* fix trend charts erroring on latest value being null * refactor previousRowIndex calculation * handle errors gracefully * refactor error messages * update computeTrend unit tests * add error handling integration test * add E2E test to check that errors are gracefully handled * add integration test to enforce the fix * fix static viz * display more meaningful error on static-viz trend charts * move error handling out of trend chart and fix error handling in Visualization.tsx * update compute.unit.spec.js * update SmartScalar.unit.spec.js * use separate error handler for ErrorBoundary errors in Visualization.jsx * update E2E test * update error handling * update compute.unit.spec.js * fix react state change error in render function * show generic error message for ErrorBoundary caught errors * revert ErrorBoundary changes * remove generic error border for visualizations Co-authored-by: Jesse Devaney <22608765+JesseSDevaney@users.noreply.github.com>

* fix trend charts erroring on latest value being null * refactor previousRowIndex calculation * handle errors gracefully * refactor error messages * update computeTrend unit tests * add error handling integration test * add E2E test to check that errors are gracefully handled * add integration test to enforce the fix * fix static viz * display more meaningful error on static-viz trend charts * move error handling out of trend chart and fix error handling in Visualization.tsx * update compute.unit.spec.js * update SmartScalar.unit.spec.js * use separate error handler for ErrorBoundary errors in Visualization.jsx * update E2E test * update error handling * update compute.unit.spec.js * fix react state change error in render function * show generic error message for ErrorBoundary caught errors * revert ErrorBoundary changes * remove generic error border for visualizations

* fix trend charts erroring on latest value being null * refactor previousRowIndex calculation * handle errors gracefully * refactor error messages * update computeTrend unit tests * add error handling integration test * add E2E test to check that errors are gracefully handled * add integration test to enforce the fix * fix static viz * display more meaningful error on static-viz trend charts * move error handling out of trend chart and fix error handling in Visualization.tsx * update compute.unit.spec.js * update SmartScalar.unit.spec.js * use separate error handler for ErrorBoundary errors in Visualization.jsx * update E2E test * update error handling * update compute.unit.spec.js * fix react state change error in render function * show generic error message for ErrorBoundary caught errors * revert ErrorBoundary changes * remove generic error border for visualizations Co-authored-by: Jesse Devaney <22608765+JesseSDevaney@users.noreply.github.com>

* fix trend charts erroring on latest value being null * refactor previousRowIndex calculation * handle errors gracefully * refactor error messages * update computeTrend unit tests * add error handling integration test * add E2E test to check that errors are gracefully handled * add integration test to enforce the fix * fix static viz * display more meaningful error on static-viz trend charts * move error handling out of trend chart and fix error handling in Visualization.tsx * update compute.unit.spec.js * update SmartScalar.unit.spec.js * use separate error handler for ErrorBoundary errors in Visualization.jsx * update E2E test * update error handling * update compute.unit.spec.js * fix react state change error in render function * show generic error message for ErrorBoundary caught errors * revert ErrorBoundary changes * remove generic error border for visualizations

JesseSDevaney added 9 commits May 23, 2024 13:24

fix trend charts erroring on latest value being null

45e36f4

refactor previousRowIndex calculation

5b59bc4

handle errors gracefully

de603df

refactor error messages

ae48b4c

update computeTrend unit tests

fe91730

add error handling integration test

f34538f

add E2E test to check that errors are gracefully handled

05e55cf

add integration test to enforce the fix

9415e03

fix static viz

46e0af1

JesseSDevaney added backport Automatically create PR on current release branch on merge .Team/DashViz Dashboard and Viz team labels May 23, 2024

JesseSDevaney requested review from zbodi74, kulyk and a team May 23, 2024 19:08

JesseSDevaney self-assigned this May 23, 2024

alxnddr reviewed May 23, 2024

View reviewed changes

frontend/src/metabase/static-viz/components/SmartScalar/SmartScalar.tsx Show resolved Hide resolved

alxnddr reviewed May 23, 2024

View reviewed changes

JesseSDevaney added 3 commits May 24, 2024 12:46

display more meaningful error on static-viz trend charts

34ae6d8

Merge branch 'master' into fix-42948/trend-charts-should-degrade-grac…

131d932

…efully

move error handling out of trend chart and fix error handling in Visu…

dd6f25c

…alization.tsx

JesseSDevaney commented May 24, 2024

View reviewed changes

JesseSDevaney added 2 commits May 24, 2024 14:44

update compute.unit.spec.js

0b8c400

update SmartScalar.unit.spec.js

efd6ca7

JesseSDevaney added 2 commits May 24, 2024 14:57

use separate error handler for ErrorBoundary errors in Visualization.jsx

62d71c8

update E2E test

742dc04

JesseSDevaney requested review from alxnddr and removed request for kulyk May 24, 2024 19:01

JesseSDevaney added 5 commits May 24, 2024 15:29

update error handling

317ed47

update compute.unit.spec.js

9bc983e

fix react state change error in render function

fc69237

show generic error message for ErrorBoundary caught errors

e1893b3

revert ErrorBoundary changes

c0172fa

JesseSDevaney commented May 24, 2024

View reviewed changes

JesseSDevaney added 2 commits May 24, 2024 16:19

remove generic error border for visualizations

a6168b0

Merge branch 'master' into fix-42948/trend-charts-should-degrade-grac…

facb385

…efully

alxnddr approved these changes May 26, 2024

View reviewed changes

JesseSDevaney merged commit 8770ea2 into master May 28, 2024
109 checks passed

JesseSDevaney deleted the fix-42948/trend-charts-should-degrade-gracefully branch May 28, 2024 15:41

metabase-bot bot mentioned this pull request May 28, 2024

🤖 backported "Implement graceful error handling for trend charts" #43240

Merged

JesseSDevaney mentioned this pull request May 28, 2024

🍒 Manual Backport #43090 #43245

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement graceful error handling for trend charts #43090

Implement graceful error handling for trend charts #43090

JesseSDevaney commented May 23, 2024

github-actions bot commented May 23, 2024 •

edited

Loading

replay-io bot commented May 23, 2024 •

edited

Loading

alxnddr left a comment

JesseSDevaney May 24, 2024

JesseSDevaney May 24, 2024

JesseSDevaney May 24, 2024

JesseSDevaney May 24, 2024

JesseSDevaney May 24, 2024

JesseSDevaney May 24, 2024

JesseSDevaney commented May 24, 2024

JesseSDevaney May 24, 2024 •

edited

Loading

github-actions bot commented May 28, 2024

JesseSDevaney commented May 28, 2024

github-actions bot commented May 28, 2024

Implement graceful error handling for trend charts #43090

Implement graceful error handling for trend charts #43090

Conversation

JesseSDevaney commented May 23, 2024

github-actions bot commented May 23, 2024 • edited Loading

replay-io bot commented May 23, 2024 • edited Loading

alxnddr left a comment

Choose a reason for hiding this comment

JesseSDevaney May 24, 2024

Choose a reason for hiding this comment

JesseSDevaney May 24, 2024

Choose a reason for hiding this comment

JesseSDevaney May 24, 2024

Choose a reason for hiding this comment

JesseSDevaney May 24, 2024

Choose a reason for hiding this comment

JesseSDevaney May 24, 2024

Choose a reason for hiding this comment

JesseSDevaney May 24, 2024

Choose a reason for hiding this comment

JesseSDevaney commented May 24, 2024

JesseSDevaney May 24, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented May 28, 2024

JesseSDevaney commented May 28, 2024

github-actions bot commented May 28, 2024

github-actions bot commented May 23, 2024 •

edited

Loading

replay-io bot commented May 23, 2024 •

edited

Loading

JesseSDevaney May 24, 2024 •

edited

Loading