feat(flamegraph): Use average frame duration in call tree table view (#99553)

The sum frame duration is not a useful metric without an idea of how
frequently it's called. This swaps it out for avg frame duration. Would
be better to have the number of calls as well but that's out of scope of
this PR.

Closes PRO-25

Author: Zylphrex

static/app/components/profiling/flamegraph/aggregateFlamegraphTreeTable.tsx

@@ -74,13 +74,17 @@ function makeSortFunction(
           a: VirtualizedTreeNode<FlamegraphFrame>,
           b: VirtualizedTreeNode<FlamegraphFrame>
         ) => {
-          return b.node.node.aggregate_duration_ns - a.node.node.aggregate_duration_ns;
+          const avgA = a.node.frame.averageCallDuration || 0;
+          const avgB = b.node.frame.averageCallDuration || 0;
+          return avgB - avgA;
         }
       : (
           a: VirtualizedTreeNode<FlamegraphFrame>,
           b: VirtualizedTreeNode<FlamegraphFrame>
         ) => {
-          return a.node.node.aggregate_duration_ns - b.node.node.aggregate_duration_ns;
+          const avgA = a.node.frame.averageCallDuration || 0;
+          const avgB = b.node.frame.averageCallDuration || 0;
+          return avgA - avgB;
         };
   }
 
