From a1539b0af9aa81d50ae7a8c5ab8ee7ef0b4fc457 Mon Sep 17 00:00:00 2001 From: David Newell Date: Wed, 23 Oct 2024 10:01:39 +0100 Subject: [PATCH] chore: use @rrweb/record --- package.json | 3 +-- playground/segment/server.js | 2 +- pnpm-lock.yaml | 16 ++++++++++------ src/entrypoints/recorder.ts | 2 +- src/extensions/replay/sessionrecording-utils.ts | 13 ++++++------- src/extensions/replay/sessionrecording.ts | 4 ---- src/types.ts | 5 ++--- 7 files changed, 21 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 589235fae..8aeb40f48 100644 --- a/package.json +++ b/package.json @@ -104,8 +104,7 @@ "rollup": "^4.24.0", "rollup-plugin-dts": "^6.1.1", "rollup-plugin-visualizer": "^5.12.0", - "rrweb": "2.0.0-alpha.17", - "rrweb-snapshot": "2.0.0-alpha.17", + "@rrweb/record": "2.0.0-alpha.17", "sinon": "9.0.2", "testcafe": "1.19.0", "testcafe-browser-provider-browserstack": "1.14.0", diff --git a/playground/segment/server.js b/playground/segment/server.js index 8c67259a1..565b09bbf 100644 --- a/playground/segment/server.js +++ b/playground/segment/server.js @@ -10,7 +10,7 @@ app.get('/segment.html', function (req, res) { }) app.get('/static/recorder.js', function (req, res) { - let filePath = path.join(__dirname, '/../../node_modules/rrweb/dist/rrweb.js') + let filePath = path.join(__dirname, '/../../node_modules/@rrweb/record/dist/record.js') res.sendFile(filePath) }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3520100a8..3ebb1381a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -66,6 +66,9 @@ devDependencies: '@rollup/plugin-typescript': specifier: ^12.1.1 version: 12.1.1(rollup@4.24.0)(tslib@2.5.0)(typescript@5.5.4) + '@rrweb/record': + specifier: 2.0.0-alpha.17 + version: 2.0.0-alpha.17 '@rrweb/rrweb-plugin-console-record': specifier: 2.0.0-alpha.17 version: 2.0.0-alpha.17(rrweb@2.0.0-alpha.17) @@ -204,12 +207,6 @@ devDependencies: rollup-plugin-visualizer: specifier: ^5.12.0 version: 5.12.0(rollup@4.24.0) - rrweb: - specifier: 2.0.0-alpha.17 - version: 2.0.0-alpha.17(patch_hash=ovqfbi26faqgvd4dbhm6fm7hwm) - rrweb-snapshot: - specifier: 2.0.0-alpha.17 - version: 2.0.0-alpha.17 sinon: specifier: 9.0.2 version: 9.0.2 @@ -2802,6 +2799,13 @@ packages: dev: true optional: true + /@rrweb/record@2.0.0-alpha.17: + resolution: {integrity: sha512-Je+lzjeWMF8/I0IDoXFzkGPKT8j7AkaBup5YcwUHlkp18VhLVze416MvI6915teE27uUA2ScXMXzG0Yiu5VTIw==} + dependencies: + '@rrweb/types': 2.0.0-alpha.17 + rrweb: 2.0.0-alpha.17(patch_hash=ovqfbi26faqgvd4dbhm6fm7hwm) + dev: true + /@rrweb/rrweb-plugin-console-record@2.0.0-alpha.17(rrweb@2.0.0-alpha.17): resolution: {integrity: sha512-tjNJ3wWUDMMf275xr4Rb5tVYF2UR+wXvSxnyS9tRKnRa574PQQvx7sGbqM/O9AytYjnbiTrAMqNR7OFysGCMwQ==} peerDependencies: diff --git a/src/entrypoints/recorder.ts b/src/entrypoints/recorder.ts index 514cfb45f..705b6aad2 100644 --- a/src/entrypoints/recorder.ts +++ b/src/entrypoints/recorder.ts @@ -1,5 +1,5 @@ // @ts-expect-error - Patched to include the version -import { record as rrwebRecord, version } from 'rrweb' +import { record as rrwebRecord, version } from '@rrweb/record' import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record' // rrweb/network@1 code starts diff --git a/src/extensions/replay/sessionrecording-utils.ts b/src/extensions/replay/sessionrecording-utils.ts index aba786e87..42cb7729c 100644 --- a/src/extensions/replay/sessionrecording-utils.ts +++ b/src/extensions/replay/sessionrecording-utils.ts @@ -9,7 +9,6 @@ import type { RecordPlugin, SamplingStrategy, } from '@rrweb/types' -import type { DataURLOptions, MaskInputFn, MaskInputOptions, MaskTextFn, Mirror, SlimDOMOptions } from 'rrweb-snapshot' import { isObject } from '../../utils/type-utils' import { SnapshotBuffer } from './sessionrecording' @@ -54,7 +53,7 @@ export type rrwebRecord = { (options: recordOptions): listenerHandler addCustomEvent: (tag: string, payload: any) => void takeFullSnapshot: () => void - mirror: Mirror + mirror: any } export declare type recordOptions = { @@ -67,16 +66,16 @@ export declare type recordOptions = { maskTextClass?: maskTextClass maskTextSelector?: string maskAllInputs?: boolean - maskInputOptions?: MaskInputOptions - maskInputFn?: MaskInputFn - maskTextFn?: MaskTextFn - slimDOMOptions?: SlimDOMOptions | 'all' | true + maskInputOptions?: any + maskInputFn?: any + maskTextFn?: any + slimDOMOptions?: any | 'all' | true ignoreCSSAttributes?: Set inlineStylesheet?: boolean hooks?: hooksParam // packFn?: PackFn sampling?: SamplingStrategy - dataURLOptions?: DataURLOptions + dataURLOptions?: any recordCanvas?: boolean recordCrossOriginIframes?: boolean recordAfter?: 'DOMContentLoaded' | 'load' diff --git a/src/extensions/replay/sessionrecording.ts b/src/extensions/replay/sessionrecording.ts index 95420aa5f..5c781edd0 100644 --- a/src/extensions/replay/sessionrecording.ts +++ b/src/extensions/replay/sessionrecording.ts @@ -63,10 +63,6 @@ export const RECORDING_MAX_EVENT_SIZE = ONE_KB * ONE_KB * 0.9 // ~1mb (with some export const RECORDING_BUFFER_TIMEOUT = 2000 // 2 seconds export const SESSION_RECORDING_BATCH_KEY = 'recordings' -// NOTE: Importing this type is problematic as we can't safely bundle it to a TS definition so, instead we redefine. -// import type { record } from 'rrweb2/typings' -// import type { recordOptions } from 'rrweb/typings/types' - const ACTIVE_SOURCES = [ IncrementalSource.MouseMove, IncrementalSource.MouseInteraction, diff --git a/src/types.ts b/src/types.ts index a652d729f..d3bf1f353 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,4 +1,3 @@ -import type { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot' import { PostHog } from './posthog-core' import type { SegmentAnalytics } from './extensions/segment-integration' @@ -268,9 +267,9 @@ export interface SessionRecordingOptions { maskTextSelector?: string | null maskTextFn?: ((text: string, element: HTMLElement | null) => string) | null maskAllInputs?: boolean - maskInputOptions?: MaskInputOptions + maskInputOptions?: any maskInputFn?: ((text: string, element?: HTMLElement) => string) | null - slimDOMOptions?: SlimDOMOptions | 'all' | true + slimDOMOptions?: any | 'all' | true collectFonts?: boolean inlineStylesheet?: boolean recordCrossOriginIframes?: boolean