feat: session replay reads OTel session.id (HDX-5736) (#3438)

Author: SpencerTorres

.changeset/session-replay-otel-session-id.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+feat: List and play session replays from OpenTelemetry browser SDKs that send `session.id`

packages/app/src/DOMPlayer.tsx

@@ -35,6 +35,7 @@ import {
   createRrwebChunkAssembler,
   RRWebStreamRow,
 } from '@/utils/rrwebChunkAssembler';
+import type { SessionIdKey } from '@/utils/sessionId';
 
 import { FieldExpressionGenerator } from './hooks/useFieldExpressionGenerator';
 
@@ -101,7 +102,7 @@ const URLHoverCard = memo(({ url }: { url: string }) => {
 });
 
 export default function DOMPlayer({
-  config: { dateRange, serviceName, sessionId, sourceId },
+  config: { dateRange, serviceName, sessionId, sessionIdKey, sourceId },
   focus,
   setPlayerTime,
   playerState,
@@ -119,6 +120,7 @@ export default function DOMPlayer({
     dateRange: [Date, Date];
     serviceName: string;
     sessionId: string;
+    sessionIdKey?: SessionIdKey;
     sourceId: string;
   };
   focus: { ts: number; setBy: string } | undefined;
@@ -247,6 +249,7 @@ export default function DOMPlayer({
     {
       serviceName,
       sessionId,
+      sessionIdKey,
       sourceId,
       startDate: dateRange[0],
       endDate: dateRange[1],

packages/app/src/Playbar.tsx

@@ -5,7 +5,11 @@ import { keepPreviousData } from '@tanstack/react-query';
 
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
 
-import { SessionRow, sessionRowSchema } from './utils/sessions';
+import {
+  getSessionRowHttp,
+  SessionRow,
+  sessionRowSchema,
+} from './utils/sessions';
 import type { PlaybarMarker } from './PlaybarSlider';
 import { PlaybarSlider } from './PlaybarSlider';
 import { getShortUrl } from './utils';
@@ -71,9 +75,7 @@ export default function Playbar({
 
           const errorMessage = event['error.message'] ?? '';
 
-          const url = event['http.url'] ?? '';
-          const statusCode = Number(event['http.status_code'] ?? '');
-          const method = event['http.method'] ?? '';
+          const { url, statusCode, label } = getSessionRowHttp(event);
           const shortUrl = getShortUrl(url);
 
           const isNavigation =
@@ -96,7 +98,7 @@ export default function Playbar({
             description: isNavigation
               ? `Navigated to ${shortLocationHref}`
               : url.length > 0
-                ? `${statusCode} ${method}${url.length > 0 ? ` ${shortUrl}` : ''}`
+                ? `${label} ${shortUrl}`
                 : errorMessage != null && errorMessage.length > 0
                   ? errorMessage
                   : spanName === 'intercom.onShow'

packages/app/src/SessionEventList.tsx

@@ -16,7 +16,11 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import useRowWhere, { RowWhereResult } from '@/hooks/useRowWhere';
 
 import { useQueriedChartConfig } from './hooks/useChartConfig';
-import { SessionRow, sessionRowSchema } from './utils/sessions';
+import {
+  getSessionRowHttp,
+  SessionRow,
+  sessionRowSchema,
+} from './utils/sessions';
 import { useFormatTime } from './useFormatTime';
 import { formatmmss, getShortUrl } from './utils';
 
@@ -135,9 +139,7 @@ export const SessionEventList = ({
         const startOffset = new Date(timestamp).getTime();
         const endOffset = new Date(startOffset).getTime() + durationInMs;
 
-        const url = event['http.url'] ?? '';
-        const statusCode = Number(event['http.status_code'] ?? '');
-        const method = event['http.method'] ?? '';
+        const { url, method, statusCode, label } = getSessionRowHttp(event);
         const shortUrl = getShortUrl(url);
 
         const isNetworkRequest =
@@ -186,7 +188,7 @@ export const SessionEventList = ({
                 : spanName === 'console.warn'
                   ? 'console.warn'
                   : url.length > 0
-                    ? `${statusCode} ${method}`
+                    ? label
                     : spanName === 'intercom.onShow'
                       ? 'Intercom Chat Opened'
                       : isCustomEvent

packages/app/src/SessionSubpanel.tsx

@@ -31,6 +31,8 @@ import {
 } from '@tabler/icons-react';
 
 import { RowWhereResult, WithClause } from '@/hooks/useRowWhere';
+import type { SessionIdKey } from '@/utils/sessionId';
+import { buildSessionEventFilters } from '@/utils/sessions';
 
 import SearchWhereInput from './components/SearchInput/SearchWhereInput';
 import useFieldExpressionGenerator from './hooks/useFieldExpressionGenerator';
@@ -47,6 +49,7 @@ const MemoPlaybar = memo(Playbar);
 function useSessionChartConfigs({
   traceSource,
   rumSessionId,
+  sessionIdKey,
   where,
   whereLanguage,
   start,
@@ -55,6 +58,7 @@ function useSessionChartConfigs({
 }: {
   traceSource: TTraceSource;
   rumSessionId: string;
+  sessionIdKey?: SessionIdKey;
   where: string;
   whereLanguage?: SearchConditionLanguage;
   start: Date;
@@ -96,6 +100,15 @@ function useSessionChartConfigs({
         valueExpression: `${getTraceSourceFieldExpression(traceSource.eventAttributesExpression ?? 'SpanAttributes', 'http.url')}`,
         alias: 'http.url',
       },
+      ...['url.full', 'http.request.method', 'http.response.status_code'].map(
+        key => ({
+          valueExpression: getTraceSourceFieldExpression(
+            traceSource.eventAttributesExpression ?? 'SpanAttributes',
+            key,
+          ),
+          alias: key,
+        }),
+      ),
       {
         // Using toString here because Javascript does not have the precision to accurately represent this
         valueExpression: `toString(cityHash64(${traceSource.traceIdExpression}, ${traceSource.parentSpanIdExpression}, ${traceSource.spanIdExpression}))`,
@@ -140,43 +153,18 @@ function useSessionChartConfigs({
     ];
   }, [traceSource, getTraceSourceFieldExpression]);
 
-  // Events shown in the highlighted tab
-  const highlightedEventsFilter = useMemo(
-    () => ({
-      type: 'lucene' as const,
-      condition: `${traceSource.resourceAttributesExpression}.rum.sessionId:"${rumSessionId}"
-    AND (
-      ${traceSource.eventAttributesExpression}.http.status_code:>299
-      OR ${traceSource.eventAttributesExpression}.component:"error"
-      OR ${traceSource.spanNameExpression}:"routeChange"
-      OR ${traceSource.spanNameExpression}:"documentLoad"
-      OR ${traceSource.spanNameExpression}:"intercom.onShow"
-      OR ScopeName:"custom-action"
-    )`,
-    }),
-    [traceSource, rumSessionId],
+  const eventFilters = useMemo(
+    () =>
+      buildSessionEventFilters({
+        traceSource,
+        sessionId: rumSessionId,
+        sessionIdKey,
+      }),
+    [traceSource, rumSessionId, sessionIdKey],
   );
 
-  const allEventsFilter = useMemo(() => {
-    if (!getTraceSourceFieldExpression) return undefined;
-    return {
-      type: 'lucene' as const,
-      condition: `${traceSource.resourceAttributesExpression}.rum.sessionId:"${rumSessionId}"
-    AND (
-      ${traceSource.eventAttributesExpression}.http.status_code:*
-      OR ${traceSource.eventAttributesExpression}.component:"console"
-      OR ${traceSource.eventAttributesExpression}.component:"error"
-      OR ${traceSource.spanNameExpression}:"routeChange"
-      OR ${traceSource.spanNameExpression}:"documentLoad"
-      OR ${traceSource.spanNameExpression}:"intercom.onShow"
-      OR ScopeName:"custom-action"
-    )`,
-    };
-  }, [traceSource, rumSessionId, getTraceSourceFieldExpression]);
-
   const eventsConfig = useMemo<ChartConfigWithOptDateRange | undefined>(() => {
-    if (!getTraceSourceFieldExpression || !select || !allEventsFilter)
-      return undefined;
+    if (!getTraceSourceFieldExpression || !select) return undefined;
     return {
       select: select,
       from: traceSource.from,
@@ -193,9 +181,7 @@ function useSessionChartConfigs({
         limit: 4000,
         offset: 0,
       },
-      filters: [
-        tab === 'highlighted' ? highlightedEventsFilter : allEventsFilter,
-      ],
+      filters: eventFilters[tab === 'highlighted' ? 'highlighted' : 'all'],
     };
   }, [
     select,
@@ -205,8 +191,7 @@ function useSessionChartConfigs({
     where,
     whereLanguage,
     tab,
-    highlightedEventsFilter,
-    allEventsFilter,
+    eventFilters,
     getTraceSourceFieldExpression,
   ]);
 
@@ -242,7 +227,7 @@ export default function SessionSubpanel({
 }: {
   traceSource: TTraceSource;
   sessionSource: TSessionSource;
-  session: { serviceName: string };
+  session: { serviceName: string; sessionIdKey?: SessionIdKey };
   rumSessionId: string;
   start: Date;
   end: Date;
@@ -373,6 +358,7 @@ export default function SessionSubpanel({
   const { eventsConfig, aliasMap } = useSessionChartConfigs({
     traceSource,
     rumSessionId,
+    sessionIdKey: session.sessionIdKey,
     where: searchedQuery,
     whereLanguage,
     start,
@@ -519,6 +505,7 @@ export default function SessionSubpanel({
               serviceName: session.serviceName,
               sourceId: sessionSource.id,
               sessionId: rumSessionId,
+              sessionIdKey: session.sessionIdKey,
               dateRange: [start, end],
             }}
             playerSpeed={playerSpeed}

packages/app/src/__tests__/sessions.test.ts

@@ -71,6 +71,23 @@ describe('buildRRWebStreamChartConfig', () => {
     expect(config.dateRange).toEqual([new Date(1000), new Date(2000)]);
     expect(config.limit).toEqual({ limit: 1000000, offset: 0 });
   });
+
+  it('looks up OTel sessions by session.id', () => {
+    const otelConfig = buildRRWebStreamChartConfig({
+      source: config,
+      serviceName: 'my-service',
+      sessionId: 'session-1',
+      sessionIdKey: 'session.id',
+      startDate: new Date(1000),
+      endDate: new Date(2000),
+      limit: 1000000,
+      offset: 0,
+      getSessionSourceFieldExpression,
+    });
+    expect(otelConfig.where).toBe(
+      'ServiceName:"my-service" AND LogAttributes.session.id:"session-1"',
+    );
+  });
 });
 
 describe('fetchServiceScopeFilters', () => {