From f4ea15e4774ae0e2f739e972243bab593f22bc2e Mon Sep 17 00:00:00 2001
From: "JUST.in DO IT" <justin.park@airbnb.com>
Date: Fri, 18 Apr 2025 13:31:54 -0700
Subject: [PATCH] fix(sqllab): Invalid SQL Error breaks SQL Lab (#33164)

---
 .../InvalidSQLErrorMessage.test.tsx           | 21 +++++++++++++++++++
 .../ErrorMessage/InvalidSQLErrorMessage.tsx   | 12 ++++++-----
 superset/sql_parse.py                         |  1 +
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/superset-frontend/src/components/ErrorMessage/InvalidSQLErrorMessage.test.tsx b/superset-frontend/src/components/ErrorMessage/InvalidSQLErrorMessage.test.tsx
index 7db4c862cc3..192be4a0d2d 100644
--- a/superset-frontend/src/components/ErrorMessage/InvalidSQLErrorMessage.test.tsx
+++ b/superset-frontend/src/components/ErrorMessage/InvalidSQLErrorMessage.test.tsx
@@ -43,6 +43,21 @@ const defaultProps = {
   subtitle: 'Test subtitle',
 };
 
+const missingExtraProps = {
+  ...defaultProps,
+  error: {
+    error_type: ErrorTypeEnum.INVALID_SQL_ERROR,
+    message: 'SQLStatement should have exactly one statement',
+    level: 'error' as ErrorLevel,
+    extra: {
+      sql: null,
+      line: null,
+      column: null,
+      engine: null,
+    },
+  },
+};
+
 const renderComponent = (overrides = {}) =>
   render(
     <ThemeProvider theme={supersetTheme}>
@@ -60,6 +75,12 @@ describe('InvalidSQLErrorMessage', () => {
     expect(getByText('SELECT * FFROM table')).toBeInTheDocument();
   });
 
+  it('renders the error message with the empty extra properties', () => {
+    const { getByText } = renderComponent(missingExtraProps);
+    expect(getByText('Unable to parse SQL')).toBeInTheDocument();
+    expect(getByText(missingExtraProps.error.message)).toBeInTheDocument();
+  });
+
   it('displays the SQL error line and column indicator', () => {
     const { getByText, container } = renderComponent();
 
diff --git a/superset-frontend/src/components/ErrorMessage/InvalidSQLErrorMessage.tsx b/superset-frontend/src/components/ErrorMessage/InvalidSQLErrorMessage.tsx
index 21236e92a02..27ca263cfd0 100644
--- a/superset-frontend/src/components/ErrorMessage/InvalidSQLErrorMessage.tsx
+++ b/superset-frontend/src/components/ErrorMessage/InvalidSQLErrorMessage.tsx
@@ -36,20 +36,22 @@ function InvalidSQLErrorMessage({
   source,
   subtitle,
 }: ErrorMessageComponentProps<SupersetParseErrorExtra>) {
-  const { extra, level } = error;
+  const { extra, level, message } = error;
 
   const { sql, line, column } = extra;
-  const lines = sql.split('\n');
+  const lines = sql?.split('\n');
   let errorLine;
-  if (line !== null) errorLine = lines[line - 1];
-  else if (lines.length > 0) {
+  if (line !== null && Number.isInteger(line)) errorLine = lines[line - 1];
+  else if (lines?.length > 0) {
     errorLine = lines[0];
   }
-  const body = errorLine && (
+  const body = errorLine ? (
     <>
       <pre>{errorLine}</pre>
       {column !== null && <pre>{' '.repeat(column - 1)}^</pre>}
     </>
+  ) : (
+    message
   );
   return (
     <ErrorAlert
diff --git a/superset/sql_parse.py b/superset/sql_parse.py
index b253ab29d00..2cd8d0ac9dc 100644
--- a/superset/sql_parse.py
+++ b/superset/sql_parse.py
@@ -277,6 +277,7 @@ class ParsedQuery:
                         "You may have an error in your SQL statement. {message}"
                     ).format(message=ex.error.message),
                     level=ErrorLevel.ERROR,
+                    extra=ex.error.extra,
                 )
             ) from ex