devtools-tracing 1.0.0

package/lib/front_end/models/trace/handlers/UserTimingsHandler.ts

@@ -0,0 +1,233 @@
+// Copyright 2022 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+
+/**
+ * IMPORTANT!
+ * See UserTimings.md in this directory for some handy documentation on
+ * UserTimings and the trace events we parse currently.
+ **/
+let syntheticEvents: Array<Types.Events.SyntheticEventPair<Types.Events.PairableAsync>> = [];
+
+// There are two events dispatched for performance.measure calls: one to
+// represent the measured timing in the tracing clock (which we type as
+// PerformanceMeasure) and another one for the call itself (which we
+// type as UserTimingMeasure). The two events corresponding to the same
+// call are linked together by a common trace_id. The reason two events
+// are dispatched is because the first was originally added with the
+// implementation of the performance.measure API and it uses an
+// overridden timestamp and duration. To prevent breaking potential deps
+// created since then, a second event was added instead of changing the
+// params of the first.
+let measureTraceByTraceId = new Map<number, Types.Events.UserTimingMeasure>();
+let performanceMeasureEvents: Types.Events.PerformanceMeasure[] = [];
+let performanceMarkEvents: Types.Events.PerformanceMark[] = [];
+
+let consoleTimings: Array<Types.Events.ConsoleTimeBegin|Types.Events.ConsoleTimeEnd> = [];
+
+let timestampEvents: Types.Events.ConsoleTimeStamp[] = [];
+
+export interface UserTimingsData {
+  /**
+   * Events triggered with the performance.measure() API.
+   * https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure
+   */
+  performanceMeasures: readonly Types.Events.SyntheticUserTimingPair[];
+  /**
+   * Events triggered with the performance.mark() API.
+   * https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark
+   */
+  performanceMarks: readonly Types.Events.PerformanceMark[];
+  /**
+   * Events triggered with the console.time(), console.timeEnd() and
+   * console.timeLog() API.
+   * https://developer.mozilla.org/en-US/docs/Web/API/console/time
+   */
+  consoleTimings: readonly Types.Events.SyntheticConsoleTimingPair[];
+  /**
+   * Events triggered with the console.timeStamp() API
+   * https://developer.mozilla.org/en-US/docs/Web/API/console/timeStamp
+   */
+  timestampEvents: readonly Types.Events.ConsoleTimeStamp[];
+  /**
+   * Events triggered to trace the call to performance.measure itself,
+   * cached by trace_id.
+   */
+  measureTraceByTraceId: Map<number, Types.Events.UserTimingMeasure>;
+}
+
+export function reset(): void {
+  syntheticEvents = [];
+  performanceMeasureEvents = [];
+  performanceMarkEvents = [];
+  consoleTimings = [];
+  timestampEvents = [];
+  measureTraceByTraceId = new Map();
+}
+
+const resourceTimingNames = [
+  'workerStart',
+  'redirectStart',
+  'redirectEnd',
+  'fetchStart',
+  'domainLookupStart',
+  'domainLookupEnd',
+  'connectStart',
+  'connectEnd',
+  'secureConnectionStart',
+  'requestStart',
+  'responseStart',
+  'responseEnd',
+];
+const navTimingNames = [
+  'navigationStart',
+  'unloadEventStart',
+  'unloadEventEnd',
+  'redirectStart',
+  'redirectEnd',
+  'fetchStart',
+  'commitNavigationEnd',
+  'domainLookupStart',
+  'domainLookupEnd',
+  'connectStart',
+  'connectEnd',
+  'secureConnectionStart',
+  'requestStart',
+  'responseStart',
+  'responseEnd',
+  'domLoading',
+  'domInteractive',
+  'domContentLoadedEventStart',
+  'domContentLoadedEventEnd',
+  'domComplete',
+  'loadEventStart',
+  'loadEventEnd',
+];
+// These are events dispatched under the blink.user_timing category
+// but that the user didn't add. Filter them out so that they do not
+// Appear in the timings track (they still appear in the main thread
+// flame chart).
+const ignoredNames = [...resourceTimingNames, ...navTimingNames];
+
+function getEventTimings(event: Types.Events.SyntheticEventPair|Types.Events.ConsoleTimeStamp):
+    {start: Types.Timing.Micro, end: Types.Timing.Micro} {
+  if ('dur' in event) {
+    // It's a SyntheticEventPair.
+    return {start: event.ts, end: Types.Timing.Micro(event.ts + (event.dur ?? 0))};
+  }
+
+  if (Types.Events.isConsoleTimeStamp(event)) {
+    const {start, end} = event.args.data || {};
+    if (typeof start === 'number' && typeof end === 'number') {
+      return {start: Types.Timing.Micro(start), end: Types.Timing.Micro(end)};
+    }
+  }
+
+  // A ConsoleTimeStamp without start/end is just a point in time, so dur is 0.
+  return {start: event.ts, end: event.ts};
+}
+
+function getEventTrack(event: Types.Events.SyntheticEventPair|Types.Events.ConsoleTimeStamp): string|undefined {
+  if (event.cat === 'blink.user_timing') {
+    // This is a SyntheticUserTimingPair
+    const detailString =
+        ((event as Types.Events.SyntheticUserTimingPair).args.data.beginEvent.args as {detail?: string})?.detail;
+    if (detailString) {
+      const details = Helpers.Trace.parseDevtoolsDetails(detailString, 'devtools');
+      if (details && 'track' in details) {
+        return details.track;
+      }
+    }
+  } else if (Types.Events.isConsoleTimeStamp(event)) {
+    const track = event.args.data?.track;
+    return typeof track === 'string' ? track : undefined;
+  }
+
+  // SyntheticConsoleTimingPair does not have track info.
+  return undefined;
+}
+
+/**
+ * Similar to the default {@link Helpers.Trace.eventTimeComparator}
+ * but with a twist:
+ * In case of equal start and end times, put the second event (within a
+ * track) first.
+ *
+ * Explanation:
+ * User timing entries come as trace events dispatched when
+ * performance.measure/mark is called. The trace events buffered in
+ * devtools frontend are sorted by the start time. If their start time
+ * is the same, then the event for the first call will appear first.
+ *
+ * When entries are meant to be stacked, the corresponding
+ * performance.measure calls usually are done in bottom-up direction:
+ * calls for children first and for parent later (because the call
+ * is usually done when the measured task is over). This means that
+ * when two user timing events have the same start and end time, usually
+ * the second event is the parent of the first. Hence the switch.
+ *
+ */
+export function userTimingComparator<T extends Types.Events.SyntheticEventPair|Types.Events.ConsoleTimeStamp>(
+    a: T, b: T, originalArray: readonly T[]): number {
+  const {start: aStart, end: aEnd} = getEventTimings(a);
+  const {start: bStart, end: bEnd} = getEventTimings(b);
+  const timeDifference = Helpers.Trace.compareBeginAndEnd(aStart, bStart, aEnd, bEnd);
+  if (timeDifference) {
+    return timeDifference;
+  }
+
+  // Never re-order entries across different tracks.
+  const aTrack = getEventTrack(a);
+  const bTrack = getEventTrack(b);
+  if (aTrack !== bTrack) {
+    return 0;  // Preserve current positions.
+  }
+
+  // Prefer the event located in a further position in the original array.
+  const aIndex = originalArray.indexOf(a);
+  const bIndex = originalArray.indexOf(b);
+  return bIndex - aIndex;
+}
+
+export function handleEvent(event: Types.Events.Event): void {
+  if (ignoredNames.includes(event.name)) {
+    return;
+  }
+  if (Types.Events.isUserTimingMeasure(event)) {
+    measureTraceByTraceId.set(event.args.traceId, event);
+  }
+  if (Types.Events.isPerformanceMeasure(event)) {
+    performanceMeasureEvents.push(event);
+    return;
+  }
+  if (Types.Events.isPerformanceMark(event)) {
+    performanceMarkEvents.push(event);
+  }
+  if (Types.Events.isConsoleTime(event)) {
+    consoleTimings.push(event);
+  }
+  if (Types.Events.isConsoleTimeStamp(event)) {
+    timestampEvents.push(event);
+  }
+}
+
+export async function finalize(): Promise<void> {
+  const asyncEvents = [...performanceMeasureEvents, ...consoleTimings];
+  syntheticEvents = Helpers.Trace.createMatchedSortedSyntheticEvents(asyncEvents);
+  syntheticEvents = syntheticEvents.sort((a, b) => userTimingComparator(a, b, [...syntheticEvents]));
+  timestampEvents = timestampEvents.sort((a, b) => userTimingComparator(a, b, [...timestampEvents]));
+}
+
+export function data(): UserTimingsData {
+  return {
+    consoleTimings: syntheticEvents.filter(e => e.cat === 'blink.console') as Types.Events.SyntheticConsoleTimingPair[],
+    performanceMeasures: syntheticEvents.filter(e => e.cat === 'blink.user_timing') as
+        Types.Events.SyntheticUserTimingPair[],
+    performanceMarks: performanceMarkEvents,
+    timestampEvents,
+    measureTraceByTraceId,
+  };
+}

