Merge pull request cockroachdb#106410 from j82w/backport22.2-105550

release-22.2: ui: add details to generic error message
zachlite · Jul 11, 2023 · e6e90f6 · e6e90f6
2 parents 9a04d62 + 396745a
commit e6e90f6
Show file tree

Hide file tree

Showing 15 changed files with 96 additions and 50 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx
@@ -947,9 +947,7 @@ export class DatabaseDetailsPage extends React.Component<
             renderError={() =>
               LoadingError({
                 statsType: "databases",
-                timeout: this.props.lastError?.name
-                  ?.toLowerCase()
-                  .includes("timeout"),
+                error: this.props.lastError,
               })
             }
           />
@@ -962,9 +960,6 @@ export class DatabaseDetailsPage extends React.Component<
               renderError={() =>
                 LoadingError({
                   statsType: "part of the information",
-                  timeout: this.state.lastDetailsError?.name
-                    ?.toLowerCase()
-                    .includes("timeout"),
                   error: this.state.lastDetailsError,
                 })
               }

diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx
@@ -699,13 +699,7 @@ export class DatabaseTablePage extends React.Component<
                 renderError={() =>
                   LoadingError({
                     statsType: "databases",
-                    timeout:
-                      this.props.details.lastError?.name
-                        ?.toLowerCase()
-                        .includes("timeout") ||
-                      this.props.stats.lastError?.name
-                        ?.toLowerCase()
-                        .includes("timeout"),
+                    error: this.props.details.lastError,
                   })
                 }
               />
@@ -727,9 +721,7 @@ export class DatabaseTablePage extends React.Component<
                 renderError={() =>
                   LoadingError({
                     statsType: "databases",
-                    timeout: this.props.details.lastError?.name
-                      ?.toLowerCase()
-                      .includes("timeout"),
+                    error: this.props.details.lastError,
                   })
                 }
               />

diff --git a/pkg/ui/workspaces/cluster-ui/src/databasesPage/databasesPage.tsx b/pkg/ui/workspaces/cluster-ui/src/databasesPage/databasesPage.tsx
@@ -771,9 +771,7 @@ export class DatabasesPage extends React.Component<
             renderError={() =>
               LoadingError({
                 statsType: "databases",
-                timeout: this.props.lastError?.name
-                  ?.toLowerCase()
-                  .includes("timeout"),
+                error: this.props.lastError,
               })
             }
           />
@@ -786,9 +784,6 @@ export class DatabasesPage extends React.Component<
               renderError={() =>
                 LoadingError({
                   statsType: "part of the information",
-                  timeout: this.state.lastDetailsError?.name
-                    ?.toLowerCase()
-                    .includes("timeout"),
                   error: this.state.lastDetailsError,
                 })
               }

