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: '',