package/lib/front_end/models/trace/handlers/WarningsHandler.ts

@@ -0,0 +1,162 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Platform from '../../../core/platform/platform.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+
+import type {HandlerName} from './types.js';
+import {data as userInteractionsHandlerData} from './UserInteractionsHandler.js';
+import {data as workersData} from './WorkersHandler.js';
+
+export interface WarningsData {
+  // Tracks warnings keyed by the event.
+  perEvent: Map<Types.Events.Event, Warning[]>;
+  // The same data in reverse: for each type of warning, track the events.
+  // Useful if we need to enumerate events by type of issue
+  perWarning: Map<Warning, Types.Events.Event[]>;
+}
+
+export type Warning = 'LONG_TASK'|'IDLE_CALLBACK_OVER_TIME'|'FORCED_REFLOW'|'LONG_INTERACTION';
+
+let warningsPerEvent: WarningsData['perEvent'] = new Map();
+let eventsPerWarning: WarningsData['perWarning'] = new Map();
+
+/**
+ * Tracks the stack formed by nested trace events up to a given point
+ */
+let allEventsStack: Types.Events.Event[] = [];
+/**
+ * Tracks the stack formed by JS invocation trace events up to a given point.
+ * F.e. FunctionCall, EvaluateScript, V8Execute.
+ * Not to be confused with ProfileCalls.
+ */
+let jsInvokeStack: Types.Events.Event[] = [];
+/**
+ * Tracks reflow events in a task.
+ */
+let taskReflowEvents: Types.Events.Event[] = [];
+/**
+ * Tracks events containing long running tasks. These are compared later against the worker thread pool to filter out long tasks from worker threads.
+ */
+let longTaskEvents: Types.Events.Event[] = [];
+
+export const FORCED_REFLOW_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(30));
+
+export const LONG_MAIN_THREAD_TASK_THRESHOLD = Helpers.Timing.milliToMicro(Types.Timing.Milli(50));
+
+export function reset(): void {
+  warningsPerEvent = new Map();
+  eventsPerWarning = new Map();
+  allEventsStack = [];
+  jsInvokeStack = [];
+  taskReflowEvents = [];
+  longTaskEvents = [];
+}
+
+function storeWarning(event: Types.Events.Event, warning: Warning): void {
+  const existingWarnings = Platform.MapUtilities.getWithDefault(warningsPerEvent, event, () => []);
+  existingWarnings.push(warning);
+  warningsPerEvent.set(event, existingWarnings);
+
+  const existingEvents = Platform.MapUtilities.getWithDefault(eventsPerWarning, warning, () => []);
+  existingEvents.push(event);
+  eventsPerWarning.set(warning, existingEvents);
+}
+
+export function handleEvent(event: Types.Events.Event): void {
+  processForcedReflowWarning(event);
+  if (event.name === Types.Events.Name.RUN_TASK) {
+    const {duration} = Helpers.Timing.eventTimingsMicroSeconds(event);
+    if (duration > LONG_MAIN_THREAD_TASK_THRESHOLD) {
+      longTaskEvents.push(event);
+    }
+    return;
+  }
+
+  if (Types.Events.isFireIdleCallback(event)) {
+    const {duration} = Helpers.Timing.eventTimingsMilliSeconds(event);
+    if (duration > event.args.data.allottedMilliseconds) {
+      storeWarning(event, 'IDLE_CALLBACK_OVER_TIME');
+    }
+    return;
+  }
+}
+
+/**
+ * Reflows* are added a warning to if:
+ * 1. They are forced/sync, meaning they are invoked by JS and finish
+ *    during the Script execution.
+ * 2. Their duration exceeds a threshold.
+ * - *Reflow: The style recalculation and layout steps in a render task.
+ */
+function processForcedReflowWarning(event: Types.Events.Event): void {
+  // Update the event and the JS invocation stacks.
+  accomodateEventInStack(event, allEventsStack);
+  accomodateEventInStack(event, jsInvokeStack, /* pushEventToStack */ Types.Events.isJSInvocationEvent(event));
+  if (jsInvokeStack.length) {
+    // Current event falls inside a JS call.
+    if (event.name === Types.Events.Name.LAYOUT || event.name === Types.Events.Name.RECALC_STYLE) {
+      // A forced reflow happened. However we need to check if
+      // the threshold is surpassed to add a warning. Accumulate the
+      // event to check for this after the current Task is over.
+      taskReflowEvents.push(event);
+      return;
+    }
+  }
+  if (allEventsStack.length === 1) {
+    // We hit a new task. Check if the forced reflows in the previous
+    // task exceeded the threshold and add a warning if so.
+    const totalTime = taskReflowEvents.reduce((time, event) => time + (event.dur || 0), 0);
+    if (totalTime >= FORCED_REFLOW_THRESHOLD) {
+      taskReflowEvents.forEach(reflowEvent => storeWarning(reflowEvent, 'FORCED_REFLOW'));
+    }
+    taskReflowEvents.length = 0;
+  }
+}
+
+/**
+ * Updates a given trace event stack given a new event.
+ */
+function accomodateEventInStack(event: Types.Events.Event, stack: Types.Events.Event[], pushEventToStack = true): void {
+  let nextItem = stack.at(-1);
+  while (nextItem && event.ts > nextItem.ts + (nextItem.dur || 0)) {
+    stack.pop();
+    nextItem = stack.at(-1);
+  }
+  if (!pushEventToStack) {
+    return;
+  }
+  stack.push(event);
+}
+
+export function deps(): HandlerName[] {
+  return ['UserInteractions', 'Workers'];
+}
+
+export async function finalize(): Promise<void> {
+  // These events do exist on the UserInteractionsHandler, but we also put
+  // them into the WarningsHandler so that the warnings handler can be the
+  // source of truth and the way to look up all warnings for a given event.
+  // Otherwise, we would have to look up warnings across multiple handlers for
+  // a given event, which will start to get messy very quickly.
+  const longInteractions = userInteractionsHandlerData().interactionsOverThreshold;
+  for (const interaction of longInteractions) {
+    storeWarning(interaction, 'LONG_INTERACTION');
+  }
+
+  for (const event of longTaskEvents) {
+    if (!(event.tid, workersData().workerIdByThread.has(event.tid))) {
+      storeWarning(event, 'LONG_TASK');
+    }
+  }
+  longTaskEvents.length = 0;
+}
+
+export function data(): WarningsData {
+  return {
+    perEvent: warningsPerEvent,
+    perWarning: eventsPerWarning,
+  };
+}

