Browse Source

fix(alerts): Handle error in alert chart when request fails (#44175)

AsyncComponent can set the data to null if the request fails, fix the
type and handle errors.

fixes JAVASCRIPT-2CW6
Scott Cooper 2 years ago
parent
commit
71b96dc266
1 changed files with 8 additions and 9 deletions
  1. 8 9
      static/app/views/alerts/rules/issue/details/alertChart.tsx

+ 8 - 9
static/app/views/alerts/rules/issue/details/alertChart.tsx

@@ -25,7 +25,7 @@ type Props = AsyncComponent['props'] &
   };
 
 type State = AsyncComponent['state'] & {
-  ruleFireHistory: ProjectAlertRuleStats[];
+  ruleFireHistory: ProjectAlertRuleStats[] | null;
 };
 
 class AlertChart extends AsyncComponent<Props, State> {
@@ -76,10 +76,11 @@ class AlertChart extends AsyncComponent<Props, State> {
 
     const series = {
       seriesName: 'Alerts Triggered',
-      data: ruleFireHistory.map(alert => ({
-        name: alert.date,
-        value: alert.count,
-      })),
+      data:
+        ruleFireHistory?.map(alert => ({
+          name: alert.date,
+          value: alert.count,
+        })) ?? [],
       emphasis: {
         disabled: true,
       },
@@ -128,10 +129,8 @@ class AlertChart extends AsyncComponent<Props, State> {
   render() {
     const {ruleFireHistory, loading} = this.state;
 
-    const totalAlertsTriggered = ruleFireHistory.reduce(
-      (acc, curr) => acc + curr.count,
-      0
-    );
+    const totalAlertsTriggered =
+      ruleFireHistory?.reduce((acc, curr) => acc + curr.count, 0) ?? 0;
 
     return loading ? (
       this.renderEmpty()