@@ -249,6 +253,14 @@ export function AggregateFlamegraphTreeTable({
                   abbreviation
                 />
               }
+              avgWeight={
+                defined(r.item.node.frame.averageCallDuration) ? (
+                  <PerformanceDuration
+                    nanoseconds={r.item.node.frame.averageCallDuration}
+                    abbreviation
+                  />
+                ) : undefined
+              }
               selfWeight={r.item.node.node.totalWeight.toFixed(0)}
               relativeSelfWeight={relativeWeight(
                 referenceNode.node.totalWeight,
@@ -424,9 +436,9 @@ export function AggregateFlamegraphTreeTable({
             <CallTreeTableHeaderButton onClick={onSortByDuration}>
               <InteractionStateLayer />
               <span>
-                {t('Duration')}{' '}
+                {t('Average Duration')}{' '}
                 <QuestionTooltip
-                  title={t('Aggregated duration of this frame across different samples.')}
+                  title={t('Average duration of this frame across different samples.')}
                   size="sm"
                   position="top"
                 />

static/app/components/profiling/flamegraph/callTreeTable.tsx

@@ -3,7 +3,9 @@ import styled from '@emotion/styled';
 
 import {IconSettings} from 'sentry/icons/iconSettings';
 import {IconUser} from 'sentry/icons/iconUser';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {defined} from 'sentry/utils';
 import type {FlamegraphFrame} from 'sentry/utils/profiling/flamegraphFrame';
 import type {VirtualizedTreeNode} from 'sentry/utils/profiling/hooks/useVirtualizedTree/VirtualizedTreeNode';
 import type {VirtualizedTreeRenderedRow} from 'sentry/utils/profiling/hooks/useVirtualizedTree/virtualizedTreeUtils';
@@ -403,7 +405,7 @@ export function CallTreeTableRow({ref, ...props}: CallTreeTableRowProps) {
   );
 }
 
-interface CallTreeTableColumns {
+interface BaseCallTreeTableColumns {
   formatDuration: (value: number) => string;
   frameColor: string;
   node: VirtualizedTreeNode<FlamegraphFrame>;
@@ -413,12 +415,17 @@ interface CallTreeTableColumns {
     opts?: {expandChildren: boolean}
   ) => void;
   referenceNode: FlamegraphFrame;
+  tabIndex: number;
+  type: 'count' | 'time';
+}
+
+interface CallTreeTableColumns extends BaseCallTreeTableColumns {
   relativeSelfWeight: number;
   relativeTotalWeight: number;
   selfWeight: number | React.ReactNode;
-  tabIndex: number;
   totalWeight: number | React.ReactNode;
-  type: 'count' | 'time';
+  avgWeight?: React.ReactNode;
+  showAvg?: boolean;
 }
 
 export function CallTreeTableFixedColumns(props: CallTreeTableColumns) {
@@ -437,34 +444,39 @@ export function CallTreeTableFixedColumns(props: CallTreeTableColumns) {
         </div>
       </div>
       <div className={CallTreeTableClassNames.CELL} style={TEXT_ALIGN_RIGHT}>
-        {typeof props.totalWeight === 'number'
-          ? props.formatDuration(props.totalWeight)
-          : props.totalWeight}
-        <div className={CallTreeTableClassNames.WEIGHT}>
-          {props.relativeTotalWeight.toFixed(1)}%
-          <div
-            className={CallTreeTableClassNames.BACKGROUND_WEIGHT}
-            style={{transform: `scaleX(${props.relativeTotalWeight / 100})`}}
-          />
-        </div>
-        <div className={CallTreeTableClassNames.FRAME_TYPE}>
-          {props.node.node.node.frame.is_application ? (
-            <IconUser size="xs" />
+        {props.showAvg ? (
+          defined(props.avgWeight) ? (
+            props.avgWeight
           ) : (
-            <IconSettings size="xs" />
-          )}
-        </div>
+            <span>{t('Unknown')}</span>
+          )
+        ) : (
+          <Fragment>
+            {typeof props.totalWeight === 'number'
+              ? props.formatDuration(props.totalWeight)
+              : props.totalWeight}
+            <div className={CallTreeTableClassNames.WEIGHT}>
+              {props.relativeTotalWeight.toFixed(1)}%
+              <div
+                className={CallTreeTableClassNames.BACKGROUND_WEIGHT}
+                style={{transform: `scaleX(${props.relativeTotalWeight / 100})`}}
+              />
+            </div>
+            <div className={CallTreeTableClassNames.FRAME_TYPE}>
+              {props.node.node.node.frame.is_application ? (
+                <IconUser size="xs" />
+              ) : (
+                <IconSettings size="xs" />
+              )}
+            </div>
+          </Fragment>
+        )}
       </div>
     </Fragment>
   );
 }
 
-export function CallTreeTableDynamicColumns(
-  props: Omit<
-    CallTreeTableColumns,
-    'relativeTotalWeight' | 'relativeSelfWeight' | 'selfWeight' | 'totalWeight'
-  >
-) {
+export function CallTreeTableDynamicColumns(props: BaseCallTreeTableColumns) {
   const handleExpanding = (evt: React.MouseEvent) => {
     evt.stopPropagation();
     props.onExpandClick(props.node, !props.node.expanded, {

static/app/types/profiling.d.ts

@@ -192,7 +192,7 @@ declare namespace Profiling {
     children?: Span[];
   };
 
-  type FrameInfo = {
+  type Frame = {
     col?: number;
     colno?: number;
     column?: number;
@@ -219,8 +219,18 @@ declare namespace Profiling {
     // nodejs only
     columnNumber?: number;
     lineNumber?: number;
+    resourceId?: number;
     scriptName?: string;
     scriptId?: number;
+
+    // metadata about the frame's occurrences and more
+    count?: number;
+    weight?: number;
+  };
+
+  type FrameInfo = {
+    count: number;
+    weight: number;
   };
 
   type FunctionMetric = {
@@ -313,7 +323,8 @@ declare namespace Profiling {
       >
     >;
     shared: {
-      frames: ReadonlyArray<Omit<Profiling.FrameInfo, 'key'>>;
+      frames: ReadonlyArray<Omit<Profiling.Frame, 'key'>>;
+      frame_infos?: ReadonlyArray<Profiling.FrameInfo, 'key'>;
       profile_ids?: ReadonlyArray<string>[];
       profiles?: ReadonlyArray<ProfileReference>;
     };

static/app/utils/profiling/flamegraph.spec.tsx

@@ -271,12 +271,10 @@ describe('flamegraph', () => {
     );
 
     expect(flamegraph.frames[1]!.frame.name).toBe('f0');
-    expect(flamegraph.frames[1]!.frame.totalWeight).toBe(1);
     expect(flamegraph.frames[1]!.start).toBe(2);
     expect(flamegraph.frames[1]!.end).toBe(3);
 
     expect(flamegraph.frames[0]!.frame.name).toBe('f1');
-    expect(flamegraph.frames[0]!.frame.totalWeight).toBe(2);
     expect(flamegraph.frames[0]!.start).toBe(0);
     expect(flamegraph.frames[0]!.end).toBe(2);
   });

static/app/utils/profiling/flamegraph.ts

@@ -145,7 +145,6 @@ export class Flamegraph {
       0
     );
     this.root.end = this.root.start + weight;
-    this.root.frame.totalWeight += weight;
 
     let width = 0;
 

static/app/utils/profiling/frame.tsx

@@ -1,6 +1,7 @@
 import {trimPackage} from 'sentry/components/events/interfaces/frame/utils';
 import type {SymbolicatorStatus} from 'sentry/components/events/interfaces/types';
 import {t} from 'sentry/locale';
+import {defined} from 'sentry/utils';
 
 const ROOT_KEY = 'sentry root';
 const BROWSER_EXTENSION_REGEXP = /^(\@moz-extension\:\/\/|chrome-extension\:\/\/)/;
@@ -27,9 +28,9 @@ export class Frame {
 
   readonly isRoot: boolean;
 
-  totalWeight = 0;
-  selfWeight = 0;
-  aggregateDuration = 0;
+  readonly totalCallCount?: number;
+  readonly totalCallDuration?: number;
+  readonly averageCallDuration?: number;
 
   static Root = new Frame({
     key: ROOT_KEY,
@@ -38,40 +39,49 @@ export class Frame {
   });
 
   constructor(
-    frameInfo: Profiling.FrameInfo,
+    frame: Profiling.Frame,
     type?: 'mobile' | 'javascript' | 'node' | string,
     // In aggregate mode, we miss certain info like lineno/col and so
     // we need to make sure we don't try to use it or infer data based on it
     mode?: 'detailed' | 'aggregate'
   ) {
-    this.key = frameInfo.key;
-    this.file = frameInfo.file;
-    this.name = frameInfo.name;
-    this.resource = frameInfo.resource;
-    this.line = frameInfo.line;
-    this.column = frameInfo.column;
-    this.is_application = !!frameInfo.is_application;
-    this.package = frameInfo.package;
-    this.module = frameInfo.module ?? frameInfo.image;
-    this.threadId = frameInfo.threadId;
-    this.path = frameInfo.path;
-    this.platform = frameInfo.platform;
-    this.instructionAddr = frameInfo.instructionAddr;
-    this.symbol = frameInfo.symbol;
-    this.symbolAddr = frameInfo.symbolAddr;
-    this.symbolicatorStatus = frameInfo.symbolicatorStatus;
+    this.key = frame.key;
+    this.file = frame.file;
+    this.name = frame.name;
+    this.resource = frame.resource;
+    this.line = frame.line;
+    this.column = frame.column;
+    this.is_application = !!frame.is_application;
+    this.package = frame.package;
+    this.module = frame.module ?? frame.image;
+    this.threadId = frame.threadId;
+    this.path = frame.path;
+    this.platform = frame.platform;
+    this.instructionAddr = frame.instructionAddr;
+    this.symbol = frame.symbol;
+    this.symbolAddr = frame.symbolAddr;
+    this.symbolicatorStatus = frame.symbolicatorStatus;
     this.isRoot = this.key === ROOT_KEY;
 
+    this.totalCallCount = frame.count;
+    this.totalCallDuration = frame.weight;
+    this.averageCallDuration =
+      defined(frame.weight) && defined(frame.count)
+        ? frame.count
+          ? frame.weight / frame.count
+          : 0
+        : undefined;
+
     // We are remapping some of the keys as they differ between platforms.
     // This is a temporary solution until we adopt a unified format.
-    if (frameInfo.columnNumber && this.column === undefined) {
-      this.column = frameInfo.columnNumber;
+    if (frame.columnNumber && this.column === undefined) {
+      this.column = frame.columnNumber;
     }
-    if (frameInfo.lineNumber && this.column === undefined) {
-      this.line = frameInfo.lineNumber;
+    if (frame.lineNumber && this.column === undefined) {
+      this.line = frame.lineNumber;
     }
-    if (frameInfo.scriptName && this.column === undefined) {
-      this.resource = frameInfo.scriptName;
+    if (frame.scriptName && this.column === undefined) {
+      this.resource = frame.scriptName;
     }
 
     // If the frame is a web frame and there is no name associated to it, then it was likely invoked as an iife or anonymous callback as

static/app/utils/profiling/profile/continuousProfile.tsx

@@ -138,10 +138,7 @@ export class ContinuousProfile extends Profile {
       child.lock();
     }
 
-    node.frame.selfWeight += duration;
-
     for (const stackNode of framesInStack) {
-      stackNode.frame.totalWeight += duration;
       stackNode.count++;
     }
 

static/app/utils/profiling/profile/eventedProfile.tsx

@@ -97,19 +97,6 @@ export class EventedProfile extends Profile {
     return built;
   }
 
-  addWeightToFrames(weight: number): void {
-    const weightDelta = weight - this.lastValue;
-
-    for (const frame of this.stack) {
-      frame.totalWeight += weightDelta;
-    }
-
-    const top = this.stack[this.stack.length - 1];
-    if (top) {
-      top.selfWeight += weight;
-    }
-  }
-
   addWeightsToNodes(value: number) {
     const delta = value - this.lastValue;
 
@@ -124,7 +111,6 @@ export class EventedProfile extends Profile {
   }
 
   enterFrame(frame: Frame, at: number): void {
-    this.addWeightToFrames(at);
     this.addWeightsToNodes(at);
 
     const lastTop = this.calltree[this.calltree.length - 1];
@@ -192,8 +178,8 @@ export class EventedProfile extends Profile {
   }
 
   leaveFrame(_event: Frame, at: number): void {
-    this.addWeightToFrames(at);
     this.addWeightsToNodes(at);
+
     this.trackSampleStats(at);
 
     const leavingStackTop = this.calltree.pop();

static/app/utils/profiling/profile/importProfile.tsx

@@ -231,7 +231,14 @@ function importSchema(
       : input.metadata.platform === 'javascript'
         ? 'javascript'
         : 'mobile',
-    input.shared.frames
+    input.shared.frames.map((frame, i) => {
+      const frameInfo = input.shared.frame_infos?.[i];
+      return {
+        ...frame,
+        count: frameInfo?.count,
+        weight: frameInfo?.weight,
+      };
+    })
   );
 
   return {

static/app/utils/profiling/profile/jsSelfProfile.tsx

@@ -157,10 +157,7 @@ export class JSSelfProfile extends Profile {
       child.lock();
     }
 
-    node.frame.selfWeight += weight;
-
     for (const stackNode of framesInStack) {
-      stackNode.frame.totalWeight += weight;
       stackNode.count++;
     }