feat: browser events in trace waterfall (#3443)

Closes HDX-5774 Stacks on #3440

## Summary

Newer OTel browser SDKs no longer put network timing on fetch and XHR spans. They send one `browser.resource_timing` log per request instead, and the click that started the request is a separate log with no trace id. This draws the timing logs as dots on their spans, like the old SDK's span events, and adds a "Triggered by" row for the click. Old-SDK and backend traces are unchanged.

### Changes
- **Gate** (`hooks/useBrowserTraceEvents.ts`, `utils/browserTraceContext.ts`): both queries run only for traces with a `browser.document.url.full` span, when the correlated log source has Event Name, Event Attributes, Trace Id and Span Id expressions. They start after the waterfall loads and fail quietly.
- **Timing dots** (`utils/resourceTimingMarkers.ts`): `browser.resource_timing` logs are read by TraceId and drawn on their span through the existing span event markers, named like sdk-trace-web's events. The last dot's tooltip shows duration, sizes and protocol, since new-SDK spans don't carry the response size. Dots follow the **Span events** chip.
- **Timing rows**: once the dots load, the log rows they replace leave the waterfall and the log count, so they show for about one round trip first. They stay when the dots aren't visible (**Spans** or **Span events** off, a logs filter) or when the row is selected.
- **Triggered by** (`utils/traceTriggerClick.ts`): the latest `browser.user_action.click` with the same `session.id` and service in the 250 ms before the first browser span, shown first as "Triggered by: Clicked … · 3ms before". Clicking it opens the click log. It doesn't match on page URL: the SDK records the click's URL before the handler changes the route or query string.
- **Shared code**: E2's session log query parts move to `getSessionLogEventQueryParts` (`utils/sessionLogEvents.ts`) for the trigger query. E2's SQL is unchanged.

### Screenshots

Example of a browser event triggering this trace, along with timing events on the span:
<img width="1418" height="411" alt="Example of a browser event triggering this trace, along with timing events on the span" src="https://github.com/user-attachments/assets/3433d341-2b0c-4fc6-b3dd-cf06ad8f9585" />

Author: SpencerTorres

.changeset/trace-waterfall-browser-events.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+feat: Trace waterfall shows OpenTelemetry browser SDK request timings as dots on fetch and XHR spans, and the click that triggered a browser trace

packages/app/src/components/DBTraceWaterfallChart.tsx

@@ -35,6 +35,7 @@ import {
   IconChevronsDown,
   IconChevronsRight,
   IconLogs,
+  IconPointer,
 } from '@tabler/icons-react';
 
 import { ContactSupportText } from '@/components/ContactSupportText';
@@ -51,6 +52,7 @@ import {
   TRACE_WATERFALL_FETCH_LIMIT,
   TRACE_WATERFALL_ROW_LIMIT,
 } from '@/components/traceWaterfallLimits';
+import { useBrowserTraceEvents } from '@/hooks/useBrowserTraceEvents';
 import { useColumns } from '@/hooks/useMetadata';
 import useOffsetPaginatedQuery from '@/hooks/useOffsetPaginatedQuery';
 import {
@@ -107,6 +109,7 @@ export type SpanRow = {
     Attributes: Record<string, any>;
   }>;
   __hdx_hidden?: boolean | 1 | 0;
+  triggeredBy?: string;
 };
 
 type TimestampedRow = {
@@ -785,11 +788,12 @@ export function DBTraceWaterfallChartContainer({
     logColumns?.some(column => column.name === 'SeverityNumber') ?? false;
 
   const {
-    rows: logRowsData,
+    rows: fetchedLogRows,
     isFetching: logIsFetching,
     meta: logRowsMeta,
     filterError: logFilterError,
     fatalError: logFatalError,
+    isTruncated: logIsTruncated,
   } = useFilteredEventsAroundFocus({
     // search data if logTableModel exist
     // search invalid date range if no logTableModel(react hook need execute no matter what)
@@ -816,8 +820,33 @@ export function DBTraceWaterfallChartContainer({
   // shown), otherwise the fatal error (no logs could be loaded at all).
   const logError = logFilterError ?? logFatalError;
 
+  const [showSpanEvents, setShowSpanEvents] = useState(true);
+  const [showSpans, setShowSpans] = useState(true);
+  const [showLogs, setShowLogs] = useState(true);
+
+  const {
+    logRows: logRowsData,
+    resourceTimingBySpanId,
+    triggerRow,
+  } = useBrowserTraceEvents({
+    traceRows: traceRowsData,
+    logRows: fetchedLogRows,
+    logSource: logTableSource,
+    traceId,
+    highlightedRowWhere,
+    initialRowHighlightHint,
+    // Only while the dots show. A log filter asks for the rows it matches. A
+    // capped list can keep a log that shares a timing log's key and drop the
+    // timing log, and the fold would then hide that other log.
+    foldTimingRows: showSpans && showSpanEvents && !logWhere && !logIsTruncated,
+    enabled: !traceIsFetching,
+  });
+
   const rows: any[] = useMemo(() => {
-    const nextRows: Array<(typeof traceRowsData)[number] & TimestampedRow> = [
+    // The trigger row goes first so a click with the same timestamp as the
+    // root span sorts before it (the sort is stable).
+    const nextRows: TimestampedRow[] = [
+      ...(triggerRow ? [triggerRow] : []),
       ...traceRowsData,
       ...logRowsData,
     ];
@@ -833,7 +862,7 @@ export function DBTraceWaterfallChartContainer({
     });
 
     return nextRows;
-  }, [traceRowsData, logRowsData]);
+  }, [triggerRow, traceRowsData, logRowsData]);
 
   const validSpanIDs = useMemo(() => {
     return new Set(
@@ -983,9 +1012,6 @@ export function DBTraceWaterfallChartContainer({
   };
 
   const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set());
-  const [showSpanEvents, setShowSpanEvents] = useState(true);
-  const [showSpans, setShowSpans] = useState(true);
-  const [showLogs, setShowLogs] = useState(true);
 
   const { nodesMap, flattenedNodes, parentIdsByLevel } = useMemo(() => {
     const rootNodes: Node[] = [];
@@ -1128,6 +1154,8 @@ export function DBTraceWaterfallChartContainer({
   const visibleNodes = useMemo(() => {
     if (showSpans && showLogs) return flattenedNodes;
     return flattenedNodes.filter(node => {
+      // The click belongs with the spans it started, not with the logs.
+      if (node.triggeredBy) return showSpans;
       if (node.type === SourceKind.Log) return showLogs;
       return showSpans;
     });
@@ -1137,7 +1165,7 @@ export function DBTraceWaterfallChartContainer({
     node => node.type !== SourceKind.Log,
   ).length;
   const logCount = visibleNodes.filter(
-    node => node.type === SourceKind.Log,
+    node => node.type === SourceKind.Log && !node.triggeredBy,
   ).length;
   const errorCount = visibleNodes.filter(
     node => getRowSeverity(node) === 'error',
@@ -1178,6 +1206,7 @@ export function DBTraceWaterfallChartContainer({
           id,
           type,
           aliasWith,
+          triggeredBy,
         } = result;
         let body = `${_body}`;
         try {
@@ -1193,21 +1222,34 @@ export function DBTraceWaterfallChartContainer({
         const httpUrl = isRpcSpan(spanAttributes)
           ? undefined
           : getHttpUrl(spanAttributes);
-        const displayText = httpUrl ? `${body} ${httpUrl}` : body;
+        const displayText =
+          triggeredBy ?? (httpUrl ? `${body} ${httpUrl}` : body);
+        const startedAt = !isNaN(startOffset)
+          ? ` | Started at ${formatTime(new Date(startOffset), { format: 'withMs' })}`
+          : '';
 
         // Process span events into markers (only if showSpanEvents is enabled)
-        const markers =
-          showSpanEvents && result.SpanEvents
-            ? result.SpanEvents.map(spanEvent => {
+        const markers = showSpanEvents
+          ? [
+              ...(result.SpanEvents ?? []).map(spanEvent => {
                 const epochMs = parseTimestampToMs(spanEvent.Timestamp);
                 return {
                   timestamp: epochMs - minOffset,
                   epochMs,
                   name: spanEvent.Name,
                   attributes: spanEvent.Attributes || {},
                 };
-              })
-            : [];
+              }),
+              // Log rows carry their parent span's SpanId.
+              ...(type !== SourceKind.Log
+                ? (resourceTimingBySpanId.get(result.SpanId) ?? [])
+                : []
+              ).map(marker => ({
+                ...marker,
+                timestamp: marker.epochMs - minOffset,
+              })),
+            ]
+          : [];
 
         const severity = getRowSeverity(result);
         const isError = severity === 'error';
@@ -1316,7 +1358,13 @@ export function DBTraceWaterfallChartContainer({
                 )}
 
                 <Group gap={0} wrap="nowrap">
-                  {type === SourceKind.Log ? (
+                  {triggeredBy ? (
+                    <IconPointer
+                      size={14}
+                      className="align-middle me-2"
+                      aria-label="Triggering click"
+                    />
+                  ) : type === SourceKind.Log ? (
                     <IconLogs
                       size={14}
                       className="align-middle me-2"
@@ -1327,7 +1375,10 @@ export function DBTraceWaterfallChartContainer({
                     size="xxs"
                     truncate="end"
                     span
-                    title={`${serviceName}${httpUrl ? ` ${displayText}` : ''}`}
+                    title={
+                      triggeredBy ??
+                      `${serviceName}${httpUrl ? ` ${displayText}` : ''}`
+                    }
                     role="button"
                   >
                     {serviceName && <>{serviceName} </>}
@@ -1347,7 +1398,9 @@ export function DBTraceWaterfallChartContainer({
               aliasWith,
               start,
               end,
-              tooltip: `${displayText} ${tookMs >= 0 ? `took ${tookMs.toFixed(4)}ms` : ''} ${status ? `| Status: ${status}` : ''}${!isNaN(startOffset) ? ` | Started at ${formatTime(new Date(startOffset), { format: 'withMs' })}` : ''}`,
+              tooltip: triggeredBy
+                ? `${triggeredBy}${startedAt}`
+                : `${displayText} ${tookMs >= 0 ? `took ${tookMs.toFixed(4)}ms` : ''} ${status ? `| Status: ${status}` : ''}${startedAt}`,
               color: 'var(--color-text-inverted)',
               backgroundColor: barColor({
                 isHighlighted,
@@ -1373,6 +1426,7 @@ export function DBTraceWaterfallChartContainer({
       highlightedRowWhere,
       minOffset,
       onClick,
+      resourceTimingBySpanId,
       serviceColorMap,
       showSpanEvents,
       toggleCollapse,

packages/app/src/components/TimelineChart/TimelineSpanEventMarker.tsx

@@ -81,6 +81,7 @@ export const TimelineSpanEventMarker = memo(function ({
       }}
     >
       <div
+        data-testid="span-event-marker"
         style={{
           position: 'absolute',
           left: `${markerPosition.toFixed(6)}%`,