[dashboard] unify error reporting (#18726)

* [dashboard] unify error reporting

move error boundary to general error reporting endpoint as well

* add user to common details

* fix common properties in metrics

Author: akosyakov

components/dashboard/src/components/error-boundaries/ReloadPageErrorBoundary.tsx

@@ -5,10 +5,10 @@
  */
 
 import { FC, useCallback } from "react";
-import { ErrorBoundary, FallbackProps, ErrorBoundaryProps } from "react-error-boundary";
+import { ErrorBoundary, ErrorBoundaryProps, FallbackProps } from "react-error-boundary";
 import gitpodIcon from "../../icons/gitpod.svg";
-import { getGitpodService } from "../../service/service";
 import { Heading1, Subheading } from "../typography/headings";
+import { reportError } from "../../service/metrics";
 
 export type CaughtError = Error & { code?: number };
 
@@ -64,11 +64,4 @@ export const ReloadPageErrorFallback: FC<Pick<FallbackProps, "error">> = ({ erro
     );
 };
 
-export const handleError: ErrorBoundaryProps["onError"] = async (error, info) => {
-    const url = window.location.toString();
-    try {
-        await getGitpodService().server.reportErrorBoundary(url, error.message || "Unknown Error");
-    } catch (e) {
-        console.error(e);
-    }
-};
+export const handleError: ErrorBoundaryProps["onError"] = (error, info) => reportError("Error boundary", error, info);

components/dashboard/src/service/metrics.ts

@@ -40,7 +40,12 @@ console.error = function (...args) {
     reportError(...args);
 };
 
-function reportError(...args: any[]) {
+let commonDetails = {};
+export function updateCommonErrorDetails(update: { [key: string]: string | undefined }) {
+    Object.assign(commonDetails, update);
+}
+
+export function reportError(...args: any[]) {
     let err = undefined;
     let details = undefined;
     if (args[0] instanceof Error) {
@@ -61,22 +66,26 @@ function reportError(...args: any[]) {
         }
     }
 
-    let data = undefined;
+    let data = {};
     if (details && typeof details === "object") {
-        data = Object.fromEntries(
-            Object.entries(details)
-                .filter(([key, value]) => {
-                    return (
-                        typeof value === "string" ||
-                        typeof value === "number" ||
-                        typeof value === "boolean" ||
-                        value === null ||
-                        typeof value === "undefined"
-                    );
-                })
-                .map(([key, value]) => [key, String(value)]),
+        data = Object.assign(
+            data,
+            Object.fromEntries(
+                Object.entries(details)
+                    .filter(([key, value]) => {
+                        return (
+                            typeof value === "string" ||
+                            typeof value === "number" ||
+                            typeof value === "boolean" ||
+                            value === null ||
+                            typeof value === "undefined"
+                        );
+                    })
+                    .map(([key, value]) => [key, String(value)]),
+            ),
         );
     }
+    data = Object.assign(data, commonDetails);
 
     if (err) {
         metricsReporter.reportError(err, data);

components/dashboard/src/user-context.tsx

@@ -7,6 +7,7 @@
 import { User } from "@gitpod/gitpod-protocol";
 import { useQueryClient } from "@tanstack/react-query";
 import React, { createContext, useState, useContext, useMemo, useCallback } from "react";
+import { updateCommonErrorDetails } from "./service/metrics";
 
 const UserContext = createContext<{
     user?: User;
@@ -18,10 +19,16 @@ const UserContext = createContext<{
 const UserContextProvider: React.FC = ({ children }) => {
     const [user, setUser] = useState<User>();
 
+    const updateErrorUserDetails = (user?: User) => {
+        updateCommonErrorDetails({ userId: user?.id });
+    };
+    updateErrorUserDetails(user);
+
     const client = useQueryClient();
 
     const doSetUser = useCallback(
         (updatedUser: User) => {
+            updateErrorUserDetails(updatedUser);
             if (user?.id !== updatedUser.id) {
                 client.clear();
             }

components/public-api/typescript/src/metrics.ts

@@ -373,6 +373,10 @@ export class MetricsReporter {
         properties["error_name"] = error.name;
         properties["error_message"] = error.message;
 
+        const workspaceId = properties["workspaceId"];
+        const instanceId = properties["instanceId"];
+        const userId = properties["userId"];
+
         delete properties["workspaceId"];
         delete properties["instanceId"];
         delete properties["userId"];
@@ -381,9 +385,9 @@ export class MetricsReporter {
             component: this.options.clientName,
             errorStack: error.stack ?? String(error),
             version: this.options.clientVersion,
-            workspaceId: properties["workspaceId"] ?? "",
-            instanceId: properties["instanceId"] ?? "",
-            userId: properties["userId"] ?? "",
+            workspaceId: workspaceId ?? "",
+            instanceId: instanceId ?? "",
+            userId: userId ?? "",
             properties,
         });
     }

components/server/src/prometheus-metrics.ts

@@ -22,7 +22,6 @@ export function registerServerMetrics(registry: prometheusClient.Registry) {
     registry.registerMetric(imageBuildsStartedTotal);
     registry.registerMetric(imageBuildsCompletedTotal);
     registry.registerMetric(spicedbClientLatency);
-    registry.registerMetric(dashboardErrorBoundary);
     registry.registerMetric(jwtCookieIssued);
     registry.registerMetric(jobStartedTotal);
     registry.registerMetric(jobsCompletedTotal);
@@ -264,15 +263,6 @@ export function observeSpicedbClientLatency(operation: string, outcome: Error |
     );
 }
 
-export const dashboardErrorBoundary = new prometheusClient.Counter({
-    name: "gitpod_dashboard_error_boundary_total",
-    help: "Total number of errors caught by an error boundary in the dashboard",
-});
-
-export function increaseDashboardErrorBoundaryCounter() {
-    dashboardErrorBoundary.inc();
-}
-
 export const jobStartedTotal = new prometheusClient.Counter({
     name: "gitpod_server_jobs_started_total",
     help: "Total number of errors caught by an error boundary in the dashboard",

components/server/src/workspace/gitpod-server-impl.ts

@@ -144,7 +144,6 @@ import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 import { CostCenterJSON } from "@gitpod/gitpod-protocol/lib/usage";
 import { createCookielessId, maskIp } from "../analytics";
 import { getExperimentsClientForBackend } from "@gitpod/gitpod-protocol/lib/experiments/configcat-server";
-import { increaseDashboardErrorBoundaryCounter } from "../prometheus-metrics";
 import { LinkedInService } from "../linkedin-service";
 import { SnapshotService, WaitForSnapshotOptions } from "./snapshot-service";
 import { IncrementalPrebuildsService } from "../prebuilds/incremental-prebuilds-service";
@@ -3464,14 +3463,12 @@ export class GitpodServerImpl implements GitpodServerWithTracing, Disposable {
     //
     //#endregion
 
+    /**
+     * TODO(ak)
+     * @deprecated remove it after dashboard is deployed. It was replaced with error reporting in GCP.
+     */
     async reportErrorBoundary(ctx: TraceContextWithSpan, url: string, message: string): Promise<void> {
-        // Cap message and url length so the entries aren't of unbounded length
-        log.warn("dashboard error boundary", {
-            message: (message || "").substring(0, 200),
-            url: (url || "").substring(0, 200),
-            userId: this.userID,
-        });
-        increaseDashboardErrorBoundaryCounter();
+        // no-op
     }
 
     async getIDToken(): Promise<void> {}