@leanbase-giangnd/js 0.0.0

package/src/extensions/replay/external/sessionrecording-utils.ts

@@ -0,0 +1,141 @@
+import type { eventWithTime, pluginEvent } from '../types/rrweb-types'
+
+import { isObject } from '@posthog/core'
+import { SnapshotBuffer } from './lazy-loaded-session-recorder'
+
+// taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value#circular_references
+export function circularReferenceReplacer() {
+    const ancestors: any[] = []
+    return function (this: any, _key: string, value: any) {
+        if (isObject(value)) {
+            // `this` is the object that value is contained in,
+            // i.e., its direct parent.
+            while (ancestors.length > 0 && ancestors[ancestors.length - 1] !== this) {
+                ancestors.pop()
+            }
+            if (ancestors.includes(value)) {
+                return '[Circular]'
+            }
+            ancestors.push(value)
+            return value
+        } else {
+            return value
+        }
+    }
+}
+
+export function estimateSize(sizeable: unknown): number {
+    return JSON.stringify(sizeable, circularReferenceReplacer())?.length || 0
+}
+
+export const replacementImageURI =
+    'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJibGFjayIvPgo8cGF0aCBkPSJNOCAwSDE2TDAgMTZWOEw4IDBaIiBmaWxsPSIjMkQyRDJEIi8+CjxwYXRoIGQ9Ik0xNiA4VjE2SDhMMTYgOFoiIGZpbGw9IiMyRDJEMkQiLz4KPC9zdmc+Cg=='
+
+export const FULL_SNAPSHOT_EVENT_TYPE = 2
+export const META_EVENT_TYPE = 4
+export const INCREMENTAL_SNAPSHOT_EVENT_TYPE = 3
+export const PLUGIN_EVENT_TYPE = 6
+export const MUTATION_SOURCE_TYPE = 0
+
+export const MAX_MESSAGE_SIZE = 5000000 // ~5mb
+
+/*
+ * Check whether a data payload is nearing 5mb. If it is, it checks the data for
+ * data URIs (the likely culprit for large payloads). If it finds data URIs, it either replaces
+ * it with a generic image (if it's an image) or removes it.
+ * @data {object} the rr-web data object
+ * @returns {object} the rr-web data object with data uris filtered out
+ */
+export function ensureMaxMessageSize(data: eventWithTime): { event: eventWithTime; size: number } {
+    let stringifiedData = JSON.stringify(data)
+    // Note: with compression, this limit may be able to be increased
+    // but we're assuming most of the size is from a data uri which
+    // is unlikely to be compressed further
+
+    if (stringifiedData.length > MAX_MESSAGE_SIZE) {
+        // Regex that matches the pattern for a dataURI with the shape 'data:{mime type};{encoding},{data}'. It:
+        // 1) Checks if the pattern starts with 'data:' (potentially, not at the start of the string)
+        // 2) Extracts the mime type of the data uri in the first group
+        // 3) Determines when the data URI ends.Depending on if it's used in the src tag or css, it can end with a ) or "
+        const dataURIRegex = /data:([\w/\-.]+);(\w+),([^)"]*)/gim
+        const matches = stringifiedData.matchAll(dataURIRegex)
+        for (const match of matches) {
+            if (match[1].toLocaleLowerCase().slice(0, 6) === 'image/') {
+                stringifiedData = stringifiedData.replace(match[0], replacementImageURI)
+            } else {
+                stringifiedData = stringifiedData.replace(match[0], '')
+            }
+        }
+    }
+    return { event: JSON.parse(stringifiedData), size: stringifiedData.length }
+}
+
+export const CONSOLE_LOG_PLUGIN_NAME = 'rrweb/console@1' // The name of the rr-web plugin that emits console logs
+
+// Console logs can be really large. This function truncates large logs
+// It's a simple function that just truncates long strings.
+// TODO: Ideally this function would have better handling of objects + lists,
+// so they could still be rendered in a pretty way after truncation.
+export function truncateLargeConsoleLogs(_event: eventWithTime) {
+    const event = _event as pluginEvent<{ payload: string[] }>
+
+    const MAX_STRING_SIZE = 2000 // Maximum number of characters allowed in a string
+    const MAX_STRINGS_PER_LOG = 10 // A log can consist of multiple strings (e.g. consol.log('string1', 'string2'))
+
+    if (
+        event &&
+        isObject(event) &&
+        event.type === PLUGIN_EVENT_TYPE &&
+        isObject(event.data) &&
+        event.data.plugin === CONSOLE_LOG_PLUGIN_NAME
+    ) {
+        // Note: event.data.payload.payload comes from rr-web, and is an array of strings
+        if (event.data.payload.payload.length > MAX_STRINGS_PER_LOG) {
+            event.data.payload.payload = event.data.payload.payload.slice(0, MAX_STRINGS_PER_LOG)
+            event.data.payload.payload.push('...[truncated]')
+        }
+        const updatedPayload = []
+        for (let i = 0; i < event.data.payload.payload.length; i++) {
+            if (
+                event.data.payload.payload[i] && // Value can be null
+                event.data.payload.payload[i].length > MAX_STRING_SIZE
+            ) {
+                updatedPayload.push(event.data.payload.payload[i].slice(0, MAX_STRING_SIZE) + '...[truncated]')
+            } else {
+                updatedPayload.push(event.data.payload.payload[i])
+            }
+        }
+        event.data.payload.payload = updatedPayload
+        // Return original type
+        return _event
+    }
+    return _event
+}
+
+export const SEVEN_MEGABYTES = 1024 * 1024 * 7 * 0.9 // ~7mb (with some wiggle room)
+
+// recursively splits large buffers into smaller ones
+// uses a pretty high size limit to avoid splitting too much
+export function splitBuffer(buffer: SnapshotBuffer, sizeLimit: number = SEVEN_MEGABYTES): SnapshotBuffer[] {
+    if (buffer.size >= sizeLimit && buffer.data.length > 1) {
+        const half = Math.floor(buffer.data.length / 2)
+        const firstHalf = buffer.data.slice(0, half)
+        const secondHalf = buffer.data.slice(half)
+        return [
+            splitBuffer({
+                size: estimateSize(firstHalf),
+                data: firstHalf,
+                sessionId: buffer.sessionId,
+                windowId: buffer.windowId,
+            }),
+            splitBuffer({
+                size: estimateSize(secondHalf),
+                data: secondHalf,
+                sessionId: buffer.sessionId,
+                windowId: buffer.windowId,
+            }),
+        ].flatMap((x) => x)
+    } else {
+        return [buffer]
+    }
+}

package/src/extensions/replay/external/triggerMatching.ts

@@ -0,0 +1,422 @@
+import {
+    SESSION_RECORDING_EVENT_TRIGGER_ACTIVATED_SESSION,
+    SESSION_RECORDING_URL_TRIGGER_ACTIVATED_SESSION,
+} from '../../../constants'
+import { Leanbase } from '../../../leanbase'
+import { RemoteConfig, SessionRecordingPersistedConfig, SessionRecordingUrlTrigger } from '../../../types'
+import { isNullish, isBoolean, isString, isObject } from '@posthog/core'
+import { window } from '../../../utils'
+
+export const DISABLED = 'disabled'
+export const SAMPLED = 'sampled'
+export const ACTIVE = 'active'
+export const BUFFERING = 'buffering'
+export const PAUSED = 'paused'
+export const LAZY_LOADING = 'lazy_loading'
+
+const TRIGGER = 'trigger'
+export const TRIGGER_ACTIVATED = TRIGGER + '_activated'
+export const TRIGGER_PENDING = TRIGGER + '_pending'
+export const TRIGGER_DISABLED = TRIGGER + '_' + DISABLED
+
+export interface RecordingTriggersStatus {
+    get receivedFlags(): boolean
+    get isRecordingEnabled(): false | true | undefined
+    get isSampled(): false | true | null
+    get urlTriggerMatching(): URLTriggerMatching
+    get eventTriggerMatching(): EventTriggerMatching
+    get linkedFlagMatching(): LinkedFlagMatching
+    get sessionId(): string
+}
+
+export type TriggerType = 'url' | 'event'
+/* 
+triggers can have one of three statuses:
+ * - trigger_activated: the trigger met conditions to start recording
+ * - trigger_pending: the trigger is present, but the conditions are not yet met
+ * - trigger_disabled: the trigger is not present
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const triggerStatuses = [TRIGGER_ACTIVATED, TRIGGER_PENDING, TRIGGER_DISABLED] as const
+export type TriggerStatus = (typeof triggerStatuses)[number]
+
+/**
+ * Session recording starts in buffering mode while waiting for "flags response".
+ * Once the response is received, it might be disabled, active or sampled.
+ * When "sampled" that means a sample rate is set, and the last time the session ID rotated
+ * the sample rate determined this session should be sent to the server.
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const sessionRecordingStatuses = [DISABLED, SAMPLED, ACTIVE, BUFFERING, PAUSED, LAZY_LOADING] as const
+export type SessionRecordingStatus = (typeof sessionRecordingStatuses)[number]
+
+// while we have both lazy and eager loaded replay we might get either type of config
+type ReplayConfigType = RemoteConfig | SessionRecordingPersistedConfig
+
+function sessionRecordingUrlTriggerMatches(url: string, triggers: SessionRecordingUrlTrigger[]) {
+    return triggers.some((trigger) => {
+        switch (trigger.matching) {
+            case 'regex':
+                return new RegExp(trigger.url).test(url)
+            default:
+                return false
+        }
+    })
+}
+
+export interface TriggerStatusMatching {
+    triggerStatus(sessionId: string): TriggerStatus
+    stop(): void
+}
+export class OrTriggerMatching implements TriggerStatusMatching {
+    constructor(private readonly _matchers: TriggerStatusMatching[]) {}
+
+    triggerStatus(sessionId: string): TriggerStatus {
+        const statuses = this._matchers.map((m) => m.triggerStatus(sessionId))
+        if (statuses.includes(TRIGGER_ACTIVATED)) {
+            return TRIGGER_ACTIVATED
+        }
+        if (statuses.includes(TRIGGER_PENDING)) {
+            return TRIGGER_PENDING
+        }
+        return TRIGGER_DISABLED
+    }
+
+    stop(): void {
+        this._matchers.forEach((m) => m.stop())
+    }
+}
+
+export class AndTriggerMatching implements TriggerStatusMatching {
+    constructor(private readonly _matchers: TriggerStatusMatching[]) {}
+
+    triggerStatus(sessionId: string): TriggerStatus {
+        const statuses = new Set<TriggerStatus>()
+        for (const matcher of this._matchers) {
+            statuses.add(matcher.triggerStatus(sessionId))
+        }
+
+        // trigger_disabled means no config
+        statuses.delete(TRIGGER_DISABLED)
+        switch (statuses.size) {
+            case 0:
+                return TRIGGER_DISABLED
+            case 1:
+                return Array.from(statuses)[0]
+            default:
+                return TRIGGER_PENDING
+        }
+    }
+
+    stop(): void {
+        this._matchers.forEach((m) => m.stop())
+    }
+}
+
+export class PendingTriggerMatching implements TriggerStatusMatching {
+    triggerStatus(): TriggerStatus {
+        return TRIGGER_PENDING
+    }
+
+    stop(): void {
+        // no-op
+    }
+}
+
+const isEagerLoadedConfig = (x: ReplayConfigType): x is RemoteConfig => {
+    return 'sessionRecording' in x
+}
+
+export class URLTriggerMatching implements TriggerStatusMatching {
+    _urlTriggers: SessionRecordingUrlTrigger[] = []
+    _urlBlocklist: SessionRecordingUrlTrigger[] = []
+
+    urlBlocked: boolean = false
+
+    constructor(private readonly _instance: Leanbase) {}
+
+    onConfig(config: ReplayConfigType) {
+        this._urlTriggers =
+            (isEagerLoadedConfig(config)
+                ? isObject(config.sessionRecording)
+                    ? config.sessionRecording?.urlTriggers
+                    : []
+                : config?.urlTriggers) || []
+        this._urlBlocklist =
+            (isEagerLoadedConfig(config)
+                ? isObject(config.sessionRecording)
+                    ? config.sessionRecording?.urlBlocklist
+                    : []
+                : config?.urlBlocklist) || []
+    }
+
+    /**
+     * @deprecated Use onConfig instead
+     */
+    onRemoteConfig(response: RemoteConfig) {
+        this.onConfig(response)
+    }
+
+    private _urlTriggerStatus(sessionId: string): TriggerStatus {
+        if (this._urlTriggers.length === 0) {
+            return TRIGGER_DISABLED
+        }
+
+        const currentTriggerSession = this._instance?.get_property(SESSION_RECORDING_URL_TRIGGER_ACTIVATED_SESSION)
+        return currentTriggerSession === sessionId ? TRIGGER_ACTIVATED : TRIGGER_PENDING
+    }
+
+    triggerStatus(sessionId: string): TriggerStatus {
+        const urlTriggerStatus = this._urlTriggerStatus(sessionId)
+        const eitherIsActivated = urlTriggerStatus === TRIGGER_ACTIVATED
+        const eitherIsPending = urlTriggerStatus === TRIGGER_PENDING
+
+        const result = eitherIsActivated ? TRIGGER_ACTIVATED : eitherIsPending ? TRIGGER_PENDING : TRIGGER_DISABLED
+        this._instance.registerForSession({
+            $sdk_debug_replay_url_trigger_status: result,
+        })
+        return result
+    }
+
+    checkUrlTriggerConditions(
+        onPause: () => void,
+        onResume: () => void,
+        onActivate: (triggerType: TriggerType) => void
+    ) {
+        if (typeof window === 'undefined' || !window.location.href) {
+            return
+        }
+
+        const url = window.location.href
+
+        const wasBlocked = this.urlBlocked
+        const isNowBlocked = sessionRecordingUrlTriggerMatches(url, this._urlBlocklist)
+
+        if (wasBlocked && isNowBlocked) {
+            // if the url is blocked and was already blocked, do nothing
+            return
+        } else if (isNowBlocked && !wasBlocked) {
+            onPause()
+        } else if (!isNowBlocked && wasBlocked) {
+            onResume()
+        }
+
+        if (sessionRecordingUrlTriggerMatches(url, this._urlTriggers)) {
+            onActivate('url')
+        }
+    }
+
+    stop(): void {
+        // no-op
+    }
+}
+
+export class LinkedFlagMatching implements TriggerStatusMatching {
+    linkedFlag: string | { flag: string; variant: string } | null = null
+    linkedFlagSeen: boolean = false
+    private _flagListenerCleanup: () => void = () => {}
+    constructor(private readonly _instance: Leanbase) {}
+
+    triggerStatus(): TriggerStatus {
+        let result = TRIGGER_PENDING
+        if (isNullish(this.linkedFlag)) {
+            result = TRIGGER_DISABLED
+        }
+        if (this.linkedFlagSeen) {
+            result = TRIGGER_ACTIVATED
+        }
+        this._instance.registerForSession({
+            $sdk_debug_replay_linked_flag_trigger_status: result,
+        })
+        return result
+    }
+
+    onConfig(config: ReplayConfigType, onStarted: (flag: string, variant: string | null) => void) {
+        this.linkedFlag =
+            (isEagerLoadedConfig(config)
+                ? isObject(config.sessionRecording)
+                    ? config.sessionRecording?.linkedFlag
+                    : null
+                : config?.linkedFlag) || null
+
+        if (!isNullish(this.linkedFlag) && !this.linkedFlagSeen) {
+            const linkedFlag = isString(this.linkedFlag) ? this.linkedFlag : this.linkedFlag.flag
+            const linkedVariant = isString(this.linkedFlag) ? null : this.linkedFlag.variant
+            this._flagListenerCleanup = this._instance.onFeatureFlags((flags) => {
+                const flagIsPresent = isObject(flags) && linkedFlag in (flags as any)
+                let linkedFlagMatches = false
+                if (flagIsPresent) {
+                    const variantForFlagKey = (flags as any)[linkedFlag]
+                    if (isBoolean(variantForFlagKey)) {
+                        linkedFlagMatches = variantForFlagKey === true
+                    } else if (linkedVariant) {
+                        linkedFlagMatches = variantForFlagKey === linkedVariant
+                    } else {
+                        // then this is a variant flag and we want to match any string
+                        linkedFlagMatches = !!variantForFlagKey
+                    }
+                }
+                this.linkedFlagSeen = linkedFlagMatches
+                if (linkedFlagMatches) {
+                    onStarted(linkedFlag, linkedVariant)
+                }
+            })
+        }
+    }
+
+    /**
+     * @deprecated Use onConfig instead
+     */
+    onRemoteConfig(response: RemoteConfig, onStarted: (flag: string, variant: string | null) => void) {
+        this.onConfig(response, onStarted)
+    }
+
+    stop(): void {
+        this._flagListenerCleanup()
+    }
+}
+
+export class EventTriggerMatching implements TriggerStatusMatching {
+    _eventTriggers: string[] = []
+
+    constructor(private readonly _instance: Leanbase) {}
+
+    onConfig(config: ReplayConfigType) {
+        this._eventTriggers =
+            (isEagerLoadedConfig(config)
+                ? isObject(config.sessionRecording)
+                    ? config.sessionRecording?.eventTriggers
+                    : []
+                : config?.eventTriggers) || []
+    }
+
+    /**
+     * @deprecated Use onConfig instead
+     */
+    onRemoteConfig(response: RemoteConfig) {
+        this.onConfig(response)
+    }
+
+    private _eventTriggerStatus(sessionId: string): TriggerStatus {
+        if (this._eventTriggers.length === 0) {
+            return TRIGGER_DISABLED
+        }
+
+        const currentTriggerSession = this._instance?.get_property(SESSION_RECORDING_EVENT_TRIGGER_ACTIVATED_SESSION)
+        return currentTriggerSession === sessionId ? TRIGGER_ACTIVATED : TRIGGER_PENDING
+    }
+
+    triggerStatus(sessionId: string): TriggerStatus {
+        const eventTriggerStatus = this._eventTriggerStatus(sessionId)
+        const result =
+            eventTriggerStatus === TRIGGER_ACTIVATED
+                ? TRIGGER_ACTIVATED
+                : eventTriggerStatus === TRIGGER_PENDING
+                  ? TRIGGER_PENDING
+                  : TRIGGER_DISABLED
+        this._instance.registerForSession({
+            $sdk_debug_replay_event_trigger_status: result,
+        })
+        return result
+    }
+
+    stop(): void {
+        // no-op
+    }
+}
+
+// we need a no-op matcher before we can lazy-load the other matches, since all matchers wait on remote config anyway
+export function nullMatchSessionRecordingStatus(triggersStatus: RecordingTriggersStatus): SessionRecordingStatus {
+    if (!triggersStatus.isRecordingEnabled) {
+        return DISABLED
+    }
+
+    return BUFFERING
+}
+
+export function anyMatchSessionRecordingStatus(triggersStatus: RecordingTriggersStatus): SessionRecordingStatus {
+    if (!triggersStatus.receivedFlags) {
+        return BUFFERING
+    }
+
+    if (!triggersStatus.isRecordingEnabled) {
+        return DISABLED
+    }
+
+    if (triggersStatus.urlTriggerMatching.urlBlocked) {
+        return PAUSED
+    }
+
+    const sampledActive = triggersStatus.isSampled === true
+    const triggerMatches = new OrTriggerMatching([
+        triggersStatus.eventTriggerMatching,
+        triggersStatus.urlTriggerMatching,
+        triggersStatus.linkedFlagMatching,
+    ]).triggerStatus(triggersStatus.sessionId)
+
+    if (sampledActive) {
+        return SAMPLED
+    }
+
+    if (triggerMatches === TRIGGER_ACTIVATED) {
+        return ACTIVE
+    }
+
+    if (triggerMatches === TRIGGER_PENDING) {
+        // even if sampled active is false, we should still be buffering
+        // since a pending trigger could override it
+        return BUFFERING
+    }
+
+    // if sampling is set and the session is already decided to not be sampled
+    // then we should never be active
+    if (triggersStatus.isSampled === false) {
+        return DISABLED
+    }
+
+    return ACTIVE
+}
+
+export function allMatchSessionRecordingStatus(triggersStatus: RecordingTriggersStatus): SessionRecordingStatus {
+    if (!triggersStatus.receivedFlags) {
+        return BUFFERING
+    }
+
+    if (!triggersStatus.isRecordingEnabled) {
+        return DISABLED
+    }
+
+    if (triggersStatus.urlTriggerMatching.urlBlocked) {
+        return PAUSED
+    }
+
+    const andTriggerMatch = new AndTriggerMatching([
+        triggersStatus.eventTriggerMatching,
+        triggersStatus.urlTriggerMatching,
+        triggersStatus.linkedFlagMatching,
+    ])
+    const currentTriggerStatus = andTriggerMatch.triggerStatus(triggersStatus.sessionId)
+    const hasTriggersConfigured = currentTriggerStatus !== TRIGGER_DISABLED
+
+    const hasSamplingConfigured = isBoolean(triggersStatus.isSampled)
+
+    if (hasTriggersConfigured && currentTriggerStatus === TRIGGER_PENDING) {
+        return BUFFERING
+    }
+
+    if (hasTriggersConfigured && currentTriggerStatus === TRIGGER_DISABLED) {
+        return DISABLED
+    }
+
+    // sampling can't ever cause buffering, it's always determined right away or not configured
+    if (hasSamplingConfigured && !triggersStatus.isSampled) {
+        return DISABLED
+    }
+
+    // If sampling is configured and set to true, return sampled
+    if (triggersStatus.isSampled === true) {
+        return SAMPLED
+    }
+
+    return ACTIVE
+}

package/src/extensions/replay/rrweb-plugins/patch.ts

@@ -0,0 +1,39 @@
+import { isFunction } from '@posthog/core'
+
+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)
+
+        if (isFunction(wrapped)) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            wrapped.prototype = wrapped.prototype || {}
+            Object.defineProperties(wrapped, {
+                __posthog_wrapped__: {
+                    enumerable: false,
+                    value: true,
+                },
+            })
+        }
+
+        source[name] = wrapped
+
+        return () => {
+            source[name] = original
+        }
+    } catch {
+        return () => {
+            //
+        }
+    }
+}