[CC-24092] ui: add an overridable logger

A setLogger and getLogger method are added to cluster-ui so that the
cockroach cloud console can use them to pass a custom logger which
embellishes each log invocation with the cluster version and cluster id.

Epic: CC-24047

Release Note: none

Author: fantapop

pkg/ui/workspaces/cluster-ui/src/api/contentionApi.ts

@@ -19,6 +19,7 @@ import {
 } from "./sqlApi";
 import { ContentionDetails } from "src/insights";
 import moment from "moment-timezone";
+import { getLogger } from "../util";
 
 export type ContentionFilters = {
   waitingTxnID?: string;
@@ -62,8 +63,9 @@ export async function getContentionDetailsApi(
   if (sqlResultsAreEmpty(result)) {
     if (result.error) {
       // We don't return an error if it failed to retrieve the contention information.
-      console.error(
-        `Insights encounter an error while retrieving contention information: ${result.error}`,
+      getLogger().error(
+        "Insights encounter an error while retrieving contention information.",
+        { resultError: result.error },
       );
     }
     return formatApiResult<ContentionDetails[]>(

pkg/ui/workspaces/cluster-ui/src/api/databaseDetailsApi.ts

@@ -26,6 +26,7 @@ import { Format, Identifier, QualifiedIdentifier } from "./safesql";
 import moment from "moment-timezone";
 import { fromHexString, withTimeout } from "./util";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
+import { getLogger } from "../util";
 
 const { ZoneConfig } = cockroach.config.zonepb;
 const { ZoneConfigurationLevel } = cockroach.server.serverpb;
@@ -272,8 +273,10 @@ const getDatabaseZoneConfig: DatabaseDetailsQuery<DatabaseZoneConfigRow> = {
         );
         resp.zoneConfigResp.zone_config_level = ZoneConfigurationLevel.DATABASE;
       } catch (e) {
-        console.error(
+        getLogger().error(
           `Database Details API - encountered an error decoding zone config string: ${zoneConfigHexString}`,
+          /* additional context */ undefined,
+          e,
         );
         // Catch and assign the error if we encounter one decoding.
         resp.zoneConfigResp.error = e;

pkg/ui/workspaces/cluster-ui/src/api/tableDetailsApi.ts

@@ -26,6 +26,7 @@ import { fromHexString, withTimeout } from "./util";
 import { Format, Identifier, Join, SQL } from "./safesql";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
 import { IndexUsageStatistic, recommendDropUnusedIndex } from "../insights";
+import { getLogger } from "../util";
 
 const { ZoneConfig } = cockroach.config.zonepb;
 const { ZoneConfigurationLevel } = cockroach.server.serverpb;
@@ -314,8 +315,10 @@ const getTableZoneConfig: TableDetailsQuery<TableZoneConfigRow> = {
         );
         resp.zoneConfigResp.zone_config_level = configLevel;
       } catch (e) {
-        console.error(
+        getLogger().error(
           `Table Details API - encountered an error decoding zone config string: ${hexString}`,
+          /* additional context */ undefined,
+          e,
         );
         // Catch and assign the error if we encounter one decoding.
         resp.zoneConfigResp.error = e;

pkg/ui/workspaces/cluster-ui/src/loading/loading.tsx

@@ -17,7 +17,7 @@ import {
   Spinner,
   InlineAlertIntent,
 } from "@cockroachlabs/ui-components";
-import { adminUIAccess, isForbiddenRequestError } from "src/util";
+import { adminUIAccess, getLogger, isForbiddenRequestError } from "src/util";
 import styles from "./loading.module.scss";
 import { Anchor } from "../anchor";
 
@@ -68,7 +68,14 @@ export const Loading: React.FC<LoadingProps> = props => {
   // Check for `error` before `loading`, since tests for `loading` often return
   // true even if CachedDataReducer has an error and is no longer really "loading".
   if (errors) {
-    console.error(`Error Loading ${props.page}: ${errors}`);
+    getLogger().error(
+      errors.length === 1
+        ? `Error Loading ${props.page}`
+        : `Multiple errors seen Loading ${props.page}: ${errors}`,
+      /* additional context */ undefined,
+      errors[0],
+    );
+
     // - map Error to InlineAlert props. RestrictedPermissions handled as "info" message;
     // - group errors by intend to show separate alerts per intent.
     const errorAlerts = chain(errors)

pkg/ui/workspaces/cluster-ui/src/store/uiConfig/uiConfig.sagas.ts

@@ -14,6 +14,7 @@ import { getUserSQLRoles } from "../../api/userApi";
 import { CACHE_INVALIDATION_PERIOD, throttleWithReset } from "../utils";
 import { rootActions } from "../reducers";
 import { cockroach } from "@cockroachlabs/crdb-protobuf-client";
+import { getLogger } from "../../util";
 
 export function* refreshUserSQLRolesSaga(): any {
   yield put(actions.requestUserSQLRoles());
@@ -26,7 +27,7 @@ export function* requestUserSQLRolesSaga(): any {
     );
     yield put(actions.receivedUserSQLRoles(result.roles));
   } catch (e) {
-    console.warn(e.message);
+    getLogger().warn(e.message, /* additional context */ undefined, e);
   }
 }
 

pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx

@@ -26,7 +26,7 @@ import { defaultTimeScaleOptions, findClosestTimeScale } from "./utils";
 
 import styles from "./timeScale.module.scss";
 import { TimezoneContext } from "../contexts";
-import { FormatWithTimezone } from "../util";
+import { FormatWithTimezone, getLogger } from "../util";
 
 const cx = classNames.bind(styles);
 
@@ -186,7 +186,7 @@ export const TimeScaleDropdown: React.FC<TimeScaleDropdownProps> = ({
         isMoving = true;
         break;
       default:
-        console.error("Unknown direction: ", direction);
+        getLogger().error("Unknown direction: ", direction);
     }
 
     // If the timescale extends into the future then fallback to a default

pkg/ui/workspaces/cluster-ui/src/util/index.ts

@@ -17,6 +17,7 @@ export * from "./docs";
 export * from "./fixLong";
 export * from "./format";
 export * from "./formatDate";
+export * from "./logger";
 export * from "./requestError";
 export * from "./sql/summarize";
 export * from "./query";

pkg/ui/workspaces/cluster-ui/src/util/logger.ts

@@ -0,0 +1,91 @@
+// Copyright 2023 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+type JSONValue =
+  | null
+  | boolean
+  | number
+  | string
+  | JSONValue[]
+  | { [key: string]: JSONValue };
+
+interface Logger {
+  /**
+   * Logs a message with additional context and an optional error at debug
+   * level.
+   * @param msg - the string message to log
+   * @param context - additional structured context to include with the
+   * message when shipped to a remote service
+   * @param error - a possible JS Error to include with the message when
+   * shipped to a remote service. Typed as unknown for convenience but
+   * anything passed here which is not instanceof Error will not be attached.
+   */
+  debug(
+    msg: string,
+    context?: Record<string, JSONValue>,
+    error?: unknown,
+  ): void;
+  /**
+   * Logs a message with additional context and an optional error at info
+   * level.
+   * @param msg - the string message to log
+   * @param context - additional structured context to include with the
+   * message when shipped to a remote service
+   * @param error - a possible JS Error to include with the message when
+   * shipped to a remote service. Typed as unknown for convenience but
+   * anything passed here which is not instanceof Error will not be attached.
+   */
+  info(msg: string, context?: Record<string, JSONValue>, error?: unknown): void;
+  /**
+   * Logs a message with additional context and an optional error at warn
+   * level.
+   * @param msg - the string message to log
+   * @param context - additional structured context to include with the
+   * message when shipped to a remote service
+   * @param error - a possible JS Error to include with the message when
+   * shipped to a remote service. Typed as unknown for convenience but
+   * anything passed here which is not instanceof Error will not be attached.
+   */
+  warn(msg: string, context?: Record<string, JSONValue>, error?: unknown): void;
+  /**
+   * Logs a message with additional context and an optional error at error
+   * level.
+   * @param msg - the string message to log
+   * @param context - additional structured context to include with the
+   * message when shipped to a remote service
+   * @param error - a possible JS Error to include with the message when
+   * shipped to a remote service. Typed as unknown for convenience but
+   * anything passed here which is not instanceof Error will not be attached.
+   */
+  error(
+    msg: string,
+    context?: Record<string, JSONValue>,
+    error?: unknown,
+  ): void;
+}
+
+let logger: Logger = console;
+
+/**
+ * Sets the logger returned by {@link getLogger}. It was added to allow
+ * cockroach cloud to pass in a custom logger which attaches additional metadata
+ * to each call and sends errors up to datadog.
+ * @param newLogger the Logger to set
+ */
+export function setLogger(newLogger: Logger) {
+  logger = newLogger;
+}
+
+/**
+ * @returns the most recent logger set by {@link setLogger}, or console if one was never set.
+ */
+export function getLogger(): Logger {
+  return logger;
+}

pkg/ui/workspaces/cluster-ui/src/util/versions.ts

@@ -8,6 +8,8 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
+import { getLogger } from "./logger";
+
 const versionPrefix = "10000";
 export type SemVersion = [number, number, number];
 
@@ -51,7 +53,9 @@ export function parseStringToVersion(
   if (inputString.startsWith(versionPrefix)) {
     inputString = inputString.split(versionPrefix)[1];
     if (!inputString) {
-      console.log("Unable to split version string while parsing", inputString);
+      getLogger().warn(
+        "Unable to split version string while parsing: " + inputString,
+      );
       return [0, 0, 0];
     }
   }
@@ -68,7 +72,7 @@ export function parseStringToVersion(
 
     return [parsedMajorVersion, parsedMinorVersion, parsedPatchVersion];
   } else {
-    console.log("Version string did not match", inputString);
+    getLogger().warn("Version string did not match: " + inputString);
     return [0, 0, 0];
   }
 }