feat: signal we have wrapped fetch (#1083)

* feat: on network ready callback

* fix

* fix

* without changing feature flag callback

* reset

* make tests run locally for me

* first let's make similar things the same

* resolve the mess

* fix

* better message

* fix

* massively unwind this

cypress/e2e/session-recording.cy.ts

@@ -26,7 +26,7 @@ function ensureActivitySendsSnapshots() {
         .then(() => {
             cy.phCaptures({ full: true }).then((captures) => {
                 expect(captures.map((c) => c.event)).to.deep.equal(['$snapshot'])
-                expect(captures[0]['properties']['$snapshot_data']).to.have.length.above(14).and.below(39)
+                expect(captures[0]['properties']['$snapshot_data']).to.have.length.above(14).and.below(40)
                 // a meta and then a full snapshot
                 expect(captures[0]['properties']['$snapshot_data'][0].type).to.equal(4) // meta
                 expect(captures[0]['properties']['$snapshot_data'][1].type).to.equal(2) // full_snapshot
@@ -64,7 +64,7 @@ describe('Session recording', () => {
                         // should be a pageview and a $snapshot
                         expect(captures.map((c) => c.event)).to.deep.equal(['$pageview', '$snapshot'])
 
-                        expect(captures[1]['properties']['$snapshot_data']).to.have.length.above(33).and.below(39)
+                        expect(captures[1]['properties']['$snapshot_data']).to.have.length.above(33).and.below(40)
                         // a meta and then a full snapshot
                         expect(captures[1]['properties']['$snapshot_data'][0].type).to.equal(4) // meta
                         expect(captures[1]['properties']['$snapshot_data'][1].type).to.equal(2) // full_snapshot
@@ -78,6 +78,49 @@ describe('Session recording', () => {
         })
     })
 
+    describe('with network capture', () => {
+        beforeEach(() => {
+            start({
+                decideResponseOverrides: {
+                    config: { enable_collect_everything: false },
+                    isAuthenticated: false,
+                    sessionRecording: {
+                        endpoint: '/ses/',
+                        networkPayloadCapture: { recordBody: true },
+                    },
+                    capturePerformance: true,
+                },
+                url: './playground/cypress',
+                options: {
+                    loaded: (ph) => {
+                        ph.sessionRecording._forceAllowLocalhostNetworkCapture = true
+                    },
+                },
+            })
+
+            cy.wait('@recorder')
+        })
+
+        it('it sends network payloads', () => {
+            cy.intercept('https://example.com', 'success').as('example.com')
+            cy.get('[data-cy-network-call-button]').click()
+            cy.wait('@example.com')
+            cy.wait('@session-recording')
+            cy.phCaptures({ full: true }).then((captures) => {
+                const snapshots = captures.filter((c) => c.event === '$snapshot')
+
+                const snapshotTypes: number[] = []
+                for (const snapshot of snapshots) {
+                    for (const snapshotData of snapshot.properties['$snapshot_data']) {
+                        snapshotTypes.push(snapshotData.type)
+                    }
+                }
+                // yay, includes type 6 network data
+                expect(snapshotTypes.filter((x) => x === 6)).to.have.length.above(0)
+            })
+        })
+    })
+
     describe('array.js', () => {
         beforeEach(() => {
             start({
@@ -112,7 +155,7 @@ describe('Session recording', () => {
             cy.posthog().then((ph) => {
                 ph.stopSessionRecording()
             })
-            cy.resetPhCaptures()
+
             ensureRecordingIsStopped()
 
             // restarting recording

playground/cypress/index.html

@@ -15,6 +15,10 @@
         Send custom event
     </button>
 
+        <button data-cy-network-call-button onclick="fetch('https://example.com')">
+        Make network call
+    </button>
+
     <br />
 
     <button data-cy-feature-flag-button onclick="console.log(posthog.isFeatureEnabled('some-feature'))">

src/__tests__/extensions/replay/config.test.ts

@@ -34,7 +34,7 @@ describe('config', () => {
                 const cleaned = networkOptions.maskRequestFn!({
                     name: 'something',
                     requestHeaders: undefined,
-                })
+                } as Partial<CapturedNetworkRequest> as CapturedNetworkRequest)
                 expect(cleaned).toEqual({
                     name: 'something',
                     requestHeaders: undefined,
@@ -57,7 +57,7 @@ describe('config', () => {
                         Authorization: 'Bearer 123',
                         'content-type': 'application/json',
                     },
-                })
+                } as Partial<CapturedNetworkRequest> as CapturedNetworkRequest)
                 expect(cleaned).toEqual({
                     name: 'edited',
                     requestHeaders: {
@@ -102,7 +102,7 @@ describe('config', () => {
                 ],
             ])('ignores ingestion paths', (capturedRequest, expected) => {
                 const networkOptions = buildNetworkRequestOptions(defaultConfig(), {})
-                const x = networkOptions.maskRequestFn!(capturedRequest)
+                const x = networkOptions.maskRequestFn!(capturedRequest as CapturedNetworkRequest)
                 expect(x).toEqual(expected)
             })
 
@@ -115,7 +115,7 @@ describe('config', () => {
                         'content-length': '1000001',
                     },
                     requestBody: 'something very large',
-                })
+                } as Partial<CapturedNetworkRequest> as CapturedNetworkRequest)
                 expect(cleaned).toEqual({
                     name: 'something',
                     requestHeaders: {
@@ -135,7 +135,7 @@ describe('config', () => {
                         'content-length': '1000001',
                     },
                     responseBody: 'something very large',
-                })
+                } as Partial<CapturedNetworkRequest> as CapturedNetworkRequest)
                 expect(cleaned).toEqual({
                     name: 'something',
                     responseHeaders: {
@@ -154,7 +154,7 @@ describe('config', () => {
                         'content-type': 'application/json',
                     },
                     requestBody: 'some body that has no content length',
-                })
+                } as Partial<CapturedNetworkRequest> as CapturedNetworkRequest)
                 expect(cleaned).toEqual({
                     name: 'something',
                     requestHeaders: {
@@ -172,7 +172,7 @@ describe('config', () => {
                         'content-type': 'application/json',
                     },
                     requestBody: 'a'.repeat(1000001),
-                })
+                } as Partial<CapturedNetworkRequest> as CapturedNetworkRequest)
                 expect(cleaned).toEqual({
                     name: 'something',
                     requestHeaders: {
@@ -193,7 +193,7 @@ describe('config', () => {
                     Authorization: 'Bearer 123',
                     'content-type': 'application/json',
                 },
-            })
+            } as Partial<CapturedNetworkRequest> as CapturedNetworkRequest)
             expect(cleaned).toEqual({
                 name: 'something',
                 requestHeaders: {
@@ -221,7 +221,7 @@ describe('config', () => {
                     Authorization: 'Bearer 123',
                     'content-type': 'application/json',
                 },
-            })
+            } as Partial<CapturedNetworkRequest> as CapturedNetworkRequest)
             expect(cleaned).toEqual({
                 name: 'something',
                 requestHeaders: {
@@ -240,7 +240,7 @@ describe('config', () => {
                 },
                 requestBody: 'some body with password',
                 responseBody: 'some body with password',
-            })
+            } as Partial<CapturedNetworkRequest> as CapturedNetworkRequest)
             expect(cleaned).toEqual({
                 name: 'something',
                 requestHeaders: {
@@ -293,7 +293,7 @@ describe('config', () => {
                     AuThOrIzAtIoN: 'Bearer 123',
                     'content-type': 'application/json',
                 },
-            })
+            } as Partial<CapturedNetworkRequest> as CapturedNetworkRequest)
             expect(cleaned).toEqual({
                 name: 'something',
                 requestHeaders: {
@@ -312,7 +312,7 @@ describe('config', () => {
                 },
                 requestBody: 'take payment with CC 4242 4242 4242 4242',
                 responseBody: 'take payment with CC 4242 4242 4242 4242',
-            })
+            } as Partial<CapturedNetworkRequest> as CapturedNetworkRequest)
             expect(cleaned).toEqual({
                 name: 'something',
                 requestHeaders: {

src/__tests__/extensions/replay/sessionrecording.test.ts

@@ -848,7 +848,6 @@ describe('SessionRecording', () => {
             describe('onSessionId Callbacks', () => {
                 let mockCallback: Mock<SessionIdChangedCallback>
                 let unsubscribeCallback: () => void
-
                 beforeEach(() => {
                     sessionManager = new SessionIdManager(config, new PostHogPersistence(config))
                     posthog.sessionManager = sessionManager

src/__tests__/extensions/surveys.test.ts

@@ -1,4 +1,3 @@
-import 'regenerator-runtime/runtime'
 import { generateSurveys, renderSurveysPreview, renderFeedbackWidgetPreview } from '../../extensions/surveys'
 import { createShadow } from '../../extensions/surveys/surveys-utils'
 import { Survey, SurveyQuestionType, SurveyType } from '../../posthog-surveys-types'

src/__tests__/helpers/posthog-instance.ts

@@ -1,12 +1,11 @@
 // The library depends on having the module initialized before it can be used.
 
-import { v4 } from 'uuid'
 import { PostHog } from '../../posthog-core'
-import 'regenerator-runtime/runtime'
 import { PostHogConfig } from '../../types'
+import { uuidv7 } from '../../uuidv7'
 
 export const createPosthogInstance = async (
-    token: string = v4(),
+    token: string = uuidv7(),
     config: Partial<PostHogConfig> = {}
 ): Promise<PostHog> => {
     // We need to create a new instance of the library for each test, to ensure

src/__tests__/identify.test.ts

@@ -1,6 +1,6 @@
-import { v4 } from 'uuid'
 import { createPosthogInstance } from './helpers/posthog-instance'
 import { logger } from '../utils/logger'
+import { uuidv7 } from '../uuidv7'
 jest.mock('../utils/logger')
 
 describe('identify', () => {
@@ -10,7 +10,7 @@ describe('identify', () => {
 
     it('should persist the distinct_id', async () => {
         // arrange
-        const token = v4()
+        const token = uuidv7()
         const posthog = await createPosthogInstance(token)
         const distinctId = '123'
 
@@ -25,7 +25,7 @@ describe('identify', () => {
 
     it('should convert a numeric distinct_id to a string', async () => {
         // arrange
-        const token = v4()
+        const token = uuidv7()
         const posthog = await createPosthogInstance(token)
         const distinctIdNum = 123
         const distinctIdString = '123'

src/extensions/replay/config.ts

@@ -182,11 +182,17 @@ export const buildNetworkRequestOptions = (
     instanceConfig: PostHogConfig,
     remoteNetworkOptions: Pick<NetworkRecordOptions, 'recordHeaders' | 'recordBody' | 'recordPerformance'>
 ): NetworkRecordOptions => {
-    const config = instanceConfig.session_recording as NetworkRecordOptions
+    const config: NetworkRecordOptions = {
+        payloadSizeLimitBytes: defaultNetworkOptions.payloadSizeLimitBytes,
+        performanceEntryTypeToObserve: [...defaultNetworkOptions.performanceEntryTypeToObserve],
+    }
     // client can always disable despite remote options
-    const canRecordHeaders = config.recordHeaders === false ? false : remoteNetworkOptions.recordHeaders
-    const canRecordBody = config.recordBody === false ? false : remoteNetworkOptions.recordBody
-    const canRecordPerformance = config.recordPerformance === false ? false : remoteNetworkOptions.recordPerformance
+    const canRecordHeaders =
+        instanceConfig.session_recording.recordHeaders === false ? false : remoteNetworkOptions.recordHeaders
+    const canRecordBody =
+        instanceConfig.session_recording.recordBody === false ? false : remoteNetworkOptions.recordBody
+    const canRecordPerformance =
+        instanceConfig.capture_performance === false ? false : remoteNetworkOptions.recordPerformance
 
     const payloadLimiter = limitPayloadSize(config)
 

src/loader-recorder.ts

@@ -78,6 +78,10 @@ export function patch(
                     enumerable: false,
                     value: original,
                 },
+                __posthog_wrapped__: {
+                    enumerable: false,
+                    value: true,
+                },
             })
         }
 

src/types.ts

@@ -404,12 +404,18 @@ export type NetworkRecordOptions = {
     recordHeaders?: boolean | { request: boolean; response: boolean }
     recordBody?: boolean | string[] | { request: boolean | string[]; response: boolean | string[] }
     recordInitialRequests?: boolean
-    // whether to record PerformanceEntry events for network requests
+    /**
+     * whether to record PerformanceEntry events for network requests
+     */
     recordPerformance?: boolean
-    // the PerformanceObserver will only observe these entry types
+    /**
+     * the PerformanceObserver will only observe these entry types
+     */
     performanceEntryTypeToObserve: string[]
-    // the maximum size of the request/response body to record
-    // NB this will be at most 1MB even if set larger
+    /**
+     * the maximum size of the request/response body to record
+     * NB this will be at most 1MB even if set larger
+     */
     payloadSizeLimitBytes: number
 }