package/lib/front_end/models/trace/handlers/WorkersHandler.ts

@@ -0,0 +1,45 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Types from '../types/types.js';
+
+export interface WorkersData {
+  workerSessionIdEvents: readonly Types.Events.TracingSessionIdForWorker[];
+  workerIdByThread: Map<Types.Events.ThreadID, Types.Events.WorkerId>;
+  workerURLById: Map<Types.Events.WorkerId, string>;
+}
+
+let sessionIdEvents: Types.Events.TracingSessionIdForWorker[] = [];
+let workerIdByThread = new Map<Types.Events.ThreadID, Types.Events.WorkerId>();
+let workerURLById = new Map<Types.Events.WorkerId, string>();
+
+export function reset(): void {
+  sessionIdEvents = [];
+  workerIdByThread = new Map();
+  workerURLById = new Map();
+}
+
+export function handleEvent(event: Types.Events.Event): void {
+  if (Types.Events.isTracingSessionIdForWorker(event)) {
+    sessionIdEvents.push(event);
+  }
+}
+
+export async function finalize(): Promise<void> {
+  for (const sessionIdEvent of sessionIdEvents) {
+    if (!sessionIdEvent.args.data) {
+      continue;
+    }
+    workerIdByThread.set(sessionIdEvent.args.data.workerThreadId, sessionIdEvent.args.data.workerId);
+    workerURLById.set(sessionIdEvent.args.data.workerId, sessionIdEvent.args.data.url);
+  }
+}
+
+export function data(): WorkersData {
+  return {
+    workerSessionIdEvents: sessionIdEvents,
+    workerIdByThread,
+    workerURLById,
+  };
+}

