fix: make it clearer when capture is before PH init

frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/react'
+import {
+    BodyDisplay,
+    HeadersDisplay,
+    ItemPerformanceEvent,
+} from 'scenes/session-recordings/player/inspector/components/ItemPerformanceEvent'
+
+import { mswDecorator } from '~/mocks/browser'
+
+const meta: Meta<typeof ItemPerformanceEvent> = {
+    title: 'Components/ItemPerformanceEvent',
+    component: ItemPerformanceEvent,
+    decorators: [
+        mswDecorator({
+            get: {},
+        }),
+    ],
+}
+export default meta
+
+export function InitialHeadersDisplay(): JSX.Element {
+    return <HeadersDisplay request={undefined} response={undefined} isInitial={true} />
+}
+
+export function InitialBodyDisplay(): JSX.Element {
+    return (
+        <BodyDisplay
+            content={undefined}
+            headers={undefined}
+            emptyMessage="Response captured before PostHog was initialized"
+        />
+    )
+}

frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx

@@ -364,6 +364,7 @@ export function ItemPerformanceEvent({
                                                 <HeadersDisplay
                                                     request={item.request_headers}
                                                     response={item.response_headers}
+                                                    isInitial={item.is_initial}
                                                 />
                                             ),
                                         },
@@ -374,7 +375,11 @@ export function ItemPerformanceEvent({
                                                 <BodyDisplay
                                                     content={item.request_body}
                                                     headers={item.request_headers}
-                                                    emptyMessage="No request body captured"
+                                                    emptyMessage={
+                                                        item.is_initial
+                                                            ? 'Request captured before PostHog was initialized'
+                                                            : 'No request body captured'
+                                                    }
                                                 />
                                             ),
                                         },
@@ -386,7 +391,11 @@ export function ItemPerformanceEvent({
                                                       <BodyDisplay
                                                           content={item.response_body}
                                                           headers={item.response_headers}
-                                                          emptyMessage="No response body captured"
+                                                          emptyMessage={
+                                                              item.is_initial
+                                                                  ? 'Response captured before PostHog was initialized'
+                                                                  : 'No response body captured'
+                                                          }
                                                       />
                                                   ),
                                               }
@@ -424,7 +433,7 @@ export function ItemPerformanceEvent({
     )
 }
 
-function BodyDisplay({
+export function BodyDisplay({
     content,
     headers,
     emptyMessage,
@@ -454,23 +463,26 @@ function BodyDisplay({
     )
 }
 
-function HeadersDisplay({
+export function HeadersDisplay({
     request,
     response,
+    isInitial,
 }: {
     request: Record<string, string> | undefined
     response: Record<string, string> | undefined
+    isInitial?: boolean
 }): JSX.Element | null {
+    const emptyMessage = isInitial ? 'captured before PostHog was initialized' : 'No headers captured'
     return (
         <div className="flex flex-col w-full">
             <div>
                 <h4 className="font-semibold">Request Headers</h4>
-                <SimpleKeyValueList item={request || {}} emptyMessage="No headers captured" />
+                <SimpleKeyValueList item={request || {}} emptyMessage={emptyMessage} />
             </div>
             <LemonDivider dashed />
             <div>
                 <h4 className="font-semibold">Response Headers</h4>
-                <SimpleKeyValueList item={response || {}} emptyMessage="No headers captured" />
+                <SimpleKeyValueList item={response || {}} emptyMessage={emptyMessage} />
             </div>
         </div>
     )