@leanbase-giangnd/js 0.0.0

package/src/leanbase.ts

@@ -0,0 +1,457 @@
+import {
+    PostHogCore,
+    getFetch,
+    isEmptyObject,
+    isEmptyString,
+    isNumber,
+    isObject,
+    isString,
+    isUndefined,
+} from '@posthog/core'
+import type {
+    PostHogEventProperties,
+    PostHogFetchOptions,
+    PostHogFetchResponse,
+    PostHogPersistedProperty,
+} from '@posthog/core'
+import {
+    LeanbaseConfig,
+    LeanbasegCaptureOptions as LeanbaseCaptureOptions,
+    RemoteConfig,
+    CaptureResult,
+    Properties,
+} from './types'
+import { LeanbasePersistence } from './leanbase-persistence'
+import {
+    addEventListener,
+    copyAndTruncateStrings,
+    document,
+    extend,
+    isCrossDomainCookie,
+    navigator,
+    userAgent,
+} from './utils'
+import Config from './config'
+import { Autocapture } from './autocapture'
+import { logger } from './leanbase-logger'
+import { COOKIELESS_MODE_FLAG_PROPERTY, USER_STATE } from './constants'
+import { getEventProperties } from './utils/event-utils'
+import { SessionIdManager } from './sessionid'
+import { SessionPropsManager } from './session-props'
+import { uuidv7 } from './uuidv7'
+import { PageViewManager } from './page-view'
+import { ScrollManager } from './scroll-manager'
+import { isLikelyBot } from './utils/blocked-uas'
+import { SessionRecording } from './extensions/replay/session-recording'
+
+const defaultConfig = (): LeanbaseConfig => ({
+    host: 'https://i.leanbase.co',
+    token: '',
+    autocapture: true,
+    rageclick: true,
+    disable_session_recording: false,
+    session_recording: {
+        // Force-enable session recording locally unless explicitly disabled via config
+        forceClientRecording: true,
+    },
+    enable_recording_console_log: undefined,
+    persistence: 'localStorage+cookie',
+    capture_pageview: 'history_change',
+    capture_pageleave: 'if_capture_pageview',
+    persistence_name: '',
+    mask_all_element_attributes: false,
+    cookie_expiration: 365,
+    cross_subdomain_cookie: isCrossDomainCookie(document?.location),
+    custom_campaign_params: [],
+    custom_personal_data_properties: [],
+    disable_persistence: false,
+    mask_personal_data_properties: false,
+    secure_cookie: window?.location?.protocol === 'https:',
+    mask_all_text: false,
+    bootstrap: {},
+    session_idle_timeout_seconds: 30 * 60,
+    save_campaign_params: true,
+    save_referrer: true,
+    opt_out_useragent_filter: false,
+    properties_string_max_length: 65535,
+    loaded: () => {},
+})
+
+export class Leanbase extends PostHogCore {
+    config: LeanbaseConfig
+    scrollManager: ScrollManager
+    pageViewManager: PageViewManager
+
+    replayAutocapture?: Autocapture
+    persistence?: LeanbasePersistence
+    sessionPersistence?: LeanbasePersistence
+    sessionManager?: SessionIdManager
+    sessionPropsManager?: SessionPropsManager
+    sessionRecording?: SessionRecording
+    isRemoteConfigLoaded?: boolean
+    personProcessingSetOncePropertiesSent = false
+    isLoaded: boolean = false
+    initialPageviewCaptured: boolean
+    visibilityStateListener: (() => void) | null
+
+    constructor(token: string, config?: Partial<LeanbaseConfig>) {
+        const mergedConfig = extend(defaultConfig(), config || {}, {
+            token,
+        })
+        super(token, mergedConfig)
+        this.config = mergedConfig as LeanbaseConfig
+        this.visibilityStateListener = null
+        this.initialPageviewCaptured = false
+        this.scrollManager = new ScrollManager(this)
+        this.pageViewManager = new PageViewManager(this)
+        this.init(token, mergedConfig)
+    }
+
+    init(token: string, config: Partial<LeanbaseConfig>) {
+        this.setConfig(
+            extend(defaultConfig(), config, {
+                token,
+            })
+        )
+        this.isLoaded = true
+        this.persistence = new LeanbasePersistence(this.config)
+
+        if (this.config.cookieless_mode !== 'always') {
+            this.sessionManager = new SessionIdManager(this)
+            this.sessionPropsManager = new SessionPropsManager(this, this.sessionManager, this.persistence)
+        }
+
+        this.replayAutocapture = new Autocapture(this)
+        this.replayAutocapture.startIfEnabled()
+
+        if (this.sessionManager && this.config.cookieless_mode !== 'always') {
+            this.sessionRecording = new SessionRecording(this)
+            this.sessionRecording.startIfEnabledOrStop()
+        }
+
+        if (this.config.preloadFeatureFlags !== false) {
+            this.reloadFeatureFlags()
+        }
+
+        this.config.loaded?.(this)
+        if (this.config.capture_pageview) {
+            setTimeout(() => {
+                if (this.config.cookieless_mode === 'always') {
+                    this.captureInitialPageview()
+                }
+            }, 1)
+        }
+
+        addEventListener(document, 'DOMContentLoaded', () => {
+            this.loadRemoteConfig()
+        })
+        addEventListener(window, 'onpagehide' in self ? 'pagehide' : 'unload', this.capturePageLeave.bind(this), {
+            passive: false,
+        })
+    }
+
+    captureInitialPageview(): void {
+        if (!document) {
+            return
+        }
+
+        if (document.visibilityState !== 'visible') {
+            if (!this.visibilityStateListener) {
+                this.visibilityStateListener = this.captureInitialPageview.bind(this)
+                addEventListener(document, 'visibilitychange', this.visibilityStateListener)
+            }
+
+            return
+        }
+
+        if (!this.initialPageviewCaptured) {
+            this.initialPageviewCaptured = true
+            this.capture('$pageview', { title: document.title })
+
+            if (this.visibilityStateListener) {
+                document.removeEventListener('visibilitychange', this.visibilityStateListener)
+                this.visibilityStateListener = null
+            }
+        }
+    }
+
+    capturePageLeave() {
+        const { capture_pageleave, capture_pageview } = this.config
+        if (
+            capture_pageleave === true ||
+            (capture_pageleave === 'if_capture_pageview' &&
+                (capture_pageview === true || capture_pageview === 'history_change'))
+        ) {
+            this.capture('$pageleave')
+        }
+    }
+
+    async loadRemoteConfig() {
+        if (!this.isRemoteConfigLoaded) {
+            const remoteConfig = await this.reloadRemoteConfigAsync()
+            if (remoteConfig) {
+                this.onRemoteConfig(remoteConfig as RemoteConfig)
+            }
+        }
+    }
+
+    onRemoteConfig(config: RemoteConfig): void {
+        if (!(document && document.body)) {
+            setTimeout(() => {
+                this.onRemoteConfig(config)
+            }, 500)
+            return
+        }
+
+        this.isRemoteConfigLoaded = true
+        this.replayAutocapture?.onRemoteConfig(config)
+        this.sessionRecording?.onRemoteConfig(config)
+    }
+
+    fetch(url: string, options: PostHogFetchOptions): Promise<PostHogFetchResponse> {
+        const fetchFn = getFetch()
+        if (!fetchFn) {
+            return Promise.reject(new Error('Fetch API is not available in this environment.'))
+        }
+
+        return fetchFn(url, options)
+    }
+
+    setConfig(config: Partial<LeanbaseConfig>): void {
+        const oldConfig = { ...this.config }
+        if (isObject(config)) {
+            extend(this.config, config)
+            this.persistence?.update_config(this.config, oldConfig)
+            this.replayAutocapture?.startIfEnabled()
+            this.sessionRecording?.startIfEnabledOrStop()
+        }
+
+        const isTempStorage = this.config.persistence === 'sessionStorage' || this.config.persistence === 'memory'
+        this.sessionPersistence = isTempStorage
+            ? this.persistence
+            : new LeanbasePersistence({ ...this.config, persistence: 'sessionStorage' })
+    }
+
+    getLibraryId(): string {
+        return 'leanbase'
+    }
+
+    getLibraryVersion(): string {
+        return Config.LIB_VERSION
+    }
+
+    getCustomUserAgent(): void {
+        return
+    }
+
+    getPersistedProperty<T>(key: PostHogPersistedProperty): T | undefined {
+        return this.persistence?.get_property(key)
+    }
+
+    get_property<T = any>(key: string): T | undefined {
+        return this.persistence?.get_property(key)
+    }
+
+    setPersistedProperty<T>(key: PostHogPersistedProperty, value: T | null): void {
+        this.persistence?.set_property(key, value)
+    }
+
+    calculateEventProperties(
+        eventName: string,
+        eventProperties: PostHogEventProperties,
+        timestamp: Date,
+        uuid: string,
+        readOnly?: boolean
+    ): Properties {
+        if (!this.persistence || !this.sessionPersistence) {
+            return eventProperties
+        }
+
+        timestamp = timestamp || new Date()
+        const startTimestamp = readOnly ? undefined : this.persistence?.remove_event_timer(eventName)
+        let properties = { ...eventProperties }
+        properties['token'] = this.config.token
+        if (this.config.cookieless_mode == 'always' || this.config.cookieless_mode == 'on_reject') {
+            properties[COOKIELESS_MODE_FLAG_PROPERTY] = true
+        }
+
+        if (eventName === '$snapshot') {
+            const persistenceProps = { ...this.persistence.properties() }
+            properties['distinct_id'] = persistenceProps.distinct_id
+            if (
+                !(isString(properties['distinct_id']) || isNumber(properties['distinct_id'])) ||
+                isEmptyString(properties['distinct_id'])
+            ) {
+                logger.error('Invalid distinct_id for replay event. This indicates a bug in your implementation')
+            }
+            return properties
+        }
+
+        const infoProperties = getEventProperties(
+            this.config.mask_personal_data_properties,
+            this.config.custom_personal_data_properties
+        )
+
+        if (this.sessionManager) {
+            const { sessionId, windowId } = this.sessionManager.checkAndGetSessionAndWindowId(
+                readOnly,
+                timestamp.getTime()
+            )
+            properties['$session_id'] = sessionId
+            properties['$window_id'] = windowId
+        }
+
+        if (this.sessionPropsManager) {
+            extend(properties, this.sessionPropsManager.getSessionProps())
+        }
+
+        try {
+            if (this.sessionRecording) {
+                extend(properties, this.sessionRecording.sdkDebugProperties)
+            }
+        } catch (e: any) {
+            properties['$sdk_debug_error_capturing_properties'] = String(e)
+        }
+
+        let pageviewProperties: Record<string, any> = this.pageViewManager.doEvent()
+        if (eventName === '$pageview' && !readOnly) {
+            pageviewProperties = this.pageViewManager.doPageView(timestamp, uuid)
+        }
+
+        if (eventName === '$pageleave' && !readOnly) {
+            pageviewProperties = this.pageViewManager.doPageLeave(timestamp)
+        }
+
+        properties = extend(properties, pageviewProperties)
+
+        if (eventName === '$pageview' && document) {
+            properties['title'] = document.title
+        }
+
+        if (!isUndefined(startTimestamp)) {
+            const duration_in_ms = timestamp.getTime() - startTimestamp
+            properties['$duration'] = parseFloat((duration_in_ms / 1000).toFixed(3))
+        }
+
+        if (userAgent && this.config.opt_out_useragent_filter) {
+            properties['$browser_type'] = isLikelyBot(navigator, []) ? 'bot' : 'browser'
+        }
+
+        properties = extend(
+            {},
+            infoProperties,
+            this.persistence.properties(),
+            this.sessionPersistence.properties(),
+            properties
+        )
+
+        properties['$is_identified'] = this.isIdentified()
+        return properties
+    }
+
+    isIdentified(): boolean {
+        return (
+            this.persistence?.get_property(USER_STATE) === 'identified' ||
+            this.sessionPersistence?.get_property(USER_STATE) === 'identified'
+        )
+    }
+
+    /**
+     * Add additional set_once properties to the event when creating a person profile. This allows us to create the
+     * profile with mostly-accurate properties, despite earlier events not setting them. We do this by storing them in
+     * persistence.
+     * @param dataSetOnce
+     */
+    calculateSetOnceProperties(dataSetOnce?: Properties): Properties | undefined {
+        if (!this.persistence) {
+            return dataSetOnce
+        }
+
+        if (this.personProcessingSetOncePropertiesSent) {
+            return dataSetOnce
+        }
+
+        const initialProps = this.persistence.get_initial_props()
+        const sessionProps = this.sessionPropsManager?.getSetOnceProps()
+        const setOnceProperties = extend({}, initialProps, sessionProps || {}, dataSetOnce || {})
+        this.personProcessingSetOncePropertiesSent = true
+        if (isEmptyObject(setOnceProperties)) {
+            return undefined
+        }
+
+        return setOnceProperties
+    }
+
+    capture(event: string, properties?: PostHogEventProperties, options?: LeanbaseCaptureOptions): void {
+        if (!this.isLoaded || !this.sessionPersistence || !this.persistence) {
+            return
+        }
+
+        if (isUndefined(event) || !isString(event)) {
+            logger.error('No event name provided to posthog.capture')
+            return
+        }
+
+        if (properties?.$current_url && !isString(properties?.$current_url)) {
+            logger.error(
+                'Invalid `$current_url` property provided to `posthog.capture`. Input must be a string. Ignoring provided value.'
+            )
+            delete properties?.$current_url
+        }
+
+        this.sessionPersistence.update_search_keyword()
+
+        if (this.config.save_campaign_params) {
+            this.sessionPersistence.update_campaign_params()
+        }
+
+        if (this.config.save_referrer) {
+            this.sessionPersistence.update_referrer_info()
+        }
+
+        if (this.config.save_campaign_params || this.config.save_referrer) {
+            this.persistence.set_initial_person_info()
+        }
+
+        const systemTime = new Date()
+        const timestamp = options?.timestamp || systemTime
+        const uuid = uuidv7()
+        let data: CaptureResult = {
+            uuid,
+            event,
+            properties: this.calculateEventProperties(event, properties || {}, timestamp, uuid),
+        }
+
+        const setProperties = options?.$set
+        if (setProperties) {
+            data.$set = options?.$set
+        }
+
+        const setOnceProperties = this.calculateSetOnceProperties(options?.$set_once)
+        if (setOnceProperties) {
+            data.$set_once = setOnceProperties
+        }
+
+        data = copyAndTruncateStrings(data, options?._noTruncate ? null : this.config.properties_string_max_length)
+        data.timestamp = timestamp
+        if (!isUndefined(options?.timestamp)) {
+            data.properties['$event_time_override_provided'] = true
+            data.properties['$event_time_override_system_time'] = systemTime
+        }
+
+        const finalSet = { ...data.properties['$set'], ...data['$set'] }
+        if (!isEmptyObject(finalSet)) {
+            this.setPersonPropertiesForFlags(finalSet)
+        }
+
+        super.capture(data.event, data.properties, options)
+    }
+
+    identify(distinctId?: string, properties?: PostHogEventProperties, options?: LeanbaseCaptureOptions): void {
+        super.identify(distinctId, properties, options)
+    }
+
+    destroy(): void {
+        this.persistence?.clear()
+    }
+}