diff --git a/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/statementInsightDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/insights/workloadInsightDetails/statementInsightDetails.tsx
@@ -172,9 +172,7 @@ export const StatementInsightDetails: React.FC<
                         renderError={() =>
                           LoadingError({
                             statsType: "explain plan",
-                            timeout: explainPlanState.error?.name
-                              ?.toLowerCase()
-                              .includes("timeout"),
+                            error: explainPlanState.error,
                           })
                         }
                       >

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionDetails.tsx
@@ -212,6 +212,7 @@ export class SessionDetails extends React.Component<SessionDetailsProps> {
             renderError={() =>
               LoadingError({
                 statsType: "sessions",
+                error: this.props.sessionError,
               })
             }
           />

diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx
@@ -23,7 +23,7 @@ import classNames from "classnames/bind";
 import { sessionsTable } from "src/util/docs";
 
 import emptyTableResultsIcon from "../assets/emptyState/empty-table-results.svg";
-import LoadingError from "../sqlActivity/errorComponent";
+import LoadingError, { mergeErrors } from "../sqlActivity/errorComponent";
 import { Pagination } from "src/pagination";
 import {
   SortSetting,
@@ -473,6 +473,7 @@ export class SessionsPage extends React.Component<
           renderError={() =>
             LoadingError({
               statsType: "sessions",
+              error: mergeErrors(this.props.sessionsError),
             })
           }
         />

diff --git a/pkg/ui/workspaces/cluster-ui/src/sqlActivity/errorComponent.tsx b/pkg/ui/workspaces/cluster-ui/src/sqlActivity/errorComponent.tsx
@@ -11,36 +11,93 @@
 import React from "react";
 import classNames from "classnames/bind";
 import styles from "./sqlActivity.module.scss";
+import moment from "moment";
 
 const cx = classNames.bind(styles);
 
 interface SQLActivityErrorProps {
   statsType: string;
-  timeout?: boolean;
-  error?: Error;
+  error: Error;
+}
+
+export function mergeErrors(errs: Error | Error[]): Error {
+  if (!errs) {
+    return null;
+  }
+
+  if (!Array.isArray(errs)) {
+    // Put single Error into a list to simplify logic in main Loading component.
+    return errs;
+  }
+
+  const errors: Error[] = errs as Error[];
+
+  if (!errors) {
+    return null;
+  }
+
+  if (errors.length === 0) {
+    return null;
+  }
+
+  if (errors.length === 1) {
+    return errors[0];
+  }
+
+  const mergedError: Error = {
+    name: "Multiple errors: ",
+    message: "Multiple errors: ",
+  };
+
+  errors.forEach(
+    (x, i, arr) => (
+      (mergedError.name += ` ${i}: ${x.name};`),
+      (mergedError.message += ` ${i}: ${x.message};`)
+    ),
+  );
+  return mergedError;
 }
 
 const LoadingError: React.FC<SQLActivityErrorProps> = props => {
+  const url = window.location.href;
   if (props.error && props.error.name === "GetDatabaseInfoError") {
     return (
       <div className={cx("row")}>
         <span>{props.error.message}</span>
+        <br />
+        <span>{`Debug information: ${moment
+          .utc()
+          .format("YYYY.MM.DD HH:mm:ss")} utc; URL: ${url}`}</span>
       </div>
     );
   }
-  const error = props.timeout ? "a timeout" : "an unexpected error";
+
+  const error = props.error?.name?.toLowerCase().includes("timeout")
+    ? "a timeout"
+    : "an unexpected error";
+
   return (
-    <div className={cx("row")}>
-      <span>{`This page had ${error} while loading ${props.statsType}.`}</span>
-      &nbsp;
-      <a
-        className={cx("action")}
-        onClick={() => {
-          window.location.reload();
-        }}
-      >
-        Reload this page
-      </a>
+    <div>
+      <div className={cx("row")}>
+        <span>{`This page had ${error} while loading ${props.statsType}.`}</span>
+        &nbsp;
+        <a
+          className={cx("action")}
+          onClick={() => {
+            window.location.reload();
+          }}
+        >
+          Reload this page
+        </a>
+      </div>
+      <div className={cx("row-small")}>
+        <br />
+        <span>{`Debug information: ${moment
+          .utc()
+          .format("YYYY.MM.DD HH:mm:ss")} utc; Error message: ${
+          props?.error?.message
+        }; URL: ${url};`}</span>
+      </div>
     </div>
   );
 };

diff --git a/pkg/ui/workspaces/cluster-ui/src/sqlActivity/sqlActivity.module.scss b/pkg/ui/workspaces/cluster-ui/src/sqlActivity/sqlActivity.module.scss
@@ -18,3 +18,12 @@
   display: flex;
   flex-direction: row;
 }
+
+.row-small {
+  display: flex;
+  flex-direction: row;
+  font-size:xx-small;
+  color:$colors--neutral-5;
+  max-width: 450px;
+  line-height: 15px;
+}
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/activeStatementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/activeStatementDetails.tsx
@@ -156,9 +156,7 @@ export const ActiveStatementDetails: React.FC<ActiveStatementDetailsProps> = ({
                   renderError={() =>
                     LoadingError({
                       statsType: "explain plan",
-                      timeout: explainPlanState.error?.name
-                        ?.toLowerCase()
-                        .includes("timeout"),
+                      error: explainPlanState.error,
                     })
                   }
                 >

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
@@ -386,6 +386,7 @@ export class StatementDetails extends React.Component<
             renderError={() =>
               LoadingError({
                 statsType: "statements",
+                error: error,
               })
             }
           />
@@ -475,7 +476,7 @@ export class StatementDetails extends React.Component<
             intent="danger"
             title={LoadingError({
               statsType: "statements",
-              timeout: true,
+              error: this.props.statementsError,
             })}
           />
         )}

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/activeStatementsView.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/activeStatementsView.tsx
@@ -202,6 +202,7 @@ export const ActiveStatementsView: React.FC<ActiveStatementsViewProps> = ({
           renderError={() =>
             LoadingError({
               statsType: "statements",
+              error: sessionsError,
             })
           }
         >

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsPage/statementsPage.tsx
@@ -818,9 +818,7 @@ export class StatementsPage extends React.Component<
             renderError={() =>
               LoadingError({
                 statsType: "statements",
-                timeout: this.props.statementsError?.name
-                  ?.toLowerCase()
-                  .includes("timeout"),
+                error: this.props.statementsError,
               })
             }
           />

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionDetails/transactionDetails.tsx
@@ -514,6 +514,7 @@ export class TransactionDetails extends React.Component<
           renderError={() =>
             LoadingError({
               statsType: "transactions",
+              error: error,
             })
           }
         />

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/activeTransactionsView.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/activeTransactionsView.tsx
@@ -204,6 +204,7 @@ export const ActiveTransactionsView: React.FC<ActiveTransactionsViewProps> = ({
           renderError={() =>
             LoadingError({
               statsType: "transactions",
+              error: sessionsError,
             })
           }
         >

diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionsPage/transactionsPage.tsx
@@ -671,9 +671,7 @@ export class TransactionsPage extends React.Component<
             renderError={() =>
               LoadingError({
                 statsType: "transactions",
-                timeout: this.props?.error?.name
-                  ?.toLowerCase()
-                  .includes("timeout"),
+                error: this.props?.error,
               })
             }
           />