Add tracing logging for hanging issue (#19346)

* Add tracing logging for hanging issue

* 💄

* 💄

* 💄

* log prefix

* 💄

* Add user loaded

* rename

* 💄

---------

Co-authored-by: Huiwen Huang <huiwen@gitpod.io>

Author: jeanp413

components/dashboard/src/app/AppLoading.tsx

@@ -8,6 +8,9 @@ import { FunctionComponent, useEffect, useState } from "react";
 import { Heading3, Subheading } from "../components/typography/headings";
 import { Delayed } from "@podkit/loading/Delayed";
 import { ProductLogo } from "../components/ProductLogo";
+import { useReportDashboardLoggingTracing } from "../data/featureflag-query";
+import { userLoaded } from "../hooks/use-user-loader";
+import { orgsLoaded } from "../data/organizations/orgs-query";
 
 function useDelay(wait: number) {
     const [done, setDone] = useState(false);
@@ -21,6 +24,16 @@ function useDelay(wait: number) {
 
 export const AppLoading: FunctionComponent = () => {
     const done = useDelay(8000);
+    const logTracing = useReportDashboardLoggingTracing();
+    useEffect(() => {
+        if (done) {
+            logTracing(async () => {}, "At least 8 seconds has passed trying to resolve an API call", {
+                userLoaded,
+                orgsLoaded,
+            });
+        }
+    }, [done, logTracing]);
+
     const connectionProblems = useDelay(25000);
     return (
         <Delayed wait={3000}>

components/dashboard/src/data/featureflag-query.ts

@@ -35,6 +35,8 @@ const featureFlags = {
     org_workspace_class_restrictions: false,
     // dummy specified dataops feature, default false
     dataops: false,
+    // Logging tracing for added for investigate hanging issue
+    dashboard_logging_tracing: false,
 };
 
 type FeatureFlags = typeof featureFlags;
@@ -63,6 +65,47 @@ export const useFeatureFlag = <K extends keyof FeatureFlags>(featureFlag: K): Fe
     return query.data !== undefined ? query.data : featureFlags[featureFlag];
 };
 
+export const useDedicatedFeatureFlag = <K extends keyof FeatureFlags>(featureFlag: K): FeatureFlags[K] | boolean => {
+    const queryKey = ["dedicatedFeatureFlag", featureFlag];
+
+    const query = useQuery(queryKey, async () => {
+        const flagValue = await getExperimentsClient().getValueAsync(featureFlag, featureFlags[featureFlag], {
+            gitpodHost: window.location.host,
+        });
+        return flagValue;
+    });
+
+    return query.data !== undefined ? query.data : featureFlags[featureFlag];
+};
+
 export const useIsDataOps = () => {
     return useFeatureFlag("dataops");
 };
+
+export const useReportDashboardLoggingTracing = () => {
+    const enabled = useDedicatedFeatureFlag("dashboard_logging_tracing");
+
+    if (!enabled) {
+        return async <T>(fn: () => Promise<T>, _msg: string, _meta?: Record<string, any>) => {
+            return await fn();
+        };
+    }
+    return async <T>(fn: () => Promise<T>, msg: string, meta?: Record<string, any>) => {
+        try {
+            const result = await fn();
+            console.error("[dashboard_tracing] " + msg, {
+                ...meta,
+                time: performance.now(),
+            });
+            return result;
+        } catch (err) {
+            console.error("[dashboard_tracing] " + msg, {
+                ...meta,
+                err: err.toString(),
+                errorCode: (err as any)?.code,
+                time: performance.now(),
+            });
+            throw err;
+        }
+    };
+};

components/dashboard/src/data/organizations/orgs-query.ts

@@ -5,12 +5,13 @@
  */
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { useLocation } from "react-router";
 import { organizationClient } from "../../service/public-api";
 import { useCurrentUser } from "../../user-context";
 import { noPersistence } from "../setup";
 import { Organization } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
+import { useReportDashboardLoggingTracing } from "../featureflag-query";
 
 export function useOrganizationsInvalidator() {
     const user = useCurrentUser();
@@ -22,8 +23,10 @@ export function useOrganizationsInvalidator() {
     }, [user?.id, queryClient]);
 }
 
+export let orgsLoaded = false;
 export function useOrganizations() {
     const user = useCurrentUser();
+    const logTracing = useReportDashboardLoggingTracing();
     const query = useQuery<Organization[], Error>(
         getQueryKey(user?.id),
         async () => {
@@ -32,8 +35,10 @@ export function useOrganizations() {
                 console.log("useOrganizations with empty user");
                 return [];
             }
-
-            const response = await organizationClient.listOrganizations({});
+            const response = await logTracing(
+                async () => organizationClient.listOrganizations({}),
+                "on organization loading",
+            );
             return response.organizations;
         },
         {
@@ -44,6 +49,9 @@ export function useOrganizations() {
             useErrorBoundary: true,
         },
     );
+    useEffect(() => {
+        orgsLoaded = !query.isLoading;
+    }, [query.isLoading]);
     return query;
 }
 

components/dashboard/src/hooks/use-user-loader.ts

@@ -4,26 +4,27 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { UserContext } from "../user-context";
 import { trackLocation } from "../Analytics";
 import { useQuery } from "@tanstack/react-query";
 import { noPersistence } from "../data/setup";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
-import { useFeatureFlag } from "../data/featureflag-query";
+import { useFeatureFlag, useReportDashboardLoggingTracing } from "../data/featureflag-query";
 import { userClient } from "../service/public-api";
 
+export let userLoaded = false;
 export const useUserLoader = () => {
     const { user, setUser } = useContext(UserContext);
     const doRetryUserLoader = useFeatureFlag("doRetryUserLoader");
+    const logTracing = useReportDashboardLoggingTracing();
 
     // For now, we're using the user context to store the user, but letting react-query handle the loading
     // In the future, we should remove the user context and use react-query to access the user
     const { isLoading } = useQuery({
         queryKey: noPersistence(["current-user"]),
         queryFn: async () => {
-            const user = (await userClient.getAuthenticatedUser({})).user;
-
+            const user = (await logTracing(async () => userClient.getAuthenticatedUser({}), "on user loading")).user;
             return user || null;
         },
         // We'll let an ErrorBoundary catch the error
@@ -50,5 +51,9 @@ export const useUserLoader = () => {
         },
     });
 
+    useEffect(() => {
+        userLoaded = !isLoading;
+    }, [isLoading]);
+
     return { user, loading: isLoading };
 };