package/lib/front_end/models/trace/handlers/handlers.ts

@@ -0,0 +1,8 @@
+// Copyright 2022 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export * as Helpers from './helpers.js';
+export * as ModelHandlers from './ModelHandlers.js';
+export * as Threads from './Threads.js';
+export * as Types from './types.js';

package/lib/front_end/models/trace/handlers/helpers.ts

@@ -0,0 +1,196 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Platform from '../../../core/platform/platform.js';
+import * as Types from '../types/types.js';
+
+import type {TraceEventsForNetworkRequest} from './NetworkRequestsHandler.js';
+import type {HandlerData} from './types.js';
+
+export type Entity = {
+  name?: string,
+  isUnrecognized?: boolean,
+};
+
+export interface EntityMappings {
+  createdEntityCache: Map<string, Entity>;
+  entityByEvent: Map<Types.Events.Event, Entity>;
+  eventsByEntity: Map<Entity, Types.Events.Event[]>;
+  entityByUrlCache: Map<string, Entity>;
+}
+
+export function getEntityForEvent(event: Types.Events.Event, entityMappings: EntityMappings): Entity|undefined {
+  const url = getNonResolvedURL(event);
+  if (!url) {
+    return;
+  }
+  return getEntityForUrl(url, entityMappings);
+}
+
+export function getEntityForUrl(url: string, entityMappings: EntityMappings): Entity|undefined {
+  const cachedByUrl = entityMappings.entityByUrlCache.get(url);
+  if (cachedByUrl) {
+    return cachedByUrl;
+  }
+  const entity = makeUpEntity(entityMappings.createdEntityCache, url);
+  if (entity) {
+    entityMappings.entityByUrlCache.set(url, entity);
+  }
+  return entity;
+}
+
+export function getNonResolvedURL(
+    entry: Types.Events.Event, handlerData?: HandlerData): Platform.DevToolsPath.UrlString|null {
+  if (Types.Events.isProfileCall(entry)) {
+    return entry.callFrame.url as Platform.DevToolsPath.UrlString;
+  }
+
+  if (Types.Events.isSyntheticNetworkRequest(entry)) {
+    return entry.args.data.url as Platform.DevToolsPath.UrlString;
+  }
+
+  if (Types.Events.isParseAuthorStyleSheetEvent(entry) && entry.args) {
+    return entry.args.data.stylesheetUrl as Platform.DevToolsPath.UrlString;
+  }
+
+  if (entry.args?.data?.stackTrace && entry.args.data.stackTrace.length > 0) {
+    return entry.args.data.stackTrace[0].url as Platform.DevToolsPath.UrlString;
+  }
+
+  // ParseHTML events store the URL under beginData, not data.
+  if (Types.Events.isParseHTML(entry)) {
+    return entry.args.beginData.url as Platform.DevToolsPath.UrlString;
+  }
+
+  if (handlerData) {
+    // DecodeImage events use the URL from the relevant PaintImage event.
+    if (Types.Events.isDecodeImage(entry)) {
+      const paintEvent = handlerData.ImagePainting.paintImageForEvent.get(entry);
+      return paintEvent ? getNonResolvedURL(paintEvent, handlerData) : null;
+    }
+
+    // DrawLazyPixelRef events use the URL from the relevant PaintImage event.
+    if (Types.Events.isDrawLazyPixelRef(entry) && entry.args?.LazyPixelRef) {
+      const paintEvent = handlerData.ImagePainting.paintImageByDrawLazyPixelRef.get(entry.args.LazyPixelRef);
+      return paintEvent ? getNonResolvedURL(paintEvent, handlerData) : null;
+    }
+  }
+
+  // For all other events, try to see if the URL is provided, else return null.
+  if (entry.args?.data?.url) {
+    return entry.args.data.url as Platform.DevToolsPath.UrlString;
+  }
+
+  // Many events don't have a url, but are associated with a request. Use the
+  // request's url.
+  const requestId = (entry.args?.data as {requestId?: string})?.requestId;
+  if (handlerData && requestId) {
+    const url = handlerData.NetworkRequests.byId.get(requestId)?.args.data.url;
+    if (url) {
+      return url as Platform.DevToolsPath.UrlString;
+    }
+  }
+
+  return null;
+}
+
+export function makeUpEntity(entityCache: Map<string, Entity>, url: string): Entity|undefined {
+  if (url.startsWith('chrome-extension:')) {
+    return makeUpChromeExtensionEntity(entityCache, url);
+  }
+
+  // Make up an entity only for valid http/https URLs.
+  if (!url.startsWith('http')) {
+    return;
+  }
+
+  const rootDomain = URL.parse(url)?.hostname || url
+
+  const unrecognizedEntity = {
+    name: rootDomain,
+    company: rootDomain,
+    category: '',
+    categories: [],
+    domains: [rootDomain],
+    averageExecutionTime: 0,
+    totalExecutionTime: 0,
+    totalOccurrences: 0,
+    isUnrecognized: true,
+  };
+  entityCache.set(rootDomain, unrecognizedEntity);
+  return unrecognizedEntity;
+}
+
+function getChromeExtensionOrigin(url: URL): string {
+  return url.protocol + '//' + url.host;
+}
+
+function makeUpChromeExtensionEntity(entityCache: Map<string, Entity>, url: string, extensionName?: string): Entity {
+  const parsedUrl = new URL(url);
+  const origin = getChromeExtensionOrigin(parsedUrl);
+  const host = new URL(origin).host;
+  const name = extensionName || host;
+
+  const cachedEntity = entityCache.get(origin);
+  if (cachedEntity) {
+    return cachedEntity;
+  }
+
+  const chromeExtensionEntity = {
+    name,
+    company: name,
+    category: 'Chrome Extension',
+    homepage: 'https://chromewebstore.google.com/detail/' + host,
+    categories: [],
+    domains: [origin],
+    averageExecutionTime: 0,
+    totalExecutionTime: 0,
+    totalOccurrences: 0,
+  };
+
+  entityCache.set(origin, chromeExtensionEntity);
+  return chromeExtensionEntity;
+}
+
+export function addEventToEntityMapping(event: Types.Events.Event, entityMappings: EntityMappings): void {
+  // As we share the entityMappings between Network and Renderer... We can have ResourceSendRequest events passed in here
+  // that were already mapped in Network. So, to avoid mapping twice, we always check that we didn't yet.
+  if (entityMappings.entityByEvent.has(event)) {
+    return;
+  }
+
+  const entity = getEntityForEvent(event, entityMappings);
+  if (!entity) {
+    return;
+  }
+
+  const mappedEvents = entityMappings.eventsByEntity.get(entity);
+  if (mappedEvents) {
+    mappedEvents.push(event);
+  } else {
+    entityMappings.eventsByEntity.set(entity, [event]);
+  }
+  entityMappings.entityByEvent.set(event, entity);
+}
+
+/** A slight upgrade of addEventToEntityMapping to handle the sub-events of a network request. **/
+export function addNetworkRequestToEntityMapping(
+    networkRequest: Types.Events.SyntheticNetworkRequest, entityMappings: EntityMappings,
+    requestTraceEvents: TraceEventsForNetworkRequest): void {
+  const entity = getEntityForEvent(networkRequest, entityMappings);
+  if (!entity) {
+    return;
+  }
+  // In addition to mapping the network request, we'll also assign this entity to its "child" instant events like receiveData, willSendRequest, finishLoading, etc,
+  const eventsToMap = [networkRequest, ...Object.values(requestTraceEvents).flat()];
+  const mappedEvents = entityMappings.eventsByEntity.get(entity);
+  if (mappedEvents) {
+    mappedEvents.push(...eventsToMap);
+  } else {
+    entityMappings.eventsByEntity.set(entity, eventsToMap);
+  }
+  for (const evt of eventsToMap) {
+    entityMappings.entityByEvent.set(evt, entity);
+  }
+}