26 |
27 |
28 |
--------------------------------------------------------------------------------
/docs/recipes/pagination.md:
--------------------------------------------------------------------------------
1 | # Load Events Asynchronous
2 |
3 | When the size of the recorded events increased, load them in one request is not performant. You can paginate the events and load them as you need.
4 |
5 | rrweb's API for loading async events is quite simple:
6 |
7 | ```js
8 | const replayer = new rrweb.Replayer(events);
9 |
10 | replayer.addEvent(NEW_EVENT);
11 | ```
12 |
13 | When calling the `addEvent` API to add a new event, rrweb will resolve its timestamp and replay it as need.
14 |
15 | If you need to load several events, you can do a loop like this:
16 |
17 | ```js
18 | const replayer = new rrweb.Replayer(events);
19 |
20 | for (const event of NEW_EVENTS) {
21 | replayer.addEvent(event);
22 | }
23 | ```
24 |
--------------------------------------------------------------------------------
/packages/rrweb/test/html/unmask-text.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Unmask text
8 |
9 |
10 |
unmask1
11 |
12 | mask1
13 |
14 |
15 |
16 |
17 |
mask2
18 |
unmask2
19 |
20 |
21 |
22 |
masked from maskAllText
23 |
24 |
25 |
--------------------------------------------------------------------------------
/packages/rrweb/test/html/ignore.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | ignore fields
8 |
9 |
10 |
11 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/packages/rrvideo/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "target": "ES2020",
5 | "module": "commonjs",
6 | "declaration": true,
7 | "sourceMap": true,
8 | "outDir": "./build",
9 | "rootDir": "./src",
10 | "strictNullChecks": true,
11 | "noImplicitAny": true,
12 | "strictBindCallApply": true,
13 | "noUnusedLocals": true,
14 | "noUnusedParameters": true,
15 | "esModuleInterop": true,
16 | "skipLibCheck": true,
17 | "forceConsistentCasingInFileNames": true
18 | },
19 | "exclude": ["build", "node_modules", "test"],
20 | "references": [
21 | {
22 | "path": "../rrweb-player"
23 | },
24 | {
25 | "path": "../types"
26 | }
27 | ]
28 | }
29 |
--------------------------------------------------------------------------------
/packages/rrweb/test/html/image-blob-url.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Image with blob:url
8 |
9 |
10 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/packages/web-extension/src/popup/Timer.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { Stat, StatNumber } from '@chakra-ui/react';
3 | import { formatTime } from '~/utils';
4 |
5 | export function Timer({
6 | startTime,
7 | ticking,
8 | }: {
9 | startTime: number;
10 | ticking: boolean;
11 | }) {
12 | const [time, setTime] = useState(Date.now() - startTime);
13 | useEffect(() => {
14 | if (!ticking) return;
15 | const interval = setInterval(() => {
16 | setTime(Date.now() - startTime);
17 | }, 100);
18 | return () => clearInterval(interval);
19 | }, [startTime, ticking]);
20 | return (
21 |
22 | {formatTime(time)}
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/docs/recipes/interaction.md:
--------------------------------------------------------------------------------
1 | # Interact With UI During Replay
2 |
3 | By default, the UI could not interact during replay. But you can use API to enable/disable this programmatically.
4 |
5 | ```js
6 | const replayer = new rrweb.Replayer(events);
7 |
8 | // enable user interact with the UI
9 | replayer.enableInteract();
10 |
11 | // disable user interact with the UI
12 | replayer.disableInteract();
13 | ```
14 |
15 | rrweb uses the `pointer-events: none` CSS property to disable interaction.
16 |
17 | This will let the replay more stable and avoid some problems like navigate by clicking an external link.
18 |
19 | If you want to enable user interaction, like input, then you can use the `enableInteract` API. But be sure you have handled the problems that may cause unstable replay.
20 |
--------------------------------------------------------------------------------
/packages/rrweb-snapshot/test/html/video.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | video
8 |
9 |
10 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/packages/rrweb/test/html/polyfilled-shadowdom-mutation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/packages/rrdom/src/util.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Get the content document of an iframe.
3 | * Catching errors is necessary because some older browsers block access to the content document of a sandboxed iframe.
4 | */
5 | export function getIFrameContentDocument(iframe?: HTMLIFrameElement) {
6 | try {
7 | return (iframe as HTMLIFrameElement).contentDocument;
8 | } catch (e) {
9 | // noop
10 | }
11 | }
12 |
13 | /**
14 | * Get the content window of an iframe.
15 | * Catching errors is necessary because some older browsers block access to the content document of a sandboxed iframe.
16 | */
17 | export function getIFrameContentWindow(iframe?: HTMLIFrameElement) {
18 | try {
19 | return (iframe as HTMLIFrameElement).contentWindow;
20 | } catch (e) {
21 | // noop
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/rrweb-player/.svelte-kit/non-ambient.d.ts:
--------------------------------------------------------------------------------
1 |
2 | // this file is generated — do not edit it
3 |
4 |
5 | declare module "svelte/elements" {
6 | export interface HTMLAttributes {
7 | 'data-sveltekit-keepfocus'?: true | '' | 'off' | undefined | null;
8 | 'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
9 | 'data-sveltekit-preload-code'?:
10 | | true
11 | | ''
12 | | 'eager'
13 | | 'viewport'
14 | | 'hover'
15 | | 'tap'
16 | | 'off'
17 | | undefined
18 | | null;
19 | 'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null;
20 | 'data-sveltekit-reload'?: true | '' | 'off' | undefined | null;
21 | 'data-sveltekit-replacestate'?: true | '' | 'off' | undefined | null;
22 | }
23 | }
24 |
25 | export {};
26 |
--------------------------------------------------------------------------------
/packages/rrweb-player/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-auto';
2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors
7 | // for more information about preprocessors
8 | preprocess: vitePreprocess(),
9 |
10 | kit: {
11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
12 | // If your environment is not supported or you settled on a specific environment, switch out the adapter.
13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters.
14 | adapter: adapter(),
15 | },
16 | };
17 |
18 | export default config;
19 |
--------------------------------------------------------------------------------
/packages/rrweb-snapshot/test/html/with-relative-res.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 | Hello
12 | Hello
13 | Hello
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/rrweb/test/html/password.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/rrweb-snapshot/test/html/block-element.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
19 |
20 |
21 |
22 |
12 | Select2 is a jQuery replacement for select boxes.
13 |
14 | In the 3.5 version it use a quite complicated DOM generation strategy which is a good battle-test for rrweb's recorder.
15 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/packages/web-extension/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export function isFirefox(): boolean {
2 | return window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
3 | }
4 |
5 | export function isInCrossOriginIFrame(): boolean {
6 | if (window.parent !== window) {
7 | try {
8 | void window.parent.location.origin;
9 | } catch (error) {
10 | return true;
11 | }
12 | }
13 | return false;
14 | }
15 |
16 | const SECOND = 1000;
17 | const MINUTE = 60 * SECOND;
18 | const HOUR = 60 * MINUTE;
19 |
20 | export function formatTime(ms: number): string {
21 | if (ms <= 0) {
22 | return '00:00';
23 | }
24 | const hour = Math.floor(ms / HOUR);
25 | ms = ms % HOUR;
26 | const minute = Math.floor(ms / MINUTE);
27 | ms = ms % MINUTE;
28 | const second = Math.floor(ms / SECOND);
29 | if (hour) {
30 | return `${padZero(hour)}:${padZero(minute)}:${padZero(second)}`;
31 | }
32 | return `${padZero(minute)}:${padZero(second)}`;
33 | }
34 |
35 | function padZero(num: number, len = 2): string {
36 | let str = String(num);
37 | const threshold = Math.pow(10, len - 1);
38 | if (num < threshold) {
39 | while (String(threshold).length > str.length) {
40 | str = `0${num}`;
41 | }
42 | }
43 | return str;
44 | }
45 |
--------------------------------------------------------------------------------
/packages/rrweb/src/index.ts:
--------------------------------------------------------------------------------
1 | import record from './record';
2 | import {
3 | Replayer,
4 | type playerConfig,
5 | type PlayerState,
6 | type SpeedState,
7 | type PlayerMachineState,
8 | type SpeedMachineState,
9 | } from './replay';
10 | import canvasMutation from './replay/canvas';
11 | import * as utils from './utils';
12 |
13 | export {
14 | EventType,
15 | IncrementalSource,
16 | MouseInteractions,
17 | ReplayerEvents,
18 | } from '@sentry-internal/rrweb-types';
19 |
20 | export type {
21 | canvasMutationParam,
22 | canvasMutationData,
23 | eventWithTime,
24 | fullSnapshotEvent,
25 | incrementalSnapshotEvent,
26 | inputData,
27 | } from '@sentry-internal/rrweb-types';
28 |
29 | export type { recordOptions, ReplayPlugin } from './types';
30 | export { deserializeArg } from './replay/canvas/deserialize-args';
31 | export { addCustomEvent, freezePage, takeFullSnapshot } from './record';
32 | export type { CanvasManagerConstructorOptions } from './record';
33 | export { CanvasManager } from './record/observers/canvas/canvas-manager';
34 |
35 | export {
36 | record,
37 | Replayer,
38 | type playerConfig,
39 | type PlayerState,
40 | type SpeedState,
41 | type PlayerMachineState,
42 | type SpeedMachineState,
43 | canvasMutation,
44 | utils,
45 | };
46 |
--------------------------------------------------------------------------------
/packages/plugins/rrweb-plugin-sequential-id-replay/src/index.ts:
--------------------------------------------------------------------------------
1 | import type { SequentialIdOptions } from '@rrweb/rrweb-plugin-sequential-id-record';
2 | import type { ReplayPlugin } from '@sentry-internal/rrweb';
3 | import type { eventWithTime } from '@sentry-internal/rrweb-types';
4 |
5 | type Options = SequentialIdOptions & {
6 | warnOnMissingId: boolean;
7 | };
8 |
9 | const defaultOptions: Options = {
10 | key: '_sid',
11 | warnOnMissingId: true,
12 | };
13 |
14 | export const getReplaySequentialIdPlugin: (
15 | options?: Partial,
16 | ) => ReplayPlugin = (options) => {
17 | const { key, warnOnMissingId } = options
18 | ? Object.assign({}, defaultOptions, options)
19 | : defaultOptions;
20 | let currentId = 1;
21 |
22 | return {
23 | handler(event: eventWithTime) {
24 | if (key in event) {
25 | const id = (event as unknown as Record)[key];
26 | if (id !== currentId) {
27 | console.error(
28 | `[sequential-id-plugin]: expect to get an id with value "${currentId}", but got "${id}"`,
29 | );
30 | } else {
31 | currentId++;
32 | }
33 | } else if (warnOnMissingId) {
34 | console.warn(
35 | `[sequential-id-plugin]: failed to get id in key: "${key}"`,
36 | );
37 | }
38 | },
39 | };
40 | };
41 |
--------------------------------------------------------------------------------
/docs/recipes/canvas.md:
--------------------------------------------------------------------------------
1 | # Canvas
2 |
3 | Canvas is a special HTML element, and will not be recorded by rrweb by default.
4 | There are some options for recording and replaying Canvas.
5 |
6 | Enable recording Canvas：
7 |
8 | ```js
9 | rrweb.record({
10 | emit(event) {},
11 | recordCanvas: true,
12 | });
13 | ```
14 |
15 | Alternatively enable image snapshot recording of Canvas at a maximum of 15 frames per second：
16 |
17 | ```js
18 | rrweb.record({
19 | emit(event) {},
20 | recordCanvas: true,
21 | sampling: {
22 | canvas: 15,
23 | },
24 | // optional image format settings
25 | dataURLOptions: {
26 | type: 'image/webp',
27 | quality: 0.6,
28 | },
29 | });
30 | ```
31 |
32 | Enable replaying Canvas：
33 |
34 | ```js
35 | const replayer = new rrweb.Replayer(events, {
36 | UNSAFE_replayCanvas: true,
37 | });
38 | replayer.play();
39 | ```
40 |
41 | **Enable replaying Canvas will remove the sandbox, which may cause a potential security issue.**
42 |
43 | Alternatively you can stream canvas elements via webrtc with the [rrweb-plugin-canvas-webrtc-record](../../packages/plugins/rrweb-plugin-canvas-webrtc-record/) & [rrweb-plugin-canvas-webrtc-replay](../../packages/plugins/rrweb-plugin-canvas-webrtc-replay) plugins.
44 | For more information see [canvas-webrtc documentation](../../packages/plugins/rrweb-plugin-canvas-webrtc-record/Readme.md)
45 |
--------------------------------------------------------------------------------
/packages/rrweb-snapshot/test/html/form-fields-sensitive-update.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | form fields
8 |
9 |
10 |
11 |
37 |
38 |
43 |
44 |
--------------------------------------------------------------------------------
/.size-limit.js:
--------------------------------------------------------------------------------
1 | module.exports = [
2 | // Main browser webpack builds
3 | {
4 | name: 'rrweb - record only (gzipped)',
5 | path: 'packages/rrweb/es/rrweb/packages/rrweb/src/entries/all.js',
6 | import: '{ record }',
7 | gzip: true,
8 | },
9 | {
10 | name: 'rrweb - record & CanvasManager only (gzipped)',
11 | path: 'packages/rrweb/es/rrweb/packages/rrweb/src/entries/all.js',
12 | import: '{ record, CanvasManager }',
13 | gzip: true,
14 | },
15 | {
16 | name: 'rrweb - record only (min)',
17 | path: 'packages/rrweb/es/rrweb/packages/rrweb/src/entries/all.js',
18 | import: '{ record }',
19 | gzip: false,
20 | },
21 | {
22 | name: 'rrweb - record with treeshaking flags (gzipped)',
23 | path: 'packages/rrweb/es/rrweb/packages/rrweb/src/entries/all.js',
24 | import: '{ record }',
25 | gzip: true,
26 | modifyWebpackConfig: function (config) {
27 | const webpack = require('webpack');
28 | config.plugins.push(
29 | new webpack.DefinePlugin({
30 | __RRWEB_EXCLUDE_SHADOW_DOM__: true,
31 | __RRWEB_EXCLUDE_IFRAME__: true,
32 | }),
33 | );
34 | return config;
35 | },
36 | },
37 | {
38 | name: 'rrweb - Replayer',
39 | path: 'packages/rrweb/es/rrweb/packages/rrweb/src/entries/all.js',
40 | import: '{ Replayer }',
41 | gzip: true,
42 | },
43 | ];
44 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Prepare Release
2 | on:
3 | workflow_dispatch:
4 | inputs:
5 | version:
6 | description: Version to release
7 | required: true
8 | force:
9 | description: Force a release even when there are release-blockers (optional)
10 | required: false
11 | merge_target:
12 | description: Target branch to merge into. Uses the default branch (sentry-v2) as a fallback (optional)
13 | required: false
14 | jobs:
15 | release:
16 | runs-on: ubuntu-latest
17 | name: 'Release a new version'
18 | steps:
19 | - name: Get auth token
20 | id: token
21 | uses: actions/create-github-app-token@5d869da34e18e7287c1daad50e0b8ea0f506ce69 # v1.11.0
22 | with:
23 | app-id: ${{ vars.SENTRY_RELEASE_BOT_CLIENT_ID }}
24 | private-key: ${{ secrets.SENTRY_RELEASE_BOT_PRIVATE_KEY }}
25 | - uses: actions/checkout@v3
26 | with:
27 | token: ${{ steps.token.outputs.token }}
28 | fetch-depth: 0
29 | - name: Prepare release
30 | uses: getsentry/action-prepare-release@v1
31 | env:
32 | GITHUB_TOKEN: ${{ steps.token.outputs.token }}
33 | with:
34 | version: ${{ github.event.inputs.version }}
35 | force: ${{ github.event.inputs.force }}
36 | merge_target: ${{ github.event.inputs.merge_target }}
37 |
--------------------------------------------------------------------------------
/packages/packer/test/packer.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, it, expect, vi } from 'vitest';
2 | import { pack, unpack } from '../src';
3 | import { type eventWithTime, EventType } from '@sentry-internal/rrweb-types';
4 | import { MARK } from '../src/base';
5 |
6 | const event: eventWithTime = {
7 | type: EventType.DomContentLoaded,
8 | data: {},
9 | timestamp: new Date('2020-01-01').getTime(),
10 | };
11 |
12 | describe('pack', () => {
13 | it('can pack event', () => {
14 | const packedData = pack(event);
15 | expect(packedData).toMatchSnapshot();
16 | });
17 | });
18 |
19 | describe('unpack', () => {
20 | it('is compatible with unpacked data 1', () => {
21 | const result = unpack(event as unknown as string);
22 | expect(result).toEqual(event);
23 | });
24 |
25 | it('is compatible with unpacked data 2', () => {
26 | const result = unpack(JSON.stringify(event));
27 | expect(result).toEqual(event);
28 | });
29 |
30 | it('stop on unknown data format', () => {
31 | const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
32 |
33 | expect(() => unpack('[""]')).toThrow('');
34 |
35 | expect(consoleSpy).toHaveBeenCalled();
36 | vi.resetAllMocks();
37 | });
38 |
39 | it('can unpack packed data', () => {
40 | const packedData = pack(event);
41 | const result = unpack(packedData);
42 | expect(result).toEqual({
43 | ...event,
44 | v: MARK,
45 | });
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/docs/recipes/custom-event.md:
--------------------------------------------------------------------------------
1 | # Custom Event
2 |
3 | You may need to record some custom events along with the rrweb events, and let them be played as other events. The custom event API was designed for this.
4 |
5 | After starting the recording, we can call the `record.addCustomEvent` API to add a custom event.
6 |
7 | ```js
8 | // start recording
9 | rrweb.record({
10 | emit(event) {
11 | ...
12 | }
13 | })
14 |
15 | // record some custom events at any time
16 | rrweb.record.addCustomEvent('submit-form', {
17 | name: 'Adam',
18 | age: 18
19 | })
20 | rrweb.record.addCustomEvent('some-error', {
21 | error
22 | })
23 | ```
24 |
25 | `addCustomEvent` accepts two parameters. The first one is a string-type `tag`, while the second one is an any-type `payload`.
26 |
27 | During the replay, we can add an event listener to custom events, or configure the style of custom events in rrweb-player's timeline.
28 |
29 | **Listen to custom events**
30 |
31 | ```js
32 | const replayer = new rrweb.Replayer(events);
33 |
34 | replayer.on('custom-event', (event) => {
35 | console.log(event.tag, event.payload);
36 | });
37 | ```
38 |
39 | **Display in rrweb-player**
40 |
41 | ```js
42 | new rrwebPlayer({
43 | target: document.body,
44 | props: {
45 | events,
46 | // configure the color of tag which will be displayed on the timeline
47 | tags: {
48 | 'submit-form': '#21e676',
49 | 'some-error': 'red',
50 | },
51 | },
52 | });
53 | ```
54 |
--------------------------------------------------------------------------------
/packages/rrweb-worker/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@sentry-internal/rrweb-worker",
3 | "version": "2.39.0",
4 | "description": "Worker for rrweb",
5 | "main": "dist/rrweb-worker/index.js",
6 | "module": "dist/rrweb-worker/index.mjs",
7 | "types": "dist/typings/index.d.ts",
8 | "sideEffects": false,
9 | "private": true,
10 | "scripts": {
11 | "build": "rollup --config",
12 | "typings": "tsc -p tsconfig.types.json",
13 | "prepack": "yarn run typings && yarn run build",
14 | "check-types": "tsc -noEmit",
15 | "test": "vitest run",
16 | "test:watch": "vitest watch",
17 | "test:update": "vitest run --update",
18 | "lint": "yarn eslint src"
19 | },
20 | "repository": {
21 | "type": "git",
22 | "url": "git+https://github.com/getsentry/rrweb.git"
23 | },
24 | "author": "Sentry",
25 | "license": "MIT",
26 | "bugs": {
27 | "url": "https://github.com/getsentry/rrweb/issues"
28 | },
29 | "dependencies": {
30 | "@sentry-internal/rrweb-snapshot": "2.39.0",
31 | "@sentry-internal/rrweb-types": "2.39.0"
32 | },
33 | "devDependencies": {
34 | "@rollup/plugin-commonjs": "^28.0.2",
35 | "@rollup/plugin-node-resolve": "^16.0.0",
36 | "@types/css-font-loading-module": "0.0.7",
37 | "rollup": "^4.28.1",
38 | "rollup-plugin-terser": "^7.0.2",
39 | "rollup-plugin-typescript2": "^0.36.0",
40 | "vite": "^5.2.8",
41 | "vitest": "^1.4.0"
42 | },
43 | "engines": {
44 | "node": ">=12"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/packages/rrweb/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "include": ["src"],
4 | "compilerOptions": {
5 | "module": "ESNext",
6 | "moduleResolution": "Node",
7 | "target": "ES2020",
8 | "noImplicitAny": true,
9 | "strictNullChecks": true,
10 | "removeComments": true,
11 | "preserveConstEnums": true,
12 | "outDir": "build",
13 | "lib": [
14 | "es6",
15 | "dom",
16 | "es2021.WeakRef"
17 | ],
18 | "rootDir": "src",
19 | "tsBuildInfoFile": "./tsconfig.tsbuildinfo",
20 | "types": [
21 | // from tsconfig.base.json
22 | "vite/client",
23 | "@types/dom-mediacapture-transform",
24 | "@types/offscreencanvas",
25 |
26 | // rrweb specific:
27 | /*
28 | * @see https://vitest.dev/config/#globals
29 | * if we remove the --globals flag from the vite test command, we can remove this
30 | * to remove the flag, we need to add vitest imports in the test files
31 | */
32 | "vitest/globals"
33 | ],
34 |
35 | // TODO: enable me in the future, this is quite a large project
36 | // at time of writing (April 2024) there are over 100 errors in rrweb
37 | "strict": false
38 | },
39 | "references": [
40 | {
41 | "path": "../rrdom"
42 | },
43 | {
44 | "path": "../rrweb-snapshot"
45 | },
46 | {
47 | "path": "../types"
48 | },
49 | {
50 | "path": "../rrweb-worker"
51 | }
52 | ]
53 | }
54 |
--------------------------------------------------------------------------------
/packages/rrdom/src/style.ts:
--------------------------------------------------------------------------------
1 | export function parseCSSText(cssText: string): Record {
2 | const res: Record = {};
3 | const listDelimiter = /;(?![^(]*\))/g;
4 | const propertyDelimiter = /:(.+)/;
5 | const comment = /\/\*.*?\*\//g;
6 | cssText
7 | .replace(comment, '')
8 | .split(listDelimiter)
9 | .forEach(function (item) {
10 | if (item) {
11 | const tmp = item.split(propertyDelimiter);
12 | tmp.length > 1 && (res[camelize(tmp[0].trim())] = tmp[1].trim());
13 | }
14 | });
15 | return res;
16 | }
17 |
18 | export function toCSSText(style: Record): string {
19 | const properties = [];
20 | for (const name in style) {
21 | const value = style[name];
22 | if (typeof value !== 'string') continue;
23 | const normalizedName = hyphenate(name);
24 | properties.push(`${normalizedName}: ${value};`);
25 | }
26 | return properties.join(' ');
27 | }
28 |
29 | /**
30 | * Camelize a hyphen-delimited string.
31 | */
32 | const camelizeRE = /-([a-z])/g;
33 | const CUSTOM_PROPERTY_REGEX = /^--[a-zA-Z0-9-]+$/;
34 | export const camelize = (str: string): string => {
35 | if (CUSTOM_PROPERTY_REGEX.test(str)) return str;
36 | return str.replace(camelizeRE, (_, c: string) => (c ? c.toUpperCase() : ''));
37 | };
38 |
39 | /**
40 | * Hyphenate a camelCase string.
41 | */
42 | const hyphenateRE = /\B([A-Z])/g;
43 | export const hyphenate = (str: string): string => {
44 | return str.replace(hyphenateRE, '-$1').toLowerCase();
45 | };
46 |
--------------------------------------------------------------------------------
/packages/rrweb/test/html/benchmark-dom-mutation-add-and-remove.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
46 |
47 |
--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | /**
5 | * @see https://vitejs.dev/guide/features.html#target
6 | */
7 | "esModuleInterop": true,
8 | "target": "ESNext",
9 | "module": "ESNext",
10 | "moduleResolution": "Node",
11 | "rootDir": "src",
12 | "outDir": "dist",
13 | "lib": ["es6", "dom"],
14 | "sourceMap": true,
15 | "skipLibCheck": true,
16 | "declaration": true,
17 | "importsNotUsedAsValues": "error",
18 | "strict": true,
19 | "removeComments": true,
20 | "noImplicitAny": true,
21 | "strictNullChecks": true,
22 | "preserveConstEnums": true,
23 | "strictBindCallApply": true,
24 | "noUnusedLocals": true,
25 | "noUnusedParameters": true,
26 | "forceConsistentCasingInFileNames": true,
27 | "downlevelIteration": true,
28 |
29 | // needed for vite
30 | /**
31 | * @see https://vitejs.dev/guide/features.html#isolatedmodules
32 | */
33 | "isolatedModules": true,
34 |
35 | "types": [
36 | "node",
37 | /**
38 | * needed as long as we have jest tests
39 | * they add globals like `test` and `expect`
40 | */
41 | "jest",
42 | /**
43 | * @see https://vitejs.dev/guide/features.html#client-types
44 | */
45 | "vite/client",
46 | "@types/dom-mediacapture-transform",
47 | "@types/offscreencanvas"
48 | ]
49 | },
50 | "exclude": ["**/vite.config.ts", "**/vitest.config.ts", "**/test"],
51 | "compileOnSave": true
52 | }
53 |
--------------------------------------------------------------------------------
/packages/rrweb/test/replay/webgl-mutation.test.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @vitest-environment jsdom
3 | */
4 | import { vi } from 'vitest';
5 | import { polyfillWebGLGlobals } from '../utils';
6 | polyfillWebGLGlobals();
7 |
8 | import webglMutation from '../../src/replay/canvas/webgl';
9 | import { CanvasContext } from '@sentry-internal/rrweb-types';
10 | import { variableListFor } from '../../src/replay/canvas/deserialize-args';
11 |
12 | let canvas: HTMLCanvasElement;
13 | describe('webglMutation', () => {
14 | beforeEach(() => {
15 | canvas = document.createElement('canvas');
16 | });
17 | afterEach(() => {
18 | vi.clearAllMocks();
19 | });
20 |
21 | it('should create webgl variables', async () => {
22 | const createShaderMock = vi.fn().mockImplementation(() => {
23 | return new WebGLShader();
24 | });
25 | const context = {
26 | createShader: createShaderMock,
27 | } as unknown as WebGLRenderingContext;
28 | vi.spyOn(canvas, 'getContext').mockImplementation(() => {
29 | return context;
30 | });
31 |
32 | expect(variableListFor(context, 'WebGLShader')).toHaveLength(0);
33 |
34 | await webglMutation({
35 | mutation: {
36 | property: 'createShader',
37 | args: [35633],
38 | },
39 | type: CanvasContext.WebGL,
40 | target: canvas,
41 | imageMap: new Map(),
42 | errorHandler: () => {},
43 | });
44 |
45 | expect(createShaderMock).toHaveBeenCalledWith(35633);
46 | expect(variableListFor(context, 'WebGLShader')).toHaveLength(1);
47 | });
48 | });
49 |
--------------------------------------------------------------------------------
/packages/rrweb-snapshot/test/html/about-mozilla.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | The Book of Mozilla, 11:9
6 |
37 |
38 |
39 |
40 |
41 |
42 | Mammon slept. And the beast reborn spread over the earth and its numbers
43 | grew legion. And they proclaimed the times and sacrificed crops unto the
44 | fire, with the cunning of foxes. And they built a new world in their own
45 | image as promised by the
46 | sacred words, and spoke
47 | of the beast with their children. Mammon awoke, and lo! it was
48 | naught but a follower.
49 |
50 |
51 |
52 | from The Book of Mozilla, 11:9 (10th Edition)
53 |
7 | 
9 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/replay/src/index.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Replayer,
3 | type playerConfig,
4 | type PlayerMachineState,
5 | type SpeedMachineState,
6 | } from '@sentry-internal/rrweb';
7 | import '@sentry-internal/rrweb/dist/style.css';
8 |
9 | export { Replayer, playerConfig, PlayerMachineState, SpeedMachineState };
10 |
--------------------------------------------------------------------------------
/packages/rrweb/test/html/empty.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 
10 | 
11 | 
12 | 
16 |