Warn if hit counts can't be loaded for the outline panel (#10400)

packages/replay-next/src/suspense/OutlineHitCountsCache.ts

@@ -21,6 +21,7 @@ export interface FunctionOutlineWithHitCount extends FunctionOutline {
 export interface SourceOutlineWithHitCounts {
   classes: ClassOutline[];
   functions: FunctionOutlineWithHitCount[];
+  hasHitCounts: boolean;
 }
 
 export const outlineHitCountsCache: Cache<
@@ -37,7 +38,7 @@ export const outlineHitCountsCache: Cache<
     sourceId && focusRange ? `${sourceId}:${focusRange.begin}-${focusRange.end}` : sourceId ?? "",
   load: async ([replayClient, sourceId, focusRange]) => {
     if (!sourceId) {
-      return { classes: [], functions: [] };
+      return { classes: [], functions: [], hasHitCounts: true };
     }
 
     const { classes, functions } = await sourceOutlineCache.readAsync(replayClient, sourceId);
@@ -53,6 +54,7 @@ export const outlineHitCountsCache: Cache<
     const sources = await sourcesByIdCache.readAsync(replayClient);
     const correspondingSourceIds = getCorrespondingSourceIds(sources, sourceId);
 
+    let tooManyLocations = false;
     const hitCountsByLocationKey = new Map<string, number>();
     await Promise.all(
       correspondingSourceIds.map(async sourceId => {
@@ -65,13 +67,19 @@ export const outlineHitCountsCache: Cache<
             hitCountsByLocationKey.set(locationKey, previous + hits);
           });
         } catch (error) {
-          if (!isCommandError(error, ProtocolError.TooManyLocations)) {
+          if (isCommandError(error, ProtocolError.TooManyLocations)) {
+            tooManyLocations = true;
+          } else {
             throw error;
           }
         }
       })
     );
 
+    if (tooManyLocations) {
+      return { classes, functions, hasHitCounts: false };
+    }
+
     const functionsWithHitCounts = functions.map(functionOutline => {
       const location = functionOutline.breakpointLocation;
       let hits: number | undefined = undefined;
@@ -82,6 +90,6 @@ export const outlineHitCountsCache: Cache<
       return Object.assign({}, functionOutline, { hits });
     });
 
-    return { classes, functions: functionsWithHitCounts };
+    return { classes, functions: functionsWithHitCounts, hasHitCounts: true };
   },
 });

src/devtools/client/debugger/src/components/SourceOutline/SourceOutline.module.css

@@ -0,0 +1,7 @@
+.Warning {
+  margin: 4px 8px;
+  padding: 4px 8px;
+  border: 1px solid var(--theme-warning-border);
+  background-color: var(--theme-warning-background);
+  color: var(--theme-warning-color);
+}

src/devtools/client/debugger/src/components/SourceOutline/SourceOutline.tsx

@@ -26,6 +26,7 @@ import { getOutlineSymbols } from "./getOutlineSymbols";
 import { isFunctionOutline } from "./isFunctionOutline";
 import { SourceOutlineClass } from "./SourceOutlineClass";
 import { SourceOutlineFunction } from "./SourceOutlineFunction";
+import styles from "./SourceOutline.module.css";
 
 export function SourceOutline({
   cursorPosition,
@@ -109,7 +110,7 @@ export function SourceOutline({
     [handleSelectSymbol, outlineSymbols, focusedSymbol]
   );
 
-  if (!selectedSource || !symbols) {
+  if (!selectedSource) {
     return (
       <div className="text-themeBodyColor mx-2 mt-2 mb-4 space-y-3 whitespace-normal rounded-lg bg-chrome p-3 text-center text-xs">
         {`Select a source to see available functions`}
@@ -139,6 +140,9 @@ export function SourceOutline({
   return (
     <div className={classnames("flex h-full flex-col space-y-2")}>
       <OutlineFilter filter={filter} updateFilter={setFilter} />
+      {symbols.hasHitCounts || (
+        <div className={styles.Warning}>Outline hit counts could not be loaded for this source</div>
+      )}
       <div className="outline-list flex-grow">
         <AutoSizer
           children={({ height, width }) => {