Fix extractHeaderStatus to handle undefined and non-string messages (#2393)

* Fix extractHeaderStatus to handle undefined and non-string messages

* Fix unsafe casts

---------

Co-authored-by: Laurent Nguyen <languye@microsoft.com>

src/Explorer/DataSamples/ContainerSampleGenerator.ts

@@ -113,7 +113,7 @@ export class ContainerSampleGenerator {
               ? await createMongoDocument(collection.databaseId, collection, shardKey, doc)
               : await createDocument(collection, doc);
           } catch (error) {
-            NotificationConsoleUtils.logConsoleError(error);
+            NotificationConsoleUtils.logConsoleError(error instanceof Error ? error.message : String(error));
           }
         }),
       );

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -329,7 +329,10 @@ export class NotificationConsoleComponent extends React.Component<
   }
 
   private static extractHeaderStatus(consoleData: ConsoleData) {
-    return consoleData?.message.split(":\n")[0];
+    if (!consoleData?.message || typeof consoleData.message !== "string") {
+      return undefined;
+    }
+    return consoleData.message.split(":\n")[0];
   }
 
   private onConsoleWasExpanded = (): void => {

src/Metrics/ScenarioMonitor.ts

@@ -105,23 +105,6 @@ class ScenarioMonitor {
     });
 
     ctx.timeoutId = window.setTimeout(() => {
-      const missingPhases = ctx.config.requiredPhases.filter((p) => !ctx.completed.has(p));
-
-      this.devLog(
-        `timeout: ${scenario} | missing=[${missingPhases.join(", ")}] | completed=[${Array.from(ctx.completed).join(
-          ", ",
-        )}] | documentHidden=${document.hidden} | hasExpectedFailure=${ctx.hasExpectedFailure}`,
-      );
-
-      traceMark(Action.MetricsScenario, {
-        event: "scenario_timeout",
-        scenario,
-        missingPhases: missingPhases.join(","),
-        completedPhases: Array.from(ctx.completed).join(","),
-        documentHidden: document.hidden,
-        hasExpectedFailure: ctx.hasExpectedFailure,
-      });
-
       // If an expected failure occurred (auth, firewall, etc.), emit healthy instead of unhealthy
       const healthy = ctx.hasExpectedFailure;
       this.emit(ctx, healthy, true);
@@ -305,7 +288,6 @@ class ScenarioMonitor {
       scenario: ctx.scenario,
       healthy,
       timedOut,
-      documentHidden: document.hidden,
       platform,
       api,
       durationMs: finalSnapshot.durationMs,

src/Metrics/useMetricPhases.ts

@@ -1,26 +1,24 @@
 import React from "react";
 import MetricScenario from "./MetricEvents";
-import { scenarioMonitor } from "./ScenarioMonitor";
+import { useMetricScenario } from "./MetricScenarioProvider";
 import { ApplicationMetricPhase, CommonMetricPhase } from "./ScenarioConfig";
 
 /**
  * Hook to automatically complete the Interactive phase when the component becomes interactive.
  * Uses requestAnimationFrame to complete after the browser has painted.
- *
- * Calls scenarioMonitor directly (not via React context) so that the effect dependencies
- * are only [scenario, enabled] — both stable primitives. This prevents re-renders from
- * cancelling the pending rAF due to an unstable context function reference.
  */
 export function useInteractive(scenario: MetricScenario, enabled = true) {
+  const { completePhase } = useMetricScenario();
+
   React.useEffect(() => {
     if (!enabled) {
       return undefined;
     }
     const id = requestAnimationFrame(() => {
-      scenarioMonitor.completePhase(scenario, CommonMetricPhase.Interactive);
+      completePhase(scenario, CommonMetricPhase.Interactive);
     });
     return () => cancelAnimationFrame(id);
-  }, [scenario, enabled]);
+  }, [scenario, completePhase, enabled]);
 }
 
 /**
@@ -28,20 +26,18 @@ export function useInteractive(scenario: MetricScenario, enabled = true) {
  * Tracks tree rendering and completes Interactive phase.
  * Only completes DatabaseTreeRendered if the database fetch was successful.
  * Note: Scenario must be started before databases are fetched (in refreshExplorer).
- *
- * Calls scenarioMonitor directly (not via React context) for the same stability reason
- * as useInteractive — avoids effect re-runs from unstable context function references.
  */
 export function useDatabaseLoadScenario(databaseTreeNodes: unknown[], fetchSucceeded: boolean) {
+  const { completePhase } = useMetricScenario();
   const hasCompletedTreeRenderRef = React.useRef(false);
 
   // Track DatabaseTreeRendered phase (only if fetch succeeded)
   React.useEffect(() => {
     if (!hasCompletedTreeRenderRef.current && fetchSucceeded) {
       hasCompletedTreeRenderRef.current = true;
-      scenarioMonitor.completePhase(MetricScenario.DatabaseLoad, ApplicationMetricPhase.DatabaseTreeRendered);
+      completePhase(MetricScenario.DatabaseLoad, ApplicationMetricPhase.DatabaseTreeRendered);
     }
-  }, [databaseTreeNodes, fetchSucceeded]);
+  }, [databaseTreeNodes, fetchSucceeded, completePhase]);
 
   // Track Interactive phase
   useInteractive(MetricScenario.DatabaseLoad);

src/Platform/Fabric/FabricUtil.ts

@@ -37,7 +37,7 @@ const requestFabricToken = async (): Promise<void> => {
 
     scheduleRefreshFabricToken();
   } catch (error) {
-    logConsoleError(error as string);
+    logConsoleError(error instanceof Error ? error.message : String(error));
     throw error;
   } finally {
     lastRequestTimestamp = undefined;