feat: update timeout error UX (#10274)

docs/index.rst

@@ -164,6 +164,7 @@ Contents
     gallery
     druid
     misc
+    issue_code_reference
     faq
 
 

docs/issue_code_reference.rst

@@ -0,0 +1,39 @@
+..  Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+..    http://www.apache.org/licenses/LICENSE-2.0
+
+..  Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+
+Issue Code Reference
+====================
+
+This page lists issue codes that may be displayed in Superset and provides additional context.
+
+Issue 1000
+""""""""""
+
+.. code-block:: text
+
+    The datasource is too large to query.
+
+It's likely your datasource has grown too large to run the current query, and is timing out. You can resolve this by reducing the size of your datasource or by modifying your query to only process a subset of your data.
+
+Issue 1001
+""""""""""
+
+.. code-block:: text
+
+    The database is under an unusual load.
+
+Your query may have timed out because of unusually high load on the database engine. You can make your query simpler, or wait until the database is under less load and try again.

superset-frontend/spec/javascripts/chart/chartActions_spec.js

@@ -156,7 +156,7 @@ describe('chart actions', () => {
       });
     });
 
-    it('should CHART_UPDATE_TIMEOUT action upon query timeout', () => {
+    it('should dispatch CHART_UPDATE_FAILED action upon query timeout', () => {
       const unresolvingPromise = new Promise(() => {});
       fetchMock.post(MOCK_URL, () => unresolvingPromise, {
         overwriteRoutes: true,
@@ -169,7 +169,7 @@ describe('chart actions', () => {
         // chart update, trigger query, update form data, fail
         expect(fetchMock.calls(MOCK_URL)).toHaveLength(1);
         expect(dispatch.callCount).toBe(5);
-        expect(dispatch.args[4][0].type).toBe(actions.CHART_UPDATE_TIMEOUT);
+        expect(dispatch.args[4][0].type).toBe(actions.CHART_UPDATE_FAILED);
         setupDefaultFetchMock();
       });
     });

superset-frontend/spec/javascripts/chart/chartReducers_spec.js

@@ -40,7 +40,21 @@ describe('chart reducers', () => {
   it('should update endtime on timeout', () => {
     const newState = chartReducer(
       charts,
-      actions.chartUpdateTimeout('timeout', 60, chartKey),
+      actions.chartUpdateFailed(
+        {
+          statusText: 'timeout',
+          error: 'Request timed out',
+          errors: [
+            {
+              error_type: 'FRONTEND_TIMEOUT_ERROR',
+              extra: { timeout: 1 },
+              level: 'error',
+              message: 'Request timed out',
+            },
+          ],
+        },
+        chartKey,
+      ),
     );
     expect(newState[chartKey].chartUpdateEndTime).toBeGreaterThan(0);
     expect(newState[chartKey].chartStatus).toEqual('failed');

superset-frontend/src/SqlLab/components/ResultSet.tsx

@@ -217,11 +217,14 @@ export default class ResultSet extends React.PureComponent<
       return <Alert bsStyle="warning">Query was stopped</Alert>;
     } else if (query.state === 'failed') {
       return (
-        <ErrorMessageWithStackTrace
-          error={query.errors?.[0]}
-          message={query.errorMessage || undefined}
-          link={query.link}
-        />
+        <div className="result-set-error-message">
+          <ErrorMessageWithStackTrace
+            error={query?.errors?.[0]}
+            message={query.errorMessage || undefined}
+            link={query.link}
+            source="sqllab"
+          />
+        </div>
       );
     } else if (query.state === 'success' && query.ctas) {
       const { tempSchema, tempTable } = query;

superset-frontend/src/SqlLab/main.less

@@ -409,6 +409,10 @@ div.tablePopover {
   padding-right: 8px;
 }
 
+.result-set-error-message {
+  padding-top: 16px;
+}
+
 .filterable-table-container {
   margin-top: 48px;
 }

superset-frontend/src/chart/Chart.jsx

@@ -49,6 +49,7 @@ const propTypes = {
   timeout: PropTypes.number,
   vizType: PropTypes.string.isRequired,
   triggerRender: PropTypes.bool,
+  owners: PropTypes.arrayOf(PropTypes.string),
   // state
   chartAlert: PropTypes.string,
   chartStatus: PropTypes.string,
@@ -139,12 +140,26 @@ class Chart extends React.PureComponent {
   }
 
   renderErrorMessage() {
-    const { chartAlert, chartStackTrace, queryResponse } = this.props;
+    const {
+      chartAlert,
+      chartStackTrace,
+      dashboardId,
+      owners,
+      queryResponse,
+    } = this.props;
+
+    const error = queryResponse?.errors?.[0];
+    if (error) {
+      const extra = error.extra || {};
+      extra.owners = owners;
+      error.extra = extra;
+    }
     return (
       <ErrorMessageWithStackTrace
-        error={queryResponse?.errors?.[0]}
+        error={error}
         message={chartAlert || queryResponse?.message}
         link={queryResponse ? queryResponse.link : null}
+        source={dashboardId ? 'dashboard' : 'explore'}
         stackTrace={chartStackTrace}
       />
     );

superset-frontend/src/chart/chartAction.js

@@ -62,11 +62,6 @@ export function chartUpdateStopped(key) {
   return { type: CHART_UPDATE_STOPPED, key };
 }
 
-export const CHART_UPDATE_TIMEOUT = 'CHART_UPDATE_TIMEOUT';
-export function chartUpdateTimeout(statusText, timeout, key) {
-  return { type: CHART_UPDATE_TIMEOUT, statusText, timeout, key };
-}
-
 export const CHART_UPDATE_FAILED = 'CHART_UPDATE_FAILED';
 export function chartUpdateFailed(queryResponse, key) {
   return { type: CHART_UPDATE_FAILED, queryResponse, key };
@@ -391,19 +386,16 @@ export function exploreJSON(
             }),
           );
         };
-
-        if (response.statusText === 'timeout') {
-          appendErrorLog('timeout');
-          return dispatch(
-            chartUpdateTimeout(response.statusText, timeout, key),
-          );
-        } else if (response.name === 'AbortError') {
+        if (response.name === 'AbortError') {
           appendErrorLog('abort');
           return dispatch(chartUpdateStopped(key));
         }
         return getClientErrorObject(response).then(parsedResponse => {
-          // query is processed, but error out.
-          appendErrorLog(parsedResponse.error, parsedResponse.is_cached);
+          if (response.statusText === 'timeout') {
+            appendErrorLog('timeout');
+          } else {
+            appendErrorLog(parsedResponse.error, parsedResponse.is_cached);
+          }
           return dispatch(chartUpdateFailed(parsedResponse, key));
         });
       });

superset-frontend/src/chart/chartReducer.js

@@ -85,21 +85,6 @@ export default function chartReducer(charts = {}, action) {
         ),
       };
     },
-    [actions.CHART_UPDATE_TIMEOUT](state) {
-      return {
-        ...state,
-        chartStatus: 'failed',
-        chartAlert: `${t('Query timeout')} - ${t(
-          `visualization queries are set to timeout at ${action.timeout} seconds. `,
-        )}${t(
-          'Perhaps your data has grown, your database is under unusual load, ' +
-            'or you are simply querying a data source that is too large ' +
-            'to be processed within the timeout range. ' +
-            'If that is the case, we recommend that you summarize your data further.',
-        )}`,
-        chartUpdateEndTime: now(),
-      };
-    },
     [actions.CHART_UPDATE_FAILED](state) {
       return {
         ...state,

superset-frontend/src/components/ErrorMessage/ErrorMessageWithStackTrace.tsx

@@ -22,20 +22,22 @@ import { Alert, Collapse } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 
 import getErrorMessageComponentRegistry from './getErrorMessageComponentRegistry';
-import { SupersetError } from './types';
+import { SupersetError, ErrorSource } from './types';
 
 type Props = {
   error?: SupersetError;
   link?: string;
   message?: string;
   stackTrace?: string;
+  source?: ErrorSource;
 };
 
 export default function ErrorMessageWithStackTrace({
   error,
   message,
   link,
   stackTrace,
+  source,
 }: Props) {
   const [showStackTrace, setShowStackTrace] = useState(false);
 
@@ -45,7 +47,7 @@ export default function ErrorMessageWithStackTrace({
       error.error_type,
     );
     if (ErrorMessageComponent) {
-      return <ErrorMessageComponent error={error} />;
+      return <ErrorMessageComponent error={error} source={source} />;
     }
   }
 

superset-frontend/src/components/ErrorMessage/IssueCode.tsx

@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+
+interface IssueCodeProps {
+  code: number;
+  message: string;
+}
+
+export default function IssueCode({ code, message }: IssueCodeProps) {
+  return (
+    <>
+      {message}{' '}
+      <a
+        href={`https://superset.apache.org/issue_code_reference.html#issue-${code}`}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <i className="fa fa-external-link" />
+      </a>
+    </>
+  );
+}