From cdd4fa58d0eea1aa27a00c4d2f2e94aa9e229fd9 Mon Sep 17 00:00:00 2001
From: Jesse Yang <jesse.yang@airbnb.com>
Date: Wed, 23 Feb 2022 11:02:00 -0800
Subject: [PATCH] fix(dashboard): incorrect chart error with slow dataset api
 request (#18852)

* fix(dashboard): incorrect chart error with slow datasource api request

* update comments

* Add key to styled loading component
---
 superset-frontend/src/chart/Chart.jsx       | 2 ++
 superset-frontend/src/chart/chartReducer.ts | 7 ++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/chart/Chart.jsx b/superset-frontend/src/chart/Chart.jsx
index 14657cc2ddeb7..6e1003f79a1cf 100644
--- a/superset-frontend/src/chart/Chart.jsx
+++ b/superset-frontend/src/chart/Chart.jsx
@@ -208,6 +208,7 @@ class Chart extends React.PureComponent {
     ) {
       return (
         <Styles
+          key={chartId}
           data-ui-anchor="chart"
           className="chart-container"
           data-test="chart-container"
@@ -220,6 +221,7 @@ class Chart extends React.PureComponent {
 
     return (
       <ChartErrorMessage
+        key={chartId}
         chartId={chartId}
         error={error}
         subtitle={message}
diff --git a/superset-frontend/src/chart/chartReducer.ts b/superset-frontend/src/chart/chartReducer.ts
index b0de1a6680535..d6d612fbfaf25 100644
--- a/superset-frontend/src/chart/chartReducer.ts
+++ b/superset-frontend/src/chart/chartReducer.ts
@@ -201,9 +201,10 @@ export default function chartReducer(
     return Object.fromEntries(
       Object.entries(charts).map(([chartId, chart]) => [
         chartId,
-        // if render has failed, clear error message,
-        // which will trigger a re-render
-        chart.chartStatus === 'failed'
+        // some charts may not have properly handled missing datasource,
+        // causing a JS error, so we reset error message and try to re-render
+        // the chart once the datasource is fully loaded
+        chart.chartStatus === 'failed' && chart.chartStackTrace
           ? {
               ...chart,
               chartStatus: '',