posthog-js-lite 3.4.2 → 3.5.1

package/src/context.ts

@@ -1,4 +1,4 @@
-import { utils } from '../../posthog-core'
+import { utils } from 'posthog-core'
 import { version } from '../package.json'
 
 export function getContext(window: Window | undefined): any {

package/src/patch.ts

@@ -0,0 +1,50 @@
+// import { patch } from 'rrweb/typings/utils'
+// copied from: https://github.com/PostHog/posthog-js/blob/main/src/extensions/replay/rrweb-plugins/patch.ts
+// which was copied from https://github.com/rrweb-io/rrweb/blob/8aea5b00a4dfe5a6f59bd2ae72bb624f45e51e81/packages/rrweb/src/utils.ts#L129
+// which was copied from https://github.com/getsentry/sentry-javascript/blob/b2109071975af8bf0316d3b5b38f519bdaf5dc15/packages/utils/src/object.ts
+
+// copied from: https://github.com/PostHog/posthog-js/blob/main/react/src/utils/type-utils.ts#L4
+export const isFunction = function (f: any): f is (...args: any[]) => any {
+  return typeof f === 'function'
+}
+
+export function patch(
+  source: { [key: string]: any },
+  name: string,
+  replacement: (...args: unknown[]) => unknown
+): () => void {
+  try {
+    if (!(name in source)) {
+      return () => {
+        //
+      }
+    }
+
+    const original = source[name] as () => unknown
+    const wrapped = replacement(original)
+
+    // Make sure it's a function first, as we need to attach an empty prototype for `defineProperties` to work
+    // otherwise it'll throw "TypeError: Object.defineProperties called on non-object"
+    if (isFunction(wrapped)) {
+      wrapped.prototype = wrapped.prototype || {}
+      Object.defineProperties(wrapped, {
+        __posthog_wrapped__: {
+          enumerable: false,
+          value: true,
+        },
+      })
+    }
+
+    source[name] = wrapped
+
+    return () => {
+      source[name] = original
+    }
+  } catch {
+    return () => {
+      //
+    }
+    // This can throw if multiple fill happens on a global object like XMLHttpRequest
+    // Fixes https://github.com/getsentry/sentry-javascript/issues/2043
+  }
+}

package/src/posthog-web.ts

@@ -1,19 +1,18 @@
-import {
-  PostHogCore,
-  PostHogFetchOptions,
-  PostHogFetchResponse,
-  PostHogPersistedProperty,
-} from '../../posthog-core/src'
+import { version } from '../package.json'
+
+import { PostHogCore, getFetch } from 'posthog-core'
+import type { PostHogFetchOptions, PostHogFetchResponse, PostHogPersistedProperty } from 'posthog-core'
+
 import { getContext } from './context'
 import { PostHogStorage, getStorage } from './storage'
-import { version } from '../package.json'
 import { PostHogOptions } from './types'
-import { getFetch } from 'posthog-core/src/utils'
+import { patch } from './patch'
 
 export class PostHog extends PostHogCore {
   private _storage: PostHogStorage
   private _storageCache: any
   private _storageKey: string
+  private _lastPathname: string = ''
 
   constructor(apiKey: string, options?: PostHogOptions) {
     super(apiKey, options)
@@ -27,6 +26,11 @@ export class PostHog extends PostHogCore {
     if (options?.preloadFeatureFlags !== false) {
       this.reloadFeatureFlags()
     }
+
+    if (options?.captureHistoryEvents && typeof window !== 'undefined') {
+      this._lastPathname = window?.location?.pathname || ''
+      this.setupHistoryEventTracking()
+    }
   }
 
   private getWindow(): Window | undefined {
@@ -84,4 +88,49 @@ export class PostHog extends PostHogCore {
       ...getContext(this.getWindow()),
     }
   }
+
+  private setupHistoryEventTracking(): void {
+    const window = this.getWindow()
+    if (!window) {
+      return
+    }
+
+    // Old fashioned, we could also use arrow functions but I think the closure for a patch is more reliable
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this
+
+    patch(window.history, 'pushState', (originalPushState) => {
+      return function patchedPushState(this: History, state: any, title: string, url?: string | URL | null): void {
+        ;(originalPushState as History['pushState']).call(this, state, title, url)
+        self.captureNavigationEvent('pushState')
+      }
+    })
+
+    patch(window.history, 'replaceState', (originalReplaceState) => {
+      return function patchedReplaceState(this: History, state: any, title: string, url?: string | URL | null): void {
+        ;(originalReplaceState as History['replaceState']).call(this, state, title, url)
+        self.captureNavigationEvent('replaceState')
+      }
+    })
+
+    // For popstate we need to listen to the event instead of overriding a method
+    window.addEventListener('popstate', () => {
+      this.captureNavigationEvent('popstate')
+    })
+  }
+
+  private captureNavigationEvent(navigationType: 'pushState' | 'replaceState' | 'popstate'): void {
+    const window = this.getWindow()
+    if (!window) {
+      return
+    }
+
+    const currentPathname = window.location.pathname
+
+    // Only capture pageview if the pathname has changed
+    if (currentPathname !== this._lastPathname) {
+      this.capture('$pageview', { navigation_type: navigationType })
+      this._lastPathname = currentPathname
+    }
+  }
 }

package/src/types.ts

@@ -1,7 +1,8 @@
-import { PostHogCoreOptions } from '../../posthog-core/src'
+import type { PostHogCoreOptions } from 'posthog-core'
 
 export type PostHogOptions = {
   autocapture?: boolean
   persistence?: 'localStorage' | 'sessionStorage' | 'cookie' | 'memory'
   persistence_name?: string
+  captureHistoryEvents?: boolean
 } & PostHogCoreOptions

package/test/posthog-web.spec.ts

@@ -12,7 +12,7 @@ describe('PostHogWeb', () => {
   beforeEach(() => {
     ;(global as any).window.fetch = fetch = jest.fn(async (url) => {
       let res: any = { status: 'ok' }
-      if (url.includes('decide')) {
+      if (url.includes('flags')) {
         res = {
           featureFlags: {
             'feature-1': true,
@@ -61,7 +61,7 @@ describe('PostHogWeb', () => {
 
       await waitForPromises()
 
-      expect(fetch).toHaveBeenCalledWith('https://us.i.posthog.com/decide/?v=3', {
+      expect(fetch).toHaveBeenCalledWith('https://us.i.posthog.com/flags/?v=2', {
         body: JSON.stringify({
           token: 'TEST_API_KEY',
           distinct_id: posthog.getDistinctId(),
@@ -95,4 +95,195 @@ describe('PostHogWeb', () => {
       })
     })
   })
+
+  describe('History API tracking', () => {
+    const originalPushState = window.history.pushState
+    const originalReplaceState = window.history.replaceState
+    let setPathname: (pathname: string) => void
+
+    beforeEach(() => {
+      const mockLocation = {
+        pathname: '/initial-path',
+      }
+
+      Object.defineProperty(window, 'location', {
+        value: mockLocation,
+        writable: true,
+      })
+
+      setPathname = (pathname: string) => {
+        mockLocation.pathname = pathname
+      }
+    })
+
+    // Reset history methods after each test
+    afterEach(() => {
+      window.history.pushState = originalPushState
+      window.history.replaceState = originalReplaceState
+
+      const popstateHandler = (): void => {}
+      window.addEventListener('popstate', popstateHandler)
+      window.removeEventListener('popstate', popstateHandler)
+    })
+
+    it('should not patch history methods when captureHistoryEvents is disabled', () => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const posthog = new PostHog('TEST_API_KEY', {
+        captureHistoryEvents: false,
+      })
+
+      expect(window.history.pushState).toBe(originalPushState)
+      expect(window.history.replaceState).toBe(originalReplaceState)
+    })
+
+    it('should patch history methods when captureHistoryEvents is enabled', () => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const posthog = new PostHog('TEST_API_KEY', {
+        captureHistoryEvents: true,
+      })
+
+      expect(window.history.pushState).not.toBe(originalPushState)
+      expect(window.history.replaceState).not.toBe(originalReplaceState)
+    })
+
+    it('should capture pageview events on pushState when pathname changes', async () => {
+      const posthog = new PostHog('TEST_API_KEY', {
+        captureHistoryEvents: true,
+        flushAt: 1,
+      })
+
+      const captureSpy = jest.spyOn(posthog, 'capture')
+
+      // Change pathname
+      setPathname('/test-page')
+      window.history.pushState({}, '', '/test-page')
+
+      expect(captureSpy).toHaveBeenCalledWith(
+        '$pageview',
+        expect.objectContaining({
+          navigation_type: 'pushState',
+        })
+      )
+    })
+
+    it('should not capture pageview events on pushState when pathname does not change', async () => {
+      const posthog = new PostHog('TEST_API_KEY', {
+        captureHistoryEvents: true,
+        flushAt: 1,
+      })
+
+      const captureSpy = jest.spyOn(posthog, 'capture')
+      captureSpy.mockClear()
+
+      // Don't change pathname
+      window.history.pushState({}, '', '/initial-path')
+
+      expect(captureSpy).not.toHaveBeenCalled()
+    })
+
+    it('should capture pageview events on replaceState when pathname changes', async () => {
+      const posthog = new PostHog('TEST_API_KEY', {
+        captureHistoryEvents: true,
+        flushAt: 1,
+      })
+
+      const captureSpy = jest.spyOn(posthog, 'capture')
+
+      // Change pathname
+      setPathname('/replaced-page')
+      window.history.replaceState({}, '', '/replaced-page')
+
+      expect(captureSpy).toHaveBeenCalledWith(
+        '$pageview',
+        expect.objectContaining({
+          navigation_type: 'replaceState',
+        })
+      )
+    })
+
+    it('should not capture pageview events on replaceState when pathname does not change', async () => {
+      const posthog = new PostHog('TEST_API_KEY', {
+        captureHistoryEvents: true,
+        flushAt: 1,
+      })
+
+      const captureSpy = jest.spyOn(posthog, 'capture')
+      captureSpy.mockClear()
+
+      // Don't change pathname
+      window.history.replaceState({}, '', '/initial-path')
+
+      expect(captureSpy).not.toHaveBeenCalled()
+    })
+
+    it('should capture pageview events on popstate when pathname changes', async () => {
+      const posthog = new PostHog('TEST_API_KEY', {
+        captureHistoryEvents: true,
+        flushAt: 1,
+      })
+
+      const captureSpy = jest.spyOn(posthog, 'capture')
+
+      // Change pathname
+      setPathname('/popstate-page')
+      window.dispatchEvent(new Event('popstate'))
+
+      expect(captureSpy).toHaveBeenCalledWith(
+        '$pageview',
+        expect.objectContaining({
+          navigation_type: 'popstate',
+        })
+      )
+    })
+
+    it('should not capture pageview events on popstate when pathname does not change', async () => {
+      const posthog = new PostHog('TEST_API_KEY', {
+        captureHistoryEvents: true,
+        flushAt: 1,
+      })
+
+      const captureSpy = jest.spyOn(posthog, 'capture')
+      captureSpy.mockClear()
+
+      // Don't change pathname
+      window.dispatchEvent(new Event('popstate'))
+
+      expect(captureSpy).not.toHaveBeenCalled()
+    })
+
+    it('should include navigation properties in capture call and rely on getCommonEventProperties', async () => {
+      const posthog = new PostHog('TEST_API_KEY', {
+        captureHistoryEvents: true,
+        flushAt: 1,
+      })
+
+      const commonEventProps = { $lib: 'posthog-js-lite', $lib_version: '1.0.0' }
+      const getCommonEventPropertiesSpy = jest
+        .spyOn(posthog, 'getCommonEventProperties')
+        .mockImplementation(() => commonEventProps)
+
+      const coreCaptureMethod = jest.spyOn(PostHog.prototype, 'capture')
+
+      // Change pathname
+      setPathname('/captured-page')
+      window.history.pushState({}, '', '/captured-page')
+
+      // Will use a mock here for now and rely on the implementation since the tests setup is very simple at the moment
+      expect(getCommonEventPropertiesSpy).toHaveBeenCalled()
+
+      const captureCall = coreCaptureMethod.mock.calls.find(
+        (call) => call[0] === '$pageview' && call[1] && call[1].navigation_type === 'pushState'
+      )
+
+      expect(captureCall).toBeDefined()
+
+      const navigationProperties = {
+        navigation_type: 'pushState',
+      }
+
+      if (captureCall) {
+        expect(captureCall[1]).toMatchObject(navigationProperties)
+      }
+    })
+  })
 })

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "incremental": false,
     "lib": ["DOM", "ES2020", "ES2022.Error"]
   }
 }