package/src/page-view.ts

@@ -0,0 +1,124 @@
+import { window } from './utils'
+import { Leanbase } from './leanbase'
+import { clampToRange, isUndefined, Logger } from '@posthog/core'
+import { extend } from './utils'
+import { logger } from './leanbase-logger'
+
+interface PageViewEventProperties {
+    $pageview_id?: string
+    $prev_pageview_id?: string
+    $prev_pageview_pathname?: string
+    $prev_pageview_duration?: number // seconds
+    $prev_pageview_last_scroll?: number
+    $prev_pageview_last_scroll_percentage?: number
+    $prev_pageview_max_scroll?: number
+    $prev_pageview_max_scroll_percentage?: number
+    $prev_pageview_last_content?: number
+    $prev_pageview_last_content_percentage?: number
+    $prev_pageview_max_content?: number
+    $prev_pageview_max_content_percentage?: number
+}
+
+// This keeps track of the PageView state (such as the previous PageView's path, timestamp, id, and scroll properties).
+// We store the state in memory, which means that for non-SPA sites, the state will be lost on page reload. This means
+// that non-SPA sites should always send a $pageleave event on any navigation, before the page unloads. For SPA sites,
+// they only need to send a $pageleave event when the user navigates away from the site, as the information is not lost
+// on an internal navigation, and is included as the $prev_pageview_ properties in the next $pageview event.
+
+// Practically, this means that to find the scroll properties for a given pageview, you need to find the event where
+// event name is $pageview or $pageleave and where $prev_pageview_id matches the original pageview event's id.
+
+export class PageViewManager {
+    _currentPageview?: { timestamp: Date; pageViewId: string | undefined; pathname: string | undefined }
+    _instance: Leanbase
+
+    constructor(instance: Leanbase) {
+        this._instance = instance
+    }
+
+    doPageView(timestamp: Date, pageViewId?: string): PageViewEventProperties {
+        const response = this._previousPageViewProperties(timestamp, pageViewId)
+
+        // On a pageview we reset the contexts
+        this._currentPageview = { pathname: window?.location.pathname ?? '', pageViewId, timestamp }
+        this._instance.scrollManager.resetContext()
+
+        return response
+    }
+
+    doPageLeave(timestamp: Date): PageViewEventProperties {
+        return this._previousPageViewProperties(timestamp, this._currentPageview?.pageViewId)
+    }
+
+    doEvent(): PageViewEventProperties {
+        return { $pageview_id: this._currentPageview?.pageViewId }
+    }
+
+    private _previousPageViewProperties(timestamp: Date, pageviewId: string | undefined): PageViewEventProperties {
+        const previousPageView = this._currentPageview
+
+        if (!previousPageView) {
+            return { $pageview_id: pageviewId }
+        }
+
+        let properties: PageViewEventProperties = {
+            $pageview_id: pageviewId,
+            $prev_pageview_id: previousPageView.pageViewId,
+        }
+
+        const scrollContext = this._instance.scrollManager.getContext()
+
+        if (scrollContext && !this._instance.config.disable_scroll_properties) {
+            let { maxScrollHeight, lastScrollY, maxScrollY, maxContentHeight, lastContentY, maxContentY } =
+                scrollContext
+
+            if (
+                !isUndefined(maxScrollHeight) &&
+                !isUndefined(lastScrollY) &&
+                !isUndefined(maxScrollY) &&
+                !isUndefined(maxContentHeight) &&
+                !isUndefined(lastContentY) &&
+                !isUndefined(maxContentY)
+            ) {
+                // Use ceil, so that e.g. scrolling 999.5px of a 1000px page is considered 100% scrolled
+                maxScrollHeight = Math.ceil(maxScrollHeight)
+                lastScrollY = Math.ceil(lastScrollY)
+                maxScrollY = Math.ceil(maxScrollY)
+                maxContentHeight = Math.ceil(maxContentHeight)
+                lastContentY = Math.ceil(lastContentY)
+                maxContentY = Math.ceil(maxContentY)
+
+                // if the maximum scroll height is near 0, then the percentage is 1
+                const lastScrollPercentage =
+                    maxScrollHeight <= 1 ? 1 : clampToRange(lastScrollY / maxScrollHeight, 0, 1, logger as Logger)
+                const maxScrollPercentage =
+                    maxScrollHeight <= 1 ? 1 : clampToRange(maxScrollY / maxScrollHeight, 0, 1, logger as Logger)
+                const lastContentPercentage =
+                    maxContentHeight <= 1 ? 1 : clampToRange(lastContentY / maxContentHeight, 0, 1, logger as Logger)
+                const maxContentPercentage =
+                    maxContentHeight <= 1 ? 1 : clampToRange(maxContentY / maxContentHeight, 0, 1, logger as Logger)
+
+                properties = extend(properties, {
+                    $prev_pageview_last_scroll: lastScrollY,
+                    $prev_pageview_last_scroll_percentage: lastScrollPercentage,
+                    $prev_pageview_max_scroll: maxScrollY,
+                    $prev_pageview_max_scroll_percentage: maxScrollPercentage,
+                    $prev_pageview_last_content: lastContentY,
+                    $prev_pageview_last_content_percentage: lastContentPercentage,
+                    $prev_pageview_max_content: maxContentY,
+                    $prev_pageview_max_content_percentage: maxContentPercentage,
+                })
+            }
+        }
+
+        if (previousPageView.pathname) {
+            properties.$prev_pageview_pathname = previousPageView.pathname
+        }
+        if (previousPageView.timestamp) {
+            // Use seconds, for consistency with our other duration-related properties like $duration
+            properties.$prev_pageview_duration = (timestamp.getTime() - previousPageView.timestamp.getTime()) / 1000
+        }
+
+        return properties
+    }
+}

