From 96f44219615a287db267f9dc1c0073aa038e0ed0 Mon Sep 17 00:00:00 2001
From: Grace Guo <grace.guo@airbnb.com>
Date: Mon, 18 Oct 2021 11:09:23 -0700
Subject: [PATCH] fix: sql lab crash caused by invalid template (#17133)

---
 .../components/ErrorMessage/ParameterErrorMessage.tsx    | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/components/ErrorMessage/ParameterErrorMessage.tsx b/superset-frontend/src/components/ErrorMessage/ParameterErrorMessage.tsx
index 666ad32169..739cfa74a6 100644
--- a/superset-frontend/src/components/ErrorMessage/ParameterErrorMessage.tsx
+++ b/superset-frontend/src/components/ErrorMessage/ParameterErrorMessage.tsx
@@ -56,7 +56,7 @@ function ParameterErrorMessage({
   source = 'sqllab',
   subtitle,
 }: ErrorMessageComponentProps<ParameterErrorExtra>) {
-  const { extra, level, message } = error;
+  const { extra = { issue_codes: [] }, level, message } = error;
 
   const triggerMessage = tn(
     'This was triggered by:',
@@ -99,9 +99,10 @@ function ParameterErrorMessage({
         )}
         {triggerMessage}
         <br />
-        {extra.issue_codes
-          .map<React.ReactNode>(issueCode => <IssueCode {...issueCode} />)
-          .reduce((prev, curr) => [prev, <br />, curr])}
+        {extra.issue_codes.length > 0 &&
+          extra.issue_codes
+            .map<React.ReactNode>(issueCode => <IssueCode {...issueCode} />)
+            .reduce((prev, curr) => [prev, <br />, curr])}
       </p>
     </>
   );