package/src/scroll-manager.ts

@@ -0,0 +1,103 @@
+import { window } from './utils'
+import { Leanbase } from './leanbase'
+import { addEventListener } from './utils'
+import { isArray } from '@posthog/core'
+
+export interface ScrollContext {
+    // scroll is how far down the page the user has scrolled,
+    // content is how far down the page the user can view content
+    // (e.g. if the page is 1000 tall, but the user's screen is only 500 tall,
+    // and they don't scroll at all, then scroll is 0 and content is 500)
+    maxScrollHeight?: number
+    maxScrollY?: number
+    lastScrollY?: number
+    maxContentHeight?: number
+    maxContentY?: number
+    lastContentY?: number
+}
+
+// This class is responsible for tracking scroll events and maintaining the scroll context
+export class ScrollManager {
+    private _context: ScrollContext | undefined
+
+    constructor(private _instance: Leanbase) {}
+
+    getContext(): ScrollContext | undefined {
+        return this._context
+    }
+
+    resetContext(): ScrollContext | undefined {
+        const ctx = this._context
+
+        // update the scroll properties for the new page, but wait until the next tick
+        // of the event loop
+        setTimeout(this._updateScrollData, 0)
+
+        return ctx
+    }
+
+    private _updateScrollData = () => {
+        if (!this._context) {
+            this._context = {}
+        }
+
+        const el = this.scrollElement()
+
+        const scrollY = this.scrollY()
+        const scrollHeight = el ? Math.max(0, el.scrollHeight - el.clientHeight) : 0
+        const contentY = scrollY + (el?.clientHeight || 0)
+        const contentHeight = el?.scrollHeight || 0
+
+        this._context.lastScrollY = Math.ceil(scrollY)
+        this._context.maxScrollY = Math.max(scrollY, this._context.maxScrollY ?? 0)
+        this._context.maxScrollHeight = Math.max(scrollHeight, this._context.maxScrollHeight ?? 0)
+
+        this._context.lastContentY = contentY
+        this._context.maxContentY = Math.max(contentY, this._context.maxContentY ?? 0)
+        this._context.maxContentHeight = Math.max(contentHeight, this._context.maxContentHeight ?? 0)
+    }
+
+    // `capture: true` is required to get scroll events for other scrollable elements
+    // on the page, not just the window
+    // see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#usecapture
+    startMeasuringScrollPosition() {
+        addEventListener(window, 'scroll', this._updateScrollData, { capture: true })
+        addEventListener(window, 'scrollend', this._updateScrollData, { capture: true })
+        addEventListener(window, 'resize', this._updateScrollData)
+    }
+
+    public scrollElement(): Element | undefined {
+        if (this._instance.config.scroll_root_selector) {
+            const selectors = isArray(this._instance.config.scroll_root_selector)
+                ? this._instance.config.scroll_root_selector
+                : [this._instance.config.scroll_root_selector]
+            for (const selector of selectors) {
+                const element = window?.document.querySelector(selector)
+                if (element) {
+                    return element
+                }
+            }
+            return undefined
+        } else {
+            return window?.document.documentElement
+        }
+    }
+
+    public scrollY(): number {
+        if (this._instance.config.scroll_root_selector) {
+            const element = this.scrollElement()
+            return (element && element.scrollTop) || 0
+        } else {
+            return window ? window.scrollY || window.pageYOffset || window.document.documentElement.scrollTop || 0 : 0
+        }
+    }
+
+    public scrollX(): number {
+        if (this._instance.config.scroll_root_selector) {
+            const element = this.scrollElement()
+            return (element && element.scrollLeft) || 0
+        } else {
+            return window ? window.scrollX || window.pageXOffset || window.document.documentElement.scrollLeft || 0 : 0
+        }
+    }
+}