Chore: Migrate build to vite (#1033)
* Chore: Add move most types from rrweb to @rrweb/types package * Split off type imports * Split off type import to its own line * Get vite to generate type definitions * Apply formatting changes * noEmit not allowed in tsconfig, moved it to build step * Migrate rrdom-nodejs build to vite * Apply formatting changes * Migrate rrweb-snapshot to vite * Unify configs * Chore: Migrate rrdom to vite Turns out what we where doing by overwriting `public textContent: string | undefined` as a getter in a subclass is something that isn't allowed in typescript. Because we where using `// @ts-ignore` to hide this error our bundler chose to allow the overwrite. Vite choses to disallow the overwrite making all subclasses' `textContent` undefined. To mitigate this we're using an abstract class, which does allow sub classes to decide if they wan't to use getters or not. * Chore: Migrate rrweb to vite WIP * build:browser was removed (for now) * BREAKING: moved rrweb-plugin-console to its own npm module This removes console from rrweb-all.js * Support cjs files in startServer * Move canvas-webrtc plugin to its own package * Chore: move sequential-id plugin to its own package * Chore: Configure rrweb's vite bundling * `Id` had lowercase `d` before, making it lowercase again * Test: Move console tests to their own package * remove unused utils from rrdom * pull in latest version of master something when wrong earlier when resolving merge conflicts, this should be correct * Fix type casting issue in diff.ts * Fix typo * Fix duplicate entries in package.json and tsconfig.json * Apply formatting changes * Update dependencies in package.json files * Update dependencies to use Vite 5.2.8 in package.json files * Get tests passing for rrdom `apply virtual style rules to node` tests need to be moved to rrweb to avoid circular dependencies * Fix image loading issue in integration tests * Move pack/unpack to its own @rrweb/packer module * Get tests to work in rrdom-nodejs * Port tests in rrweb-snapshot to vitest and fix them * Fix tests for rrweb-plugin-console-record * Add @rrweb/all package * Fix publint and attw errors for rrdom and @rrweb/types * Use shared vitest.config.ts in rrweb-snapshot package * Fix publint and attw issues for rrweb-snapshot * Export `ReplayPlugin` type directly from rrweb * Fix publint and attw issues for packages * Fix publint & attw issue. I was bumping into this issue:3729bc2a3c/docs/problems/NoResolution.mdAnd had to choose one of these three methods described here: https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility And I ended up going for the method described here:1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects)The redirect method seemed the least invasive and most effective. * Fix publint & attw issue. I was bumping into this issue:3729bc2a3c/docs/problems/NoResolution.mdAnd had to choose one of these three methods described here: https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility And I ended up going for the method described here:1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects)The redirect method seemed the least invasive and most effective. * move some rrdom tests that require rrweb to rrweb package * Use pre-jest 29 syntax for snapshotting * get rrweb passing publint and attw * const enum does not work with isolated modules flag * Fix script tag type in webgl.test.ts.snap and update rrweb.umd.cjs path in webgl.test.ts * Fix paths * Move tests for console record plugin and fix bundle path * Fix tests for rrweb * pack integration tests were moved to @rrweb/all * Update rrweb bundle path in test files * Fix flaky scroll emit from test * Migrate rrweb's tests over to vitest and make them pass * Make sure benchmarks & updating tests work * Remove jest from rrweb * Fix paths * always use rrweb's own cssom * Update tsconfig.json for rrweb-plugin-sequential-id-record Fixes this error: Error: @rrweb/rrweb-plugin-sequential-id-record:prepublish: tsconfig.json(9,5): error TS6377: Cannot write file '/home/runner/work/rrweb/rrweb/tsconfig.tsbuildinfo' because it will overwrite '.tsbuildinfo' file generated by referenced project '/home/runner/work/rrweb/rrweb/packages/rrweb' * Add tsbuildinfo config to extended tsconfig files * Move rrdom over to vitest * Apply formatting changes * Update rrweb imports to use the new package structure * extend rrweb-snapshot's tsconfig from monorepo base config * extend @rrweb/types's tsconfig from monorepo base config * extend rrdom's tsconfig from monorepo base config * extend rrdom-nodejs's tsconfig from monorepo base config * extend web-extension's tsconfig from monorepo base config * unify tsconfigs * Continue when tests fail * Add stricter type checking * Add check-types global command * remove jest * Remove unused code * Add check-types command to build script * Fix linting issues * Add setup Chrome action for CI/CD workflow * Update puppeteer version in package.json for rrweb * Update Chrome setup in CI/CD workflow * Update Chrome setup in CI/CD workflow * Add Chrome setup and test cache location * Update CI/CD workflow to test chrome cache location * Add chrome installation step to CI/CD workflow * Update Puppeteer configuration for headless testing * Update dependencies and workflow configuration * Use same version of chrome on CI as is run locally * Use version of chrome that seems to work with rrdom tests * Try using puppeteerrc to define chrome version * Add .cache directory to .gitignore * Move global flag to vitest config * Update puppeteer version to 20.9.0 * Update console log messages in rrweb-plugin-console-record for new puppeteer version * Remove redundant Chrome setup from CI/CD workflow * Add minification and umd for all built files * Update import paths for rrweb dist files * Add @rrweb/replay and @rrweb/record * Add script to lint packages * Apply formatting changes * exclude styles export from typescript package type checking * WIP Move rrweb-player over to vite * Apply formatting changes * chore: Update rrweb plugin import paths * Remove rollup from rrweb-player * Fix typing issues * Fix typing issues * chore: Update rrweb-player to use vite for build process * Apply formatting changes * chore: Export Player class in rrweb-player/src/main.ts Makes attw happy * Apply formatting changes * Gets wiped by yarn workspaces-to-typescript-project-references * Add .eslintignore and .eslintrc.cjs files for rrweb-player package * Apply formatting changes * Update dependencies in rrweb-player/package.json * Apply formatting changes * chore: Update eslint configuration for rrweb-player package * Apply formatting changes * chore: Remove unused files from rrweb-player package * Apply formatting changes * chore: Update rrweb-player import path to use rrweb-player.cjs * chore: Update addEventListener signature in rrweb-player * Apply formatting changes * Add .eslintignore and update .gitignore files for to root * Apply formatting changes * Update documentation * Update @rrweb/types package description * Apply formatting changes * Update build and run commands in CONTRIBUTING.md * Apply formatting changes * Update package versions to 2.0.0-alpha.13 * Apply formatting changes * Apply formatting changes * Fix import statement in media/index.ts * Apply formatting changes * chore: Update .gitignore to exclude build and dist directories * Apply formatting changes * Apply formatting changes * Migrate setTimeout to vitest * Apply formatting changes * Apply formatting changes * Fix isNativeShadowDom function signature in utils.ts * try out jsr * Apply formatting changes * Update package versions to 2.0.0-alpha.14 * Apply formatting changes * Fix name of rrwebSnapshot object * Apply formatting changes * Remove unused lock files * Apply formatting changes * Update rrweb bundle path to use umd.cjs format * Apply formatting changes * Trigger tests to run again * Rename snapshots for vitest * Apply formatting changes * Ping CI * Apply formatting changes * Ping CI * Apply formatting changes * Ignore files generated by svelte-kit for prettier * Correct Player object
This commit is contained in:
Justin Halsall
74
packages/plugins/rrweb-plugin-canvas-webrtc-record/Readme.md
Normal file
74
packages/plugins/rrweb-plugin-canvas-webrtc-record/Readme.md
Normal file
@@ -0,0 +1,74 @@
|
||||
# rrweb canvas webrtc plugin
|
||||
|
||||
Plugin that live streams contents of canvas elements via webrtc
|
||||
|
||||
## Example of live streaming via `yarn live-stream`
|
||||
|
||||
https://user-images.githubusercontent.com/4106/186701616-fd71a107-5d53-423c-ba09-0395a3a0252f.mov
|
||||
|
||||
## Instructions
|
||||
|
||||
### Record side
|
||||
|
||||
```js
|
||||
// Record side
|
||||
|
||||
import rrweb from 'rrweb';
|
||||
import { RRWebPluginCanvasWebRTCRecord } from 'rrweb-plugin-canvas-webrtc-record';
|
||||
|
||||
const webRTCRecordPlugin = new RRWebPluginCanvasWebRTCRecord({
|
||||
signalSendCallback: (msg) => {
|
||||
// provides webrtc sdp offer signal & connect message
|
||||
// make sure you send this to the replayer's `webRTCReplayPlugin.signalReceive(signal)`
|
||||
sendSignalToReplayer(msg); // example of function that sends the signal to the replayer
|
||||
},
|
||||
});
|
||||
|
||||
rrweb.record({
|
||||
emit: (event) => {
|
||||
// send these events to the `replayer.addEvent(event)`, how you do that is up to you
|
||||
// you can send them to a server for example which can then send them to the replayer
|
||||
sendEventToReplayer(event); // example of function that sends the event to the replayer
|
||||
},
|
||||
plugins: [
|
||||
// add the plugin to the list of plugins, and initialize it via `.initPlugin()`
|
||||
webRTCRecordPlugin.initPlugin(),
|
||||
],
|
||||
recordCanvas: false, // we don't want canvas recording turned on, we're going to do that via the plugin
|
||||
});
|
||||
```
|
||||
|
||||
### Replay Side
|
||||
|
||||
```js
|
||||
// Replay side
|
||||
import rrweb from 'rrweb';
|
||||
import { RRWebPluginCanvasWebRTCReplay } from 'rrweb-plugin-canvas-webrtc-replay';
|
||||
|
||||
const webRTCReplayPlugin = new RRWebPluginCanvasWebRTCReplay({
|
||||
canvasFoundCallback(canvas, context) {
|
||||
console.log('canvas', canvas);
|
||||
// send the canvas id to `webRTCRecordPlugin.setupStream(id)`, how you do that is up to you
|
||||
// you can send them to a server for example which can then send them to the replayer
|
||||
sendCanvasIdToRecordScript(context.id); // example of function that sends the id to the record script
|
||||
},
|
||||
signalSendCallback(signal) {
|
||||
// provides webrtc sdp offer signal & connect message
|
||||
// make sure you send this to the record script's `webRTCRecordPlugin.signalReceive(signal)`
|
||||
sendSignalToRecordScript(signal); // example of function that sends the signal to the record script
|
||||
},
|
||||
});
|
||||
|
||||
const replayer = new rrweb.Replayer([], {
|
||||
UNSAFE_replayCanvas: true, // turn canvas replay on!
|
||||
liveMode: true, // live mode is needed to stream events to the replayer
|
||||
plugins: [webRTCReplayPlugin.initPlugin()],
|
||||
});
|
||||
replayer.startLive(); // start the replayer in live mode
|
||||
|
||||
replayer.addEvent(event); // call this whenever an event is received from the record script
|
||||
```
|
||||
|
||||
## More info
|
||||
|
||||
https://github.com/rrweb-io/rrweb/pull/976
|
||||
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"name": "@rrweb/rrweb-plugin-canvas-webrtc-record",
|
||||
"version": "2.0.0-alpha.14",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./dist/rrweb-plugin-canvas-webrtc-record.umd.cjs",
|
||||
"module": "./dist/rrweb-plugin-canvas-webrtc-record.js",
|
||||
"unpkg": "./dist/rrweb-plugin-canvas-webrtc-record.umd.cjs",
|
||||
"typings": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"default": "./dist/rrweb-plugin-canvas-webrtc-record.js"
|
||||
},
|
||||
"require": {
|
||||
"types": "./dist/index.d.cts",
|
||||
"default": "./dist/rrweb-plugin-canvas-webrtc-record.cjs"
|
||||
}
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "vite build --watch",
|
||||
"build": "tsc -noEmit && vite build",
|
||||
"check-types": "tsc -noEmit",
|
||||
"prepublish": "npm run build"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/rrweb-io/rrweb.git"
|
||||
},
|
||||
"keywords": [
|
||||
"rrweb"
|
||||
],
|
||||
"author": "justin@recordonce.com",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/rrweb-io/rrweb/issues"
|
||||
},
|
||||
"homepage": "https://github.com/rrweb-io/rrweb#readme",
|
||||
"devDependencies": {
|
||||
"rrweb": "^2.0.0-alpha.14",
|
||||
"typescript": "^4.7.3",
|
||||
"vite": "^5.2.8",
|
||||
"vite-plugin-dts": "^3.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rrweb": "^2.0.0-alpha.14"
|
||||
}
|
||||
}
|
||||
306
packages/plugins/rrweb-plugin-canvas-webrtc-record/src/index.ts
Normal file
306
packages/plugins/rrweb-plugin-canvas-webrtc-record/src/index.ts
Normal file
@@ -0,0 +1,306 @@
|
||||
import type { Mirror } from 'rrweb-snapshot';
|
||||
import SimplePeer from 'simple-peer-light';
|
||||
import type { RecordPlugin, ICrossOriginIframeMirror } from '@rrweb/types';
|
||||
import type { WebRTCDataChannel } from './types';
|
||||
|
||||
export const PLUGIN_NAME = 'rrweb/canvas-webrtc@1';
|
||||
|
||||
export type CrossOriginIframeMessageEventContent = {
|
||||
type: 'rrweb-canvas-webrtc';
|
||||
data:
|
||||
| {
|
||||
type: 'signal';
|
||||
signal: RTCSessionDescriptionInit;
|
||||
}
|
||||
| {
|
||||
type: 'who-has-canvas';
|
||||
rootId: number;
|
||||
id: number;
|
||||
}
|
||||
| {
|
||||
type: 'i-have-canvas';
|
||||
rootId: number;
|
||||
};
|
||||
};
|
||||
|
||||
export class RRWebPluginCanvasWebRTCRecord {
|
||||
private peer: SimplePeer.Instance | null = null;
|
||||
private mirror: Mirror | undefined;
|
||||
private crossOriginIframeMirror: ICrossOriginIframeMirror | undefined;
|
||||
private streamMap: Map<number, MediaStream> = new Map();
|
||||
private incomingStreams = new Set<MediaStream>();
|
||||
private outgoingStreams = new Set<MediaStream>();
|
||||
private streamNodeMap = new Map<string, number>();
|
||||
private canvasWindowMap = new Map<number, WindowProxy>();
|
||||
private windowPeerMap = new WeakMap<WindowProxy, SimplePeer.Instance>();
|
||||
private peerWindowMap = new WeakMap<SimplePeer.Instance, WindowProxy>();
|
||||
private signalSendCallback: (msg: RTCSessionDescriptionInit) => void;
|
||||
|
||||
constructor({
|
||||
signalSendCallback,
|
||||
peer,
|
||||
}: {
|
||||
signalSendCallback: RRWebPluginCanvasWebRTCRecord['signalSendCallback'];
|
||||
peer?: SimplePeer.Instance;
|
||||
}) {
|
||||
this.signalSendCallback = signalSendCallback;
|
||||
window.addEventListener('message', (event: MessageEvent) =>
|
||||
this.windowPostMessageHandler(event),
|
||||
);
|
||||
if (peer) this.peer = peer;
|
||||
}
|
||||
public initPlugin(): RecordPlugin {
|
||||
return {
|
||||
name: PLUGIN_NAME,
|
||||
getMirror: ({ nodeMirror, crossOriginIframeMirror }) => {
|
||||
this.mirror = nodeMirror;
|
||||
this.crossOriginIframeMirror = crossOriginIframeMirror;
|
||||
},
|
||||
options: {},
|
||||
};
|
||||
}
|
||||
|
||||
public signalReceive(signal: RTCSessionDescriptionInit) {
|
||||
if (!this.peer) this.setupPeer();
|
||||
this.peer?.signal(signal);
|
||||
}
|
||||
|
||||
public signalReceiveFromCrossOriginIframe(
|
||||
signal: RTCSessionDescriptionInit,
|
||||
source: WindowProxy,
|
||||
) {
|
||||
const peer = this.setupPeer(source);
|
||||
peer.signal(signal);
|
||||
}
|
||||
|
||||
private startStream(id: number, stream: MediaStream) {
|
||||
if (!this.peer) this.setupPeer();
|
||||
|
||||
const data: WebRTCDataChannel = {
|
||||
nodeId: id,
|
||||
streamId: stream.id,
|
||||
};
|
||||
this.peer?.send(JSON.stringify(data));
|
||||
if (!this.outgoingStreams.has(stream)) this.peer?.addStream(stream);
|
||||
this.outgoingStreams.add(stream);
|
||||
}
|
||||
|
||||
public setupPeer(source?: WindowProxy): SimplePeer.Instance {
|
||||
let peer: SimplePeer.Instance;
|
||||
|
||||
if (!source) {
|
||||
if (this.peer) return this.peer;
|
||||
|
||||
peer = this.peer = new SimplePeer({
|
||||
initiator: true,
|
||||
// trickle: false, // only create one WebRTC offer per session
|
||||
});
|
||||
} else {
|
||||
const peerFromMap = this.windowPeerMap.get(source);
|
||||
|
||||
if (peerFromMap) return peerFromMap;
|
||||
|
||||
peer = new SimplePeer({
|
||||
initiator: false,
|
||||
// trickle: false, // only create one WebRTC offer per session
|
||||
});
|
||||
this.windowPeerMap.set(source, peer);
|
||||
this.peerWindowMap.set(peer, source);
|
||||
}
|
||||
|
||||
const resetPeer = (source?: WindowProxy) => {
|
||||
if (!source) return (this.peer = null);
|
||||
|
||||
this.windowPeerMap.delete(source);
|
||||
this.peerWindowMap.delete(peer);
|
||||
};
|
||||
|
||||
peer.on('error', (err: Error) => {
|
||||
resetPeer(source);
|
||||
console.log('error', err);
|
||||
});
|
||||
|
||||
peer.on('close', () => {
|
||||
resetPeer(source);
|
||||
console.log('closing');
|
||||
});
|
||||
|
||||
peer.on('signal', (data: RTCSessionDescriptionInit) => {
|
||||
if (this.inRootFrame()) {
|
||||
if (peer === this.peer) {
|
||||
// connected to replayer
|
||||
this.signalSendCallback(data);
|
||||
} else {
|
||||
// connected to cross-origin iframe
|
||||
this.peerWindowMap.get(peer)?.postMessage(
|
||||
{
|
||||
type: 'rrweb-canvas-webrtc',
|
||||
data: {
|
||||
type: 'signal',
|
||||
signal: data,
|
||||
},
|
||||
} as CrossOriginIframeMessageEventContent,
|
||||
'*',
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// connected to root frame
|
||||
window.top?.postMessage(
|
||||
{
|
||||
type: 'rrweb-canvas-webrtc',
|
||||
data: {
|
||||
type: 'signal',
|
||||
signal: data,
|
||||
},
|
||||
} as CrossOriginIframeMessageEventContent,
|
||||
'*',
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
peer.on('connect', () => {
|
||||
// connected to cross-origin iframe, no need to do anything
|
||||
if (this.inRootFrame() && peer !== this.peer) return;
|
||||
|
||||
// cross origin frame connected to root frame
|
||||
// or root frame connected to replayer
|
||||
// send all streams to peer
|
||||
for (const [id, stream] of this.streamMap) {
|
||||
this.startStream(id, stream);
|
||||
}
|
||||
});
|
||||
|
||||
if (!this.inRootFrame()) return peer;
|
||||
|
||||
peer.on('data', (data: SimplePeer.SimplePeerData) => {
|
||||
try {
|
||||
const json = JSON.parse(data as string) as WebRTCDataChannel;
|
||||
this.streamNodeMap.set(json.streamId, json.nodeId);
|
||||
} catch (error) {
|
||||
console.error('Could not parse data', error);
|
||||
}
|
||||
this.flushStreams();
|
||||
});
|
||||
|
||||
peer.on('stream', (stream: MediaStream) => {
|
||||
this.incomingStreams.add(stream);
|
||||
this.flushStreams();
|
||||
});
|
||||
|
||||
return peer;
|
||||
}
|
||||
|
||||
public setupStream(id: number, rootId?: number): boolean | MediaStream {
|
||||
if (id === -1 || !this.mirror) return false;
|
||||
let stream: MediaStream | undefined = this.streamMap.get(rootId || id);
|
||||
if (stream) return stream;
|
||||
|
||||
const el = this.mirror.getNode(id) as HTMLCanvasElement | null;
|
||||
|
||||
if (!el || !('captureStream' in el))
|
||||
// we don't have it, lets check our iframes
|
||||
return this.setupStreamInCrossOriginIframe(id, rootId || id);
|
||||
|
||||
if (!this.inRootFrame()) {
|
||||
window.top?.postMessage(
|
||||
{
|
||||
type: 'rrweb-canvas-webrtc',
|
||||
data: {
|
||||
type: 'i-have-canvas',
|
||||
rootId: rootId || id,
|
||||
},
|
||||
} as CrossOriginIframeMessageEventContent,
|
||||
'*',
|
||||
);
|
||||
}
|
||||
|
||||
stream = el.captureStream();
|
||||
this.streamMap.set(rootId || id, stream);
|
||||
this.setupPeer();
|
||||
|
||||
return stream;
|
||||
}
|
||||
|
||||
private flushStreams() {
|
||||
this.incomingStreams.forEach((stream) => {
|
||||
const nodeId = this.streamNodeMap.get(stream.id);
|
||||
if (!nodeId) return;
|
||||
// got remote video stream, now let's send it to the replayer
|
||||
this.startStream(nodeId, stream);
|
||||
});
|
||||
}
|
||||
|
||||
private inRootFrame(): boolean {
|
||||
return Boolean(window.top && window.top === window);
|
||||
}
|
||||
|
||||
public setupStreamInCrossOriginIframe(id: number, rootId: number): boolean {
|
||||
let found = false;
|
||||
|
||||
document.querySelectorAll('iframe').forEach((iframe) => {
|
||||
if (found) return;
|
||||
if (!this.crossOriginIframeMirror) return;
|
||||
|
||||
const remoteId = this.crossOriginIframeMirror.getRemoteId(iframe, id);
|
||||
if (remoteId === -1) return;
|
||||
|
||||
found = true;
|
||||
iframe.contentWindow?.postMessage(
|
||||
{
|
||||
type: 'rrweb-canvas-webrtc',
|
||||
data: {
|
||||
type: 'who-has-canvas',
|
||||
id: remoteId,
|
||||
rootId,
|
||||
},
|
||||
} as CrossOriginIframeMessageEventContent,
|
||||
'*',
|
||||
);
|
||||
});
|
||||
return found;
|
||||
}
|
||||
|
||||
private isCrossOriginIframeMessageEventContent(
|
||||
event: MessageEvent<unknown>,
|
||||
): event is MessageEvent<CrossOriginIframeMessageEventContent> {
|
||||
return Boolean(
|
||||
event.data &&
|
||||
typeof event.data === 'object' &&
|
||||
'type' in event.data &&
|
||||
'data' in event.data &&
|
||||
(event.data as CrossOriginIframeMessageEventContent).type ===
|
||||
'rrweb-canvas-webrtc' &&
|
||||
(event.data as CrossOriginIframeMessageEventContent).data,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* All messages being sent to the (root or sub) frame are received through `windowPostMessageHandler`.
|
||||
* @param event - The message event
|
||||
*/
|
||||
private windowPostMessageHandler(
|
||||
event: MessageEvent<CrossOriginIframeMessageEventContent> | MessageEvent,
|
||||
) {
|
||||
if (!this.isCrossOriginIframeMessageEventContent(event)) return;
|
||||
|
||||
const { type } = event.data.data;
|
||||
if (type === 'who-has-canvas') {
|
||||
const { id, rootId } = event.data.data;
|
||||
this.setupStream(id, rootId);
|
||||
} else if (type === 'signal') {
|
||||
const { signal } = event.data.data;
|
||||
const { source } = event;
|
||||
if (!source || !('self' in source)) return;
|
||||
if (this.inRootFrame()) {
|
||||
this.signalReceiveFromCrossOriginIframe(signal, source);
|
||||
} else {
|
||||
this.signalReceive(signal);
|
||||
}
|
||||
} else if (type === 'i-have-canvas') {
|
||||
const { rootId } = event.data.data;
|
||||
const { source } = event;
|
||||
if (!source || !('self' in source)) return;
|
||||
this.canvasWindowMap.set(rootId, source);
|
||||
}
|
||||
}
|
||||
}
|
||||
309
packages/plugins/rrweb-plugin-canvas-webrtc-record/src/simple-peer-light.d.ts
vendored
Normal file
309
packages/plugins/rrweb-plugin-canvas-webrtc-record/src/simple-peer-light.d.ts
vendored
Normal file
@@ -0,0 +1,309 @@
|
||||
/* eslint-disable */
|
||||
/// <reference types="node" />
|
||||
declare module 'simple-peer-light' {
|
||||
import * as stream from 'stream';
|
||||
|
||||
const SimplePeer: SimplePeer.SimplePeer;
|
||||
|
||||
namespace SimplePeer {
|
||||
interface Options {
|
||||
/** set to `true` if this is the initiating peer */
|
||||
initiator?: boolean | undefined;
|
||||
/** custom webrtc data channel configuration (used by [`createDataChannel`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createDataChannel)) */
|
||||
channelConfig?: RTCDataChannelInit | undefined;
|
||||
/** custom webrtc data channel name */
|
||||
channelName?: string | undefined;
|
||||
/** custom webrtc configuration (used by [`RTCPeerConnection`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection) constructor) */
|
||||
config?: RTCConfiguration | undefined;
|
||||
/** custom offer options (used by [`createOffer`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createOffer) method) */
|
||||
offerOptions?: RTCOfferOptions | undefined;
|
||||
/** custom answer options (used by [`createAnswer`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createAnswer) method) */
|
||||
answerOptions?: RTCAnswerOptions | undefined;
|
||||
/** function to transform the generated SDP signaling data (for advanced users) */
|
||||
sdpTransform?: ((this: Instance, sdp: string) => string) | undefined;
|
||||
/** if video/voice is desired, pass stream returned from [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) */
|
||||
stream?: MediaStream | undefined;
|
||||
/** an array of MediaStreams returned from [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) */
|
||||
streams?: MediaStream[] | undefined;
|
||||
/** set to `false` to disable [trickle ICE](http://webrtchacks.com/trickle-ice/) and get a single 'signal' event (slower) */
|
||||
trickle?: boolean | undefined;
|
||||
/** similar to `trickle`, needs to be set to `false` to disable trickling, defaults to `false` */
|
||||
allowHalfTrickle?: boolean | undefined;
|
||||
/** if `trickle` is set to `false`, determines how long to wait before providing an offer or answer; default value is 5000 milliseconds */
|
||||
iceCompleteTimeout?: number | undefined;
|
||||
/** custom webrtc implementation, mainly useful in node to specify in the [wrtc](https://npmjs.com/package/wrtc) package. */
|
||||
wrtc?:
|
||||
| {
|
||||
RTCPeerConnection: typeof RTCPeerConnection;
|
||||
RTCSessionDescription: typeof RTCSessionDescription;
|
||||
RTCIceCandidate: typeof RTCIceCandidate;
|
||||
}
|
||||
| undefined;
|
||||
/** set to true to create the stream in Object Mode. In this mode, incoming string data is not automatically converted to Buffer objects. */
|
||||
objectMode?: boolean | undefined;
|
||||
}
|
||||
interface SimplePeer {
|
||||
prototype: Instance;
|
||||
/**
|
||||
* Create a new WebRTC peer connection.
|
||||
*
|
||||
* A "data channel" for text/binary communication is always established, because it's cheap and often useful. For video/voice communication, pass the stream option.
|
||||
*
|
||||
* If opts is specified, then the default options (see <https://github.com/feross/simple-peer#peer--new-peeropts>) will be overridden.
|
||||
*/
|
||||
new (opts?: Options): Instance;
|
||||
|
||||
/** Detect native WebRTC support in the javascript environment. */
|
||||
readonly WEBRTC_SUPPORT: boolean;
|
||||
|
||||
// ********************************
|
||||
// methods which are not documented
|
||||
// ********************************
|
||||
|
||||
/**
|
||||
* Expose peer and data channel config for overriding all Peer
|
||||
* instances. Otherwise, just set opts.config or opts.channelConfig
|
||||
* when constructing a Peer.
|
||||
*/
|
||||
config: RTCConfiguration;
|
||||
/**
|
||||
* Expose peer and data channel config for overriding all Peer
|
||||
* instances. Otherwise, just set opts.config or opts.channelConfig
|
||||
* when constructing a Peer.
|
||||
*/
|
||||
channelConfig: RTCDataChannelInit;
|
||||
}
|
||||
|
||||
type TypedArray =
|
||||
| Int8Array
|
||||
| Uint8Array
|
||||
| Uint8ClampedArray
|
||||
| Int16Array
|
||||
| Uint16Array
|
||||
| Int32Array
|
||||
| Uint32Array
|
||||
| Float32Array
|
||||
| Float64Array;
|
||||
|
||||
type SimplePeerData = string | Buffer | TypedArray | ArrayBuffer | Blob;
|
||||
|
||||
type SignalData =
|
||||
| {
|
||||
type: 'transceiverRequest';
|
||||
transceiverRequest: {
|
||||
kind: string;
|
||||
init?: RTCRtpTransceiverInit | undefined;
|
||||
};
|
||||
}
|
||||
| {
|
||||
type: 'renegotiate';
|
||||
renegotiate: true;
|
||||
}
|
||||
| {
|
||||
type: 'candidate';
|
||||
candidate: RTCIceCandidate;
|
||||
}
|
||||
| RTCSessionDescriptionInit;
|
||||
|
||||
interface Instance extends stream.Duplex {
|
||||
/**
|
||||
* Call this method whenever the remote peer emits a `peer.on('signal')` event.
|
||||
*
|
||||
* The `data` will encapsulate a webrtc offer, answer, or ice candidate. These messages help
|
||||
* the peers to eventually establish a direct connection to each other. The contents of these
|
||||
* strings are an implementation detail that can be ignored by the user of this module;
|
||||
* simply pass the data from 'signal' events to the remote peer and call `peer.signal(data)`
|
||||
* to get connected.
|
||||
*/
|
||||
signal(data: string | SignalData): void;
|
||||
|
||||
/**
|
||||
* Send text/binary data to the remote peer. `data` can be any of several types: `String`,
|
||||
* `Buffer` (see [buffer](https://github.com/feross/buffer)), `ArrayBufferView` (`Uint8Array`,
|
||||
* etc.), `ArrayBuffer`, or `Blob` (in browsers that support it).
|
||||
*
|
||||
* Note: If this method is called before the `peer.on('connect')` event has fired,
|
||||
* then an exception will be thrown. Use `peer.write(data)`
|
||||
* (which is inherited from the node.js [duplex stream](https://nodejs.org/api/stream.html) interface)
|
||||
* if you want this data to be buffered instead.
|
||||
*/
|
||||
send(data: SimplePeerData): void;
|
||||
|
||||
/** Add a `MediaStream` to the connection. */
|
||||
addStream(stream: MediaStream): void;
|
||||
|
||||
/** Remove a `MediaStream` from the connection. */
|
||||
removeStream(stream: MediaStream): void;
|
||||
|
||||
/** Add a `MediaStreamTrack` to the connection. Must also pass the `MediaStream` you want to attach it to. */
|
||||
addTrack(track: MediaStreamTrack, stream: MediaStream): void;
|
||||
|
||||
/** Remove a `MediaStreamTrack` from the connection. Must also pass the `MediaStream` that it was attached to. */
|
||||
removeTrack(track: MediaStreamTrack, stream: MediaStream): void;
|
||||
|
||||
/** Replace a `MediaStreamTrack` with another track. Must also pass the `MediaStream` that the old track was attached to. */
|
||||
replaceTrack(
|
||||
oldTrack: MediaStreamTrack,
|
||||
newTrack: MediaStreamTrack,
|
||||
stream: MediaStream,
|
||||
): void;
|
||||
|
||||
/** Add a `RTCRtpTransceiver` to the connection. Can be used to add transceivers before adding tracks. Automatically called as necessary by `addTrack`. */
|
||||
addTransceiver(kind: string, init?: RTCRtpTransceiverInit): void;
|
||||
|
||||
// TODO: https://github.com/feross/simple-peer/blob/d972548299a50f836ca91c36e39304ef0f9474b7/index.js#L427
|
||||
// destroy(onclose?: () => void): void;
|
||||
/**
|
||||
* Destroy and cleanup this peer connection.
|
||||
*
|
||||
* If the optional `err` parameter is passed, then it will be emitted as an `'error'`
|
||||
* event on the stream.
|
||||
*/
|
||||
destroy(error?: Error): any;
|
||||
|
||||
// ********************************
|
||||
// methods which are not documented
|
||||
// ********************************
|
||||
|
||||
readonly bufferSize: number;
|
||||
readonly connected: boolean;
|
||||
address():
|
||||
| { port: undefined; family: undefined; address: undefined }
|
||||
| { port: number; family: 'IPv6' | 'IPv4'; address: string };
|
||||
|
||||
// used for debug logging
|
||||
_debug(message?: any, ...optionalParams: any[]): void;
|
||||
|
||||
// ******
|
||||
// events
|
||||
// ******
|
||||
addListener(
|
||||
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
|
||||
listener: () => void,
|
||||
): this;
|
||||
addListener(event: 'signal', listener: (data: SignalData) => void): this;
|
||||
addListener(
|
||||
event: 'stream',
|
||||
listener: (stream: MediaStream) => void,
|
||||
): this;
|
||||
addListener(
|
||||
event: 'track',
|
||||
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
|
||||
): this;
|
||||
addListener(event: 'data', listener: (chunk: any) => void): this;
|
||||
addListener(event: 'error', listener: (err: Error) => void): this;
|
||||
addListener(
|
||||
event: string | symbol,
|
||||
listener: (...args: any[]) => void,
|
||||
): this;
|
||||
|
||||
emit(
|
||||
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
|
||||
): boolean;
|
||||
emit(event: 'signal', data: SignalData): this;
|
||||
emit(event: 'stream', stream: MediaStream): this;
|
||||
emit(event: 'track', track: MediaStreamTrack, stream: MediaStream): this;
|
||||
emit(event: 'data', chunk: any): boolean;
|
||||
emit(event: 'error', err: Error): boolean;
|
||||
emit(event: string | symbol, ...args: any[]): boolean;
|
||||
|
||||
on(
|
||||
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
|
||||
listener: () => void,
|
||||
): this;
|
||||
on(event: 'signal', listener: (data: SignalData) => void): this;
|
||||
on(event: 'stream', listener: (stream: MediaStream) => void): this;
|
||||
on(
|
||||
event: 'track',
|
||||
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
|
||||
): this;
|
||||
on(event: 'data', listener: (chunk: any) => void): this;
|
||||
on(event: 'error', listener: (err: Error) => void): this;
|
||||
on(event: string | symbol, listener: (...args: any[]) => void): this;
|
||||
|
||||
once(
|
||||
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
|
||||
listener: () => void,
|
||||
): this;
|
||||
once(event: 'signal', listener: (data: SignalData) => void): this;
|
||||
once(event: 'stream', listener: (stream: MediaStream) => void): this;
|
||||
once(
|
||||
event: 'track',
|
||||
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
|
||||
): this;
|
||||
once(event: 'data', listener: (chunk: any) => void): this;
|
||||
once(event: 'error', listener: (err: Error) => void): this;
|
||||
once(event: string | symbol, listener: (...args: any[]) => void): this;
|
||||
|
||||
prependListener(
|
||||
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
|
||||
listener: () => void,
|
||||
): this;
|
||||
prependListener(
|
||||
event: 'signal',
|
||||
listener: (data: SignalData) => void,
|
||||
): this;
|
||||
prependListener(
|
||||
event: 'stream',
|
||||
listener: (stream: MediaStream) => void,
|
||||
): this;
|
||||
prependListener(
|
||||
event: 'track',
|
||||
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
|
||||
): this;
|
||||
prependListener(event: 'data', listener: (chunk: any) => void): this;
|
||||
prependListener(event: 'error', listener: (err: Error) => void): this;
|
||||
prependListener(
|
||||
event: string | symbol,
|
||||
listener: (...args: any[]) => void,
|
||||
): this;
|
||||
|
||||
prependOnceListener(
|
||||
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
|
||||
listener: () => void,
|
||||
): this;
|
||||
prependOnceListener(
|
||||
event: 'signal',
|
||||
listener: (data: SignalData) => void,
|
||||
): this;
|
||||
prependOnceListener(
|
||||
event: 'stream',
|
||||
listener: (stream: MediaStream) => void,
|
||||
): this;
|
||||
prependOnceListener(
|
||||
event: 'track',
|
||||
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
|
||||
): this;
|
||||
prependOnceListener(event: 'data', listener: (chunk: any) => void): this;
|
||||
prependOnceListener(event: 'error', listener: (err: Error) => void): this;
|
||||
prependOnceListener(
|
||||
event: string | symbol,
|
||||
listener: (...args: any[]) => void,
|
||||
): this;
|
||||
|
||||
removeListener(
|
||||
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
|
||||
listener: () => void,
|
||||
): this;
|
||||
removeListener(
|
||||
event: 'signal',
|
||||
listener: (data: SignalData) => void,
|
||||
): this;
|
||||
removeListener(
|
||||
event: 'stream',
|
||||
listener: (stream: MediaStream) => void,
|
||||
): this;
|
||||
removeListener(
|
||||
event: 'track',
|
||||
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
|
||||
): this;
|
||||
removeListener(event: 'data', listener: (chunk: any) => void): this;
|
||||
removeListener(event: 'error', listener: (err: Error) => void): this;
|
||||
removeListener(
|
||||
event: string | symbol,
|
||||
listener: (...args: any[]) => void,
|
||||
): this;
|
||||
}
|
||||
}
|
||||
export default SimplePeer;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export interface WebRTCDataChannel {
|
||||
nodeId: number;
|
||||
streamId: string;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.base.json",
|
||||
"include": ["src"],
|
||||
"exclude": ["vite.config.ts"],
|
||||
"compilerOptions": {
|
||||
"rootDir": "src",
|
||||
"tsBuildInfoFile": "./tsconfig.tsbuildinfo"
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"path": "../../rrweb"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import config from '../../../vite.config.default';
|
||||
|
||||
export default config('src/index.ts', 'rrwebPluginCanvasWebRTCRecord');
|
||||
248
packages/plugins/rrweb-plugin-canvas-webrtc-replay/Readme.md
Normal file
248
packages/plugins/rrweb-plugin-canvas-webrtc-replay/Readme.md
Normal file
@@ -0,0 +1,248 @@
|
||||
# rrweb canvas webrtc plugin
|
||||
|
||||
Plugin that live streams contents of canvas elements via webrtc
|
||||
|
||||
## Example of live streaming via `yarn live-stream`
|
||||
|
||||
https://user-images.githubusercontent.com/4106/186701616-fd71a107-5d53-423c-ba09-0395a3a0252f.mov
|
||||
|
||||
## Instructions
|
||||
|
||||
### Record side
|
||||
|
||||
```js
|
||||
// Record side
|
||||
|
||||
import rrweb from 'rrweb';
|
||||
import { RRWebPluginCanvasWebRTCRecord } from '@rrweb/rrweb-plugin-canvas-webrtc-record';
|
||||
|
||||
const webRTCRecordPlugin = new RRWebPluginCanvasWebRTCRecord({
|
||||
signalSendCallback: (msg) => {
|
||||
// provides webrtc sdp offer signal & connect message
|
||||
// make sure you send this to the replayer's `webRTCReplayPlugin.signalReceive(signal)`
|
||||
sendSignalToReplayer(msg); // example of function that sends the signal to the replayer
|
||||
},
|
||||
});
|
||||
|
||||
rrweb.record({
|
||||
emit: (event) => {
|
||||
// send these events to the `replayer.addEvent(event)`, how you do that is up to you
|
||||
// you can send them to a server for example which can then send them to the replayer
|
||||
sendEventToReplayer(event); // example of function that sends the event to the replayer
|
||||
},
|
||||
plugins: [
|
||||
// add the plugin to the list of plugins, and initialize it via `.initPlugin()`
|
||||
webRTCRecordPlugin.initPlugin(),
|
||||
],
|
||||
recordCanvas: false, // we don't want canvas recording turned on, we're going to do that via the plugin
|
||||
});
|
||||
```
|
||||
|
||||
### Replay Side
|
||||
|
||||
```js
|
||||
// Replay side
|
||||
import rrweb from 'rrweb';
|
||||
import { RRWebPluginCanvasWebRTCReplay } from '@rrweb/rrweb-plugin-canvas-webrtc-replay';
|
||||
|
||||
const webRTCReplayPlugin = new RRWebPluginCanvasWebRTCReplay({
|
||||
canvasFoundCallback(canvas, context) {
|
||||
console.log('canvas', canvas);
|
||||
// send the canvas id to `webRTCRecordPlugin.setupStream(id)`, how you do that is up to you
|
||||
// you can send them to a server for example which can then send them to the replayer
|
||||
sendCanvasIdToRecordScript(context.id); // example of function that sends the id to the record script
|
||||
},
|
||||
signalSendCallback(signal) {
|
||||
// provides webrtc sdp offer signal & connect message
|
||||
// make sure you send this to the record script's `webRTCRecordPlugin.signalReceive(signal)`
|
||||
sendSignalToRecordScript(signal); // example of function that sends the signal to the record script
|
||||
},
|
||||
});
|
||||
|
||||
const replayer = new rrweb.Replayer([], {
|
||||
UNSAFE_replayCanvas: true, // turn canvas replay on!
|
||||
liveMode: true, // live mode is needed to stream events to the replayer
|
||||
plugins: [webRTCReplayPlugin.initPlugin()],
|
||||
});
|
||||
replayer.startLive(); // start the replayer in live mode
|
||||
|
||||
replayer.addEvent(event); // call this whenever an event is received from the record script
|
||||
```
|
||||
|
||||
## More info
|
||||
|
||||
https://github.com/rrweb-io/rrweb/pull/976
|
||||
|
||||
## Sponsors
|
||||
|
||||
[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site.
|
||||
|
||||
### Gold Sponsors 🥇
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/0/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/1/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/2/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/3/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/4/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/5/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/6/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Silver Sponsors 🥈
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/0/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/1/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/2/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/3/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/4/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/5/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/6/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Bronze Sponsors 🥉
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/0/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/1/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/2/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/3/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/4/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/5/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/6/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/7/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/8/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Backers
|
||||
|
||||
<a href="https://opencollective.com/rrweb#sponsor" rel="nofollow"><img src="https://opencollective.com/rrweb/tiers/backers.svg?avatarHeight=36"></a>
|
||||
|
||||
## Core Team Members
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://github.com/Yuyz0112">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/13651389?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Yuyz0112</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/YunFeng0817">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/27533910?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Yun Feng</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/eoghanmurray">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/156780?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>eoghanmurray</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/Juice10">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/4106?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Juice10</b></sub>
|
||||
<br /><sub>open for rrweb consulting</sub>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Who's using rrweb?
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="http://www.smartx.com/" target="_blank">
|
||||
<img width="195px" src="https://www.rrweb.io/logos/smartx.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
|
||||
<img width="195px" src="https://www.rrweb.io/logos/posthog.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://statcounter.com/session-replay/" target="_blank">
|
||||
<img width="195px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://recordonce.com/" target="_blank">
|
||||
<img width="195px" alt="Smart screen recording for SaaS" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://cux.io" target="_blank">
|
||||
<img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://remsupp.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Remote Access & Co-Browsing" width="195px" src="https://remsupp.com/images/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://highlight.io" target="_blank">
|
||||
<img style="padding: 8px" alt="The open source, fullstack Monitoring Platform." width="195px" src="https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://analyzee.io" target="_blank">
|
||||
<img style="padding: 8px" alt="Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions." width="195px" src="https://cdn.analyzee.io/assets/analyzee-logo.png">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://requestly.io" target="_blank">
|
||||
<img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://gleap.io" target="_blank">
|
||||
<img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://uxwizz.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://www.howdygo.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Interactive product demos for small marketing teams" width="195px" src="https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"name": "@rrweb/rrweb-plugin-canvas-webrtc-replay",
|
||||
"version": "2.0.0-alpha.14",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./dist/rrweb-plugin-canvas-webrtc-replay.umd.cjs",
|
||||
"module": "./dist/rrweb-plugin-canvas-webrtc-replay.js",
|
||||
"unpkg": "./dist/rrweb-plugin-canvas-webrtc-replay.umd.cjs",
|
||||
"typings": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"default": "./dist/rrweb-plugin-canvas-webrtc-replay.js"
|
||||
},
|
||||
"require": {
|
||||
"types": "./dist/index.d.cts",
|
||||
"default": "./dist/rrweb-plugin-canvas-webrtc-replay.cjs"
|
||||
}
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "vite build --watch",
|
||||
"build": "tsc -noEmit && vite build",
|
||||
"check-types": "tsc -noEmit",
|
||||
"prepublish": "npm run build"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/rrweb-io/rrweb.git"
|
||||
},
|
||||
"keywords": [
|
||||
"rrweb"
|
||||
],
|
||||
"author": "justin@recordonce.com",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/rrweb-io/rrweb/issues"
|
||||
},
|
||||
"homepage": "https://github.com/rrweb-io/rrweb#readme",
|
||||
"devDependencies": {
|
||||
"rrweb": "^2.0.0-alpha.14",
|
||||
"typescript": "^4.7.3",
|
||||
"vite": "^5.2.8",
|
||||
"vite-plugin-dts": "^3.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rrweb": "^2.0.0-alpha.14"
|
||||
}
|
||||
}
|
||||
166
packages/plugins/rrweb-plugin-canvas-webrtc-replay/src/index.ts
Normal file
166
packages/plugins/rrweb-plugin-canvas-webrtc-replay/src/index.ts
Normal file
@@ -0,0 +1,166 @@
|
||||
import type { RRNode } from 'rrdom';
|
||||
import type { Mirror } from 'rrweb-snapshot';
|
||||
import SimplePeer from 'simple-peer-light';
|
||||
import type { ReplayPlugin, Replayer } from 'rrweb';
|
||||
import type { WebRTCDataChannel } from './types';
|
||||
|
||||
// TODO: restrict callback to real nodes only, or make sure callback gets called when real node gets added to dom as well
|
||||
|
||||
export class RRWebPluginCanvasWebRTCReplay {
|
||||
private canvasFoundCallback: (
|
||||
node: Node | RRNode,
|
||||
context: { id: number; replayer: Replayer },
|
||||
) => void;
|
||||
private signalSendCallback: (signal: RTCSessionDescriptionInit) => void;
|
||||
private mirror: Mirror | undefined;
|
||||
|
||||
constructor({
|
||||
canvasFoundCallback,
|
||||
signalSendCallback,
|
||||
}: {
|
||||
canvasFoundCallback: RRWebPluginCanvasWebRTCReplay['canvasFoundCallback'];
|
||||
signalSendCallback: RRWebPluginCanvasWebRTCReplay['signalSendCallback'];
|
||||
}) {
|
||||
this.canvasFoundCallback = canvasFoundCallback;
|
||||
this.signalSendCallback = signalSendCallback;
|
||||
}
|
||||
|
||||
public initPlugin(): ReplayPlugin {
|
||||
return {
|
||||
onBuild: (
|
||||
node: Node | RRNode,
|
||||
context: { id: number; replayer: Replayer },
|
||||
) => {
|
||||
if (node.nodeName === 'CANVAS') {
|
||||
this.canvasFoundCallback(node, context);
|
||||
}
|
||||
},
|
||||
getMirror: (options) => {
|
||||
this.mirror = options.nodeMirror;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
private startStream(
|
||||
target: HTMLCanvasElement | HTMLVideoElement,
|
||||
stream: MediaStream,
|
||||
) {
|
||||
if (this.runningStreams.has(stream)) return;
|
||||
|
||||
if (target.tagName === 'VIDEO') {
|
||||
const remoteVideo = target as HTMLVideoElement;
|
||||
remoteVideo.srcObject = stream;
|
||||
void remoteVideo.play();
|
||||
this.runningStreams.add(stream);
|
||||
return;
|
||||
}
|
||||
|
||||
if ('MediaStreamTrackProcessor' in window) {
|
||||
const canvas = target as HTMLCanvasElement;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx)
|
||||
throw new Error(
|
||||
`startStream: Could not get 2d canvas context for ${canvas.outerHTML}`,
|
||||
);
|
||||
const track = stream.getVideoTracks()[0]; // MediaStream.getVideoTracks()[0]
|
||||
const processor = new MediaStreamTrackProcessor({ track: track });
|
||||
const reader = processor.readable.getReader();
|
||||
const readChunk = function () {
|
||||
void reader.read().then(({ done, value }) => {
|
||||
if (!value) return;
|
||||
// the MediaStream video can have dynamic size based on bandwidth available
|
||||
if (
|
||||
canvas.width !== value.displayWidth ||
|
||||
canvas.height !== value.displayHeight
|
||||
) {
|
||||
canvas.width = value.displayWidth;
|
||||
canvas.height = value.displayHeight;
|
||||
}
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
// value is a VideoFrame
|
||||
ctx.drawImage(value, 0, 0);
|
||||
value.close(); // close the VideoFrame when we're done with it
|
||||
if (!done) {
|
||||
readChunk();
|
||||
}
|
||||
});
|
||||
};
|
||||
readChunk();
|
||||
this.runningStreams.add(stream);
|
||||
} else {
|
||||
// Fallback for non-Chromium browsers.
|
||||
// Replaces the canvas element with a video element.
|
||||
|
||||
const remoteVideo = document.createElement('video');
|
||||
remoteVideo.setAttribute('autoplay', 'true');
|
||||
remoteVideo.setAttribute('playsinline', 'true');
|
||||
|
||||
// const { id } = mutation;
|
||||
remoteVideo.setAttribute('width', target.width.toString());
|
||||
remoteVideo.setAttribute('height', target.height.toString());
|
||||
target.replaceWith(remoteVideo);
|
||||
|
||||
this.startStream(remoteVideo, stream);
|
||||
}
|
||||
}
|
||||
|
||||
private peer: SimplePeer.Instance | null = null;
|
||||
private streamNodeMap = new Map<string, number>();
|
||||
private streams = new Set<MediaStream>();
|
||||
private runningStreams = new WeakSet<MediaStream>();
|
||||
public signalReceive(msg: RTCSessionDescriptionInit) {
|
||||
if (!this.peer) {
|
||||
this.peer = new SimplePeer({
|
||||
initiator: false,
|
||||
// trickle: false,
|
||||
});
|
||||
|
||||
this.peer.on('error', (err: Error) => {
|
||||
this.peer = null;
|
||||
console.log('error', err);
|
||||
});
|
||||
|
||||
this.peer.on('close', () => {
|
||||
this.peer = null;
|
||||
console.log('closing');
|
||||
});
|
||||
|
||||
this.peer.on('signal', (data: RTCSessionDescriptionInit) => {
|
||||
this.signalSendCallback(data);
|
||||
});
|
||||
|
||||
this.peer.on('connect', () => {
|
||||
// connected!
|
||||
});
|
||||
|
||||
this.peer.on('data', (data: SimplePeer.SimplePeerData) => {
|
||||
try {
|
||||
const json = JSON.parse(data as string) as WebRTCDataChannel;
|
||||
this.streamNodeMap.set(json.streamId, json.nodeId);
|
||||
} catch (error) {
|
||||
console.error('Could not parse data', error);
|
||||
}
|
||||
this.flushStreams();
|
||||
});
|
||||
|
||||
this.peer.on('stream', (stream: MediaStream) => {
|
||||
this.streams.add(stream);
|
||||
this.flushStreams();
|
||||
});
|
||||
}
|
||||
this.peer.signal(msg);
|
||||
}
|
||||
|
||||
private flushStreams() {
|
||||
this.streams.forEach((stream) => {
|
||||
const nodeId = this.streamNodeMap.get(stream.id);
|
||||
if (!nodeId) return;
|
||||
const target = this.mirror?.getNode(nodeId) as
|
||||
| HTMLCanvasElement
|
||||
| HTMLVideoElement
|
||||
| null;
|
||||
// got remote video stream, now let's show it in a video or canvas element
|
||||
if (target) this.startStream(target, stream);
|
||||
});
|
||||
}
|
||||
}
|
||||
309
packages/plugins/rrweb-plugin-canvas-webrtc-replay/src/simple-peer-light.d.ts
vendored
Normal file
309
packages/plugins/rrweb-plugin-canvas-webrtc-replay/src/simple-peer-light.d.ts
vendored
Normal file
@@ -0,0 +1,309 @@
|
||||
/* eslint-disable */
|
||||
/// <reference types="node" />
|
||||
declare module 'simple-peer-light' {
|
||||
import * as stream from 'stream';
|
||||
|
||||
const SimplePeer: SimplePeer.SimplePeer;
|
||||
|
||||
namespace SimplePeer {
|
||||
interface Options {
|
||||
/** set to `true` if this is the initiating peer */
|
||||
initiator?: boolean | undefined;
|
||||
/** custom webrtc data channel configuration (used by [`createDataChannel`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createDataChannel)) */
|
||||
channelConfig?: RTCDataChannelInit | undefined;
|
||||
/** custom webrtc data channel name */
|
||||
channelName?: string | undefined;
|
||||
/** custom webrtc configuration (used by [`RTCPeerConnection`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection) constructor) */
|
||||
config?: RTCConfiguration | undefined;
|
||||
/** custom offer options (used by [`createOffer`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createOffer) method) */
|
||||
offerOptions?: RTCOfferOptions | undefined;
|
||||
/** custom answer options (used by [`createAnswer`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createAnswer) method) */
|
||||
answerOptions?: RTCAnswerOptions | undefined;
|
||||
/** function to transform the generated SDP signaling data (for advanced users) */
|
||||
sdpTransform?: ((this: Instance, sdp: string) => string) | undefined;
|
||||
/** if video/voice is desired, pass stream returned from [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) */
|
||||
stream?: MediaStream | undefined;
|
||||
/** an array of MediaStreams returned from [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) */
|
||||
streams?: MediaStream[] | undefined;
|
||||
/** set to `false` to disable [trickle ICE](http://webrtchacks.com/trickle-ice/) and get a single 'signal' event (slower) */
|
||||
trickle?: boolean | undefined;
|
||||
/** similar to `trickle`, needs to be set to `false` to disable trickling, defaults to `false` */
|
||||
allowHalfTrickle?: boolean | undefined;
|
||||
/** if `trickle` is set to `false`, determines how long to wait before providing an offer or answer; default value is 5000 milliseconds */
|
||||
iceCompleteTimeout?: number | undefined;
|
||||
/** custom webrtc implementation, mainly useful in node to specify in the [wrtc](https://npmjs.com/package/wrtc) package. */
|
||||
wrtc?:
|
||||
| {
|
||||
RTCPeerConnection: typeof RTCPeerConnection;
|
||||
RTCSessionDescription: typeof RTCSessionDescription;
|
||||
RTCIceCandidate: typeof RTCIceCandidate;
|
||||
}
|
||||
| undefined;
|
||||
/** set to true to create the stream in Object Mode. In this mode, incoming string data is not automatically converted to Buffer objects. */
|
||||
objectMode?: boolean | undefined;
|
||||
}
|
||||
interface SimplePeer {
|
||||
prototype: Instance;
|
||||
/**
|
||||
* Create a new WebRTC peer connection.
|
||||
*
|
||||
* A "data channel" for text/binary communication is always established, because it's cheap and often useful. For video/voice communication, pass the stream option.
|
||||
*
|
||||
* If opts is specified, then the default options (see <https://github.com/feross/simple-peer#peer--new-peeropts>) will be overridden.
|
||||
*/
|
||||
new (opts?: Options): Instance;
|
||||
|
||||
/** Detect native WebRTC support in the javascript environment. */
|
||||
readonly WEBRTC_SUPPORT: boolean;
|
||||
|
||||
// ********************************
|
||||
// methods which are not documented
|
||||
// ********************************
|
||||
|
||||
/**
|
||||
* Expose peer and data channel config for overriding all Peer
|
||||
* instances. Otherwise, just set opts.config or opts.channelConfig
|
||||
* when constructing a Peer.
|
||||
*/
|
||||
config: RTCConfiguration;
|
||||
/**
|
||||
* Expose peer and data channel config for overriding all Peer
|
||||
* instances. Otherwise, just set opts.config or opts.channelConfig
|
||||
* when constructing a Peer.
|
||||
*/
|
||||
channelConfig: RTCDataChannelInit;
|
||||
}
|
||||
|
||||
type TypedArray =
|
||||
| Int8Array
|
||||
| Uint8Array
|
||||
| Uint8ClampedArray
|
||||
| Int16Array
|
||||
| Uint16Array
|
||||
| Int32Array
|
||||
| Uint32Array
|
||||
| Float32Array
|
||||
| Float64Array;
|
||||
|
||||
type SimplePeerData = string | Buffer | TypedArray | ArrayBuffer | Blob;
|
||||
|
||||
type SignalData =
|
||||
| {
|
||||
type: 'transceiverRequest';
|
||||
transceiverRequest: {
|
||||
kind: string;
|
||||
init?: RTCRtpTransceiverInit | undefined;
|
||||
};
|
||||
}
|
||||
| {
|
||||
type: 'renegotiate';
|
||||
renegotiate: true;
|
||||
}
|
||||
| {
|
||||
type: 'candidate';
|
||||
candidate: RTCIceCandidate;
|
||||
}
|
||||
| RTCSessionDescriptionInit;
|
||||
|
||||
interface Instance extends stream.Duplex {
|
||||
/**
|
||||
* Call this method whenever the remote peer emits a `peer.on('signal')` event.
|
||||
*
|
||||
* The `data` will encapsulate a webrtc offer, answer, or ice candidate. These messages help
|
||||
* the peers to eventually establish a direct connection to each other. The contents of these
|
||||
* strings are an implementation detail that can be ignored by the user of this module;
|
||||
* simply pass the data from 'signal' events to the remote peer and call `peer.signal(data)`
|
||||
* to get connected.
|
||||
*/
|
||||
signal(data: string | SignalData): void;
|
||||
|
||||
/**
|
||||
* Send text/binary data to the remote peer. `data` can be any of several types: `String`,
|
||||
* `Buffer` (see [buffer](https://github.com/feross/buffer)), `ArrayBufferView` (`Uint8Array`,
|
||||
* etc.), `ArrayBuffer`, or `Blob` (in browsers that support it).
|
||||
*
|
||||
* Note: If this method is called before the `peer.on('connect')` event has fired,
|
||||
* then an exception will be thrown. Use `peer.write(data)`
|
||||
* (which is inherited from the node.js [duplex stream](https://nodejs.org/api/stream.html) interface)
|
||||
* if you want this data to be buffered instead.
|
||||
*/
|
||||
send(data: SimplePeerData): void;
|
||||
|
||||
/** Add a `MediaStream` to the connection. */
|
||||
addStream(stream: MediaStream): void;
|
||||
|
||||
/** Remove a `MediaStream` from the connection. */
|
||||
removeStream(stream: MediaStream): void;
|
||||
|
||||
/** Add a `MediaStreamTrack` to the connection. Must also pass the `MediaStream` you want to attach it to. */
|
||||
addTrack(track: MediaStreamTrack, stream: MediaStream): void;
|
||||
|
||||
/** Remove a `MediaStreamTrack` from the connection. Must also pass the `MediaStream` that it was attached to. */
|
||||
removeTrack(track: MediaStreamTrack, stream: MediaStream): void;
|
||||
|
||||
/** Replace a `MediaStreamTrack` with another track. Must also pass the `MediaStream` that the old track was attached to. */
|
||||
replaceTrack(
|
||||
oldTrack: MediaStreamTrack,
|
||||
newTrack: MediaStreamTrack,
|
||||
stream: MediaStream,
|
||||
): void;
|
||||
|
||||
/** Add a `RTCRtpTransceiver` to the connection. Can be used to add transceivers before adding tracks. Automatically called as necessary by `addTrack`. */
|
||||
addTransceiver(kind: string, init?: RTCRtpTransceiverInit): void;
|
||||
|
||||
// TODO: https://github.com/feross/simple-peer/blob/d972548299a50f836ca91c36e39304ef0f9474b7/index.js#L427
|
||||
// destroy(onclose?: () => void): void;
|
||||
/**
|
||||
* Destroy and cleanup this peer connection.
|
||||
*
|
||||
* If the optional `err` parameter is passed, then it will be emitted as an `'error'`
|
||||
* event on the stream.
|
||||
*/
|
||||
destroy(error?: Error): any;
|
||||
|
||||
// ********************************
|
||||
// methods which are not documented
|
||||
// ********************************
|
||||
|
||||
readonly bufferSize: number;
|
||||
readonly connected: boolean;
|
||||
address():
|
||||
| { port: undefined; family: undefined; address: undefined }
|
||||
| { port: number; family: 'IPv6' | 'IPv4'; address: string };
|
||||
|
||||
// used for debug logging
|
||||
_debug(message?: any, ...optionalParams: any[]): void;
|
||||
|
||||
// ******
|
||||
// events
|
||||
// ******
|
||||
addListener(
|
||||
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
|
||||
listener: () => void,
|
||||
): this;
|
||||
addListener(event: 'signal', listener: (data: SignalData) => void): this;
|
||||
addListener(
|
||||
event: 'stream',
|
||||
listener: (stream: MediaStream) => void,
|
||||
): this;
|
||||
addListener(
|
||||
event: 'track',
|
||||
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
|
||||
): this;
|
||||
addListener(event: 'data', listener: (chunk: any) => void): this;
|
||||
addListener(event: 'error', listener: (err: Error) => void): this;
|
||||
addListener(
|
||||
event: string | symbol,
|
||||
listener: (...args: any[]) => void,
|
||||
): this;
|
||||
|
||||
emit(
|
||||
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
|
||||
): boolean;
|
||||
emit(event: 'signal', data: SignalData): this;
|
||||
emit(event: 'stream', stream: MediaStream): this;
|
||||
emit(event: 'track', track: MediaStreamTrack, stream: MediaStream): this;
|
||||
emit(event: 'data', chunk: any): boolean;
|
||||
emit(event: 'error', err: Error): boolean;
|
||||
emit(event: string | symbol, ...args: any[]): boolean;
|
||||
|
||||
on(
|
||||
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
|
||||
listener: () => void,
|
||||
): this;
|
||||
on(event: 'signal', listener: (data: SignalData) => void): this;
|
||||
on(event: 'stream', listener: (stream: MediaStream) => void): this;
|
||||
on(
|
||||
event: 'track',
|
||||
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
|
||||
): this;
|
||||
on(event: 'data', listener: (chunk: any) => void): this;
|
||||
on(event: 'error', listener: (err: Error) => void): this;
|
||||
on(event: string | symbol, listener: (...args: any[]) => void): this;
|
||||
|
||||
once(
|
||||
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
|
||||
listener: () => void,
|
||||
): this;
|
||||
once(event: 'signal', listener: (data: SignalData) => void): this;
|
||||
once(event: 'stream', listener: (stream: MediaStream) => void): this;
|
||||
once(
|
||||
event: 'track',
|
||||
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
|
||||
): this;
|
||||
once(event: 'data', listener: (chunk: any) => void): this;
|
||||
once(event: 'error', listener: (err: Error) => void): this;
|
||||
once(event: string | symbol, listener: (...args: any[]) => void): this;
|
||||
|
||||
prependListener(
|
||||
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
|
||||
listener: () => void,
|
||||
): this;
|
||||
prependListener(
|
||||
event: 'signal',
|
||||
listener: (data: SignalData) => void,
|
||||
): this;
|
||||
prependListener(
|
||||
event: 'stream',
|
||||
listener: (stream: MediaStream) => void,
|
||||
): this;
|
||||
prependListener(
|
||||
event: 'track',
|
||||
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
|
||||
): this;
|
||||
prependListener(event: 'data', listener: (chunk: any) => void): this;
|
||||
prependListener(event: 'error', listener: (err: Error) => void): this;
|
||||
prependListener(
|
||||
event: string | symbol,
|
||||
listener: (...args: any[]) => void,
|
||||
): this;
|
||||
|
||||
prependOnceListener(
|
||||
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
|
||||
listener: () => void,
|
||||
): this;
|
||||
prependOnceListener(
|
||||
event: 'signal',
|
||||
listener: (data: SignalData) => void,
|
||||
): this;
|
||||
prependOnceListener(
|
||||
event: 'stream',
|
||||
listener: (stream: MediaStream) => void,
|
||||
): this;
|
||||
prependOnceListener(
|
||||
event: 'track',
|
||||
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
|
||||
): this;
|
||||
prependOnceListener(event: 'data', listener: (chunk: any) => void): this;
|
||||
prependOnceListener(event: 'error', listener: (err: Error) => void): this;
|
||||
prependOnceListener(
|
||||
event: string | symbol,
|
||||
listener: (...args: any[]) => void,
|
||||
): this;
|
||||
|
||||
removeListener(
|
||||
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
|
||||
listener: () => void,
|
||||
): this;
|
||||
removeListener(
|
||||
event: 'signal',
|
||||
listener: (data: SignalData) => void,
|
||||
): this;
|
||||
removeListener(
|
||||
event: 'stream',
|
||||
listener: (stream: MediaStream) => void,
|
||||
): this;
|
||||
removeListener(
|
||||
event: 'track',
|
||||
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
|
||||
): this;
|
||||
removeListener(event: 'data', listener: (chunk: any) => void): this;
|
||||
removeListener(event: 'error', listener: (err: Error) => void): this;
|
||||
removeListener(
|
||||
event: string | symbol,
|
||||
listener: (...args: any[]) => void,
|
||||
): this;
|
||||
}
|
||||
}
|
||||
export default SimplePeer;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export interface WebRTCDataChannel {
|
||||
nodeId: number;
|
||||
streamId: string;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.base.json",
|
||||
"include": ["src"],
|
||||
"exclude": ["vite.config.ts"],
|
||||
"compilerOptions": {
|
||||
"rootDir": "src",
|
||||
"tsBuildInfoFile": "./tsconfig.tsbuildinfo"
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"path": "../../rrweb"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import config from '../../../vite.config.default';
|
||||
|
||||
export default config('src/index.ts', 'rrwebPluginCanvasWebRTCReplay');
|
||||
178
packages/plugins/rrweb-plugin-console-record/README.md
Normal file
178
packages/plugins/rrweb-plugin-console-record/README.md
Normal file
@@ -0,0 +1,178 @@
|
||||
# @rrweb/rrweb-plugin-console-record
|
||||
|
||||
Please refer to the [console recipe](../../../docs/recipes/console.md) on how to use this plugin.
|
||||
See the [guide](../../../guide.md) for more info on rrweb.
|
||||
|
||||
## Sponsors
|
||||
|
||||
[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site.
|
||||
|
||||
### Gold Sponsors 🥇
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/0/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/1/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/2/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/3/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/4/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/5/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/6/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Silver Sponsors 🥈
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/0/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/1/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/2/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/3/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/4/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/5/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/6/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Bronze Sponsors 🥉
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/0/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/1/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/2/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/3/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/4/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/5/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/6/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/7/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/8/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Backers
|
||||
|
||||
<a href="https://opencollective.com/rrweb#sponsor" rel="nofollow"><img src="https://opencollective.com/rrweb/tiers/backers.svg?avatarHeight=36"></a>
|
||||
|
||||
## Core Team Members
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://github.com/Yuyz0112">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/13651389?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Yuyz0112</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/YunFeng0817">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/27533910?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Yun Feng</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/eoghanmurray">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/156780?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>eoghanmurray</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/Juice10">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/4106?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Juice10</b></sub>
|
||||
<br /><sub>open for rrweb consulting</sub>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Who's using rrweb?
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="http://www.smartx.com/" target="_blank">
|
||||
<img width="195px" src="https://www.rrweb.io/logos/smartx.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
|
||||
<img width="195px" src="https://www.rrweb.io/logos/posthog.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://statcounter.com/session-replay/" target="_blank">
|
||||
<img width="195px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://recordonce.com/" target="_blank">
|
||||
<img width="195px" alt="Smart screen recording for SaaS" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://cux.io" target="_blank">
|
||||
<img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://remsupp.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Remote Access & Co-Browsing" width="195px" src="https://remsupp.com/images/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://highlight.io" target="_blank">
|
||||
<img style="padding: 8px" alt="The open source, fullstack Monitoring Platform." width="195px" src="https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://analyzee.io" target="_blank">
|
||||
<img style="padding: 8px" alt="Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions." width="195px" src="https://cdn.analyzee.io/assets/analyzee-logo.png">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://requestly.io" target="_blank">
|
||||
<img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://gleap.io" target="_blank">
|
||||
<img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://uxwizz.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://www.howdygo.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Interactive product demos for small marketing teams" width="195px" src="https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
58
packages/plugins/rrweb-plugin-console-record/package.json
Normal file
58
packages/plugins/rrweb-plugin-console-record/package.json
Normal file
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"name": "@rrweb/rrweb-plugin-console-record",
|
||||
"version": "2.0.0-alpha.14",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./dist/rrweb-plugin-console-record.umd.cjs",
|
||||
"module": "./dist/rrweb-plugin-console-record.js",
|
||||
"unpkg": "./dist/rrweb-plugin-console-record.umd.cjs",
|
||||
"typings": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"default": "./dist/rrweb-plugin-console-record.js"
|
||||
},
|
||||
"require": {
|
||||
"types": "./dist/index.d.cts",
|
||||
"default": "./dist/rrweb-plugin-console-record.umd.cjs"
|
||||
}
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "vite build --watch",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest watch",
|
||||
"build": "tsc -noEmit && vite build",
|
||||
"check-types": "tsc -noEmit",
|
||||
"prepublish": "npm run build"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/rrweb-io/rrweb.git"
|
||||
},
|
||||
"keywords": [
|
||||
"rrweb"
|
||||
],
|
||||
"author": "yanzhen@smartx.com",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/rrweb-io/rrweb/issues"
|
||||
},
|
||||
"homepage": "https://github.com/rrweb-io/rrweb#readme",
|
||||
"devDependencies": {
|
||||
"rrweb": "^2.0.0-alpha.14",
|
||||
"typescript": "^4.7.3",
|
||||
"vite": "^5.2.8",
|
||||
"vite-plugin-dts": "^3.8.1",
|
||||
"vitest": "^1.4.0",
|
||||
"puppeteer": "^20.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rrweb": "^2.0.0-alpha.14"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,252 @@
|
||||
/* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return */
|
||||
/**
|
||||
* Class StackFrame is a fork of https://github.com/stacktracejs/stackframe/blob/master/stackframe.js
|
||||
* I fork it because:
|
||||
* 1. There are some build issues when importing this package.
|
||||
* 2. Rewrites into typescript give us a better type interface.
|
||||
* 3. StackFrame contains some functions we don't need.
|
||||
*/
|
||||
export class StackFrame {
|
||||
private fileName: string;
|
||||
private functionName: string;
|
||||
private lineNumber?: number;
|
||||
private columnNumber?: number;
|
||||
|
||||
constructor(obj: {
|
||||
fileName?: string;
|
||||
functionName?: string;
|
||||
lineNumber?: number;
|
||||
columnNumber?: number;
|
||||
}) {
|
||||
this.fileName = obj.fileName || '';
|
||||
this.functionName = obj.functionName || '';
|
||||
this.lineNumber = obj.lineNumber;
|
||||
this.columnNumber = obj.columnNumber;
|
||||
}
|
||||
|
||||
toString() {
|
||||
const lineNumber = this.lineNumber || '';
|
||||
const columnNumber = this.columnNumber || '';
|
||||
if (this.functionName)
|
||||
return `${this.functionName} (${this.fileName}:${lineNumber}:${columnNumber})`;
|
||||
return `${this.fileName}:${lineNumber}:${columnNumber}`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ErrorStackParser is a fork of https://github.com/stacktracejs/error-stack-parser/blob/master/error-stack-parser.js
|
||||
* I fork it because:
|
||||
* 1. There are some build issues when importing this package.
|
||||
* 2. Rewrites into typescript give us a better type interface.
|
||||
*/
|
||||
const FIREFOX_SAFARI_STACK_REGEXP = /(^|@)\S+:\d+/;
|
||||
const CHROME_IE_STACK_REGEXP = /^\s*at .*(\S+:\d+|\(native\))/m;
|
||||
const SAFARI_NATIVE_CODE_REGEXP = /^(eval@)?(\[native code])?$/;
|
||||
export const ErrorStackParser = {
|
||||
/**
|
||||
* Given an Error object, extract the most information from it.
|
||||
*/
|
||||
parse: function (error: Error): StackFrame[] {
|
||||
// https://github.com/rrweb-io/rrweb/issues/782
|
||||
if (!error) {
|
||||
return [];
|
||||
}
|
||||
if (
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
typeof error.stacktrace !== 'undefined' ||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
typeof error['opera#sourceloc'] !== 'undefined'
|
||||
) {
|
||||
return this.parseOpera(
|
||||
error as {
|
||||
stacktrace?: string;
|
||||
message: string;
|
||||
stack?: string;
|
||||
},
|
||||
);
|
||||
} else if (error.stack && error.stack.match(CHROME_IE_STACK_REGEXP)) {
|
||||
return this.parseV8OrIE(error as { stack: string });
|
||||
} else if (error.stack) {
|
||||
return this.parseFFOrSafari(error as { stack: string });
|
||||
} else {
|
||||
console.warn(
|
||||
'[console-record-plugin]: Failed to parse error object:',
|
||||
error,
|
||||
);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
// Separate line and column numbers from a string of the form: (URI:Line:Column)
|
||||
extractLocation: function (urlLike: string) {
|
||||
// Fail-fast but return locations like "(native)"
|
||||
if (urlLike.indexOf(':') === -1) {
|
||||
return [urlLike];
|
||||
}
|
||||
|
||||
const regExp = /(.+?)(?::(\d+))?(?::(\d+))?$/;
|
||||
const parts = regExp.exec(urlLike.replace(/[()]/g, ''));
|
||||
if (!parts) throw new Error(`Cannot parse given url: ${urlLike}`);
|
||||
return [parts[1], parts[2] || undefined, parts[3] || undefined];
|
||||
},
|
||||
parseV8OrIE: function (error: { stack: string }) {
|
||||
const filtered = error.stack.split('\n').filter(function (line) {
|
||||
return !!line.match(CHROME_IE_STACK_REGEXP);
|
||||
}, this);
|
||||
|
||||
return filtered.map(function (line) {
|
||||
if (line.indexOf('(eval ') > -1) {
|
||||
// Throw away eval information until we implement stacktrace.js/stackframe#8
|
||||
line = line
|
||||
.replace(/eval code/g, 'eval')
|
||||
.replace(/(\(eval at [^()]*)|(\),.*$)/g, '');
|
||||
}
|
||||
let sanitizedLine = line.replace(/^\s+/, '').replace(/\(eval code/g, '(');
|
||||
|
||||
// capture and preseve the parenthesized location "(/foo/my bar.js:12:87)" in
|
||||
// case it has spaces in it, as the string is split on \s+ later on
|
||||
const location = sanitizedLine.match(/ (\((.+):(\d+):(\d+)\)$)/);
|
||||
|
||||
// remove the parenthesized location from the line, if it was matched
|
||||
sanitizedLine = location
|
||||
? sanitizedLine.replace(location[0], '')
|
||||
: sanitizedLine;
|
||||
|
||||
const tokens = sanitizedLine.split(/\s+/).slice(1);
|
||||
// if a location was matched, pass it to extractLocation() otherwise pop the last token
|
||||
const locationParts = this.extractLocation(
|
||||
location ? location[1] : tokens.pop(),
|
||||
);
|
||||
const functionName = tokens.join(' ') || undefined;
|
||||
const fileName =
|
||||
['eval', '<anonymous>'].indexOf(locationParts[0]) > -1
|
||||
? undefined
|
||||
: locationParts[0];
|
||||
|
||||
return new StackFrame({
|
||||
functionName,
|
||||
fileName,
|
||||
lineNumber: locationParts[1],
|
||||
columnNumber: locationParts[2],
|
||||
});
|
||||
}, this);
|
||||
},
|
||||
parseFFOrSafari: function (error: { stack: string }) {
|
||||
const filtered = error.stack.split('\n').filter(function (line) {
|
||||
return !line.match(SAFARI_NATIVE_CODE_REGEXP);
|
||||
}, this);
|
||||
|
||||
return filtered.map(function (line) {
|
||||
// Throw away eval information until we implement stacktrace.js/stackframe#8
|
||||
if (line.indexOf(' > eval') > -1) {
|
||||
line = line.replace(
|
||||
/ line (\d+)(?: > eval line \d+)* > eval:\d+:\d+/g,
|
||||
':$1',
|
||||
);
|
||||
}
|
||||
|
||||
if (line.indexOf('@') === -1 && line.indexOf(':') === -1) {
|
||||
// Safari eval frames only have function names and nothing else
|
||||
return new StackFrame({
|
||||
functionName: line,
|
||||
});
|
||||
} else {
|
||||
const functionNameRegex = /((.*".+"[^@]*)?[^@]*)(?:@)/;
|
||||
const matches = line.match(functionNameRegex);
|
||||
const functionName = matches && matches[1] ? matches[1] : undefined;
|
||||
const locationParts = this.extractLocation(
|
||||
line.replace(functionNameRegex, ''),
|
||||
);
|
||||
|
||||
return new StackFrame({
|
||||
functionName,
|
||||
fileName: locationParts[0],
|
||||
lineNumber: locationParts[1],
|
||||
columnNumber: locationParts[2],
|
||||
});
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
parseOpera: function (e: {
|
||||
stacktrace?: string;
|
||||
message: string;
|
||||
stack?: string;
|
||||
}): StackFrame[] {
|
||||
if (
|
||||
!e.stacktrace ||
|
||||
(e.message.indexOf('\n') > -1 &&
|
||||
e.message.split('\n').length > e.stacktrace.split('\n').length)
|
||||
) {
|
||||
return this.parseOpera9(e as { message: string });
|
||||
} else if (!e.stack) {
|
||||
return this.parseOpera10(e as { stacktrace: string });
|
||||
} else {
|
||||
return this.parseOpera11(e as { stack: string });
|
||||
}
|
||||
},
|
||||
parseOpera9: function (e: { message: string }) {
|
||||
const lineRE = /Line (\d+).*script (?:in )?(\S+)/i;
|
||||
const lines = e.message.split('\n');
|
||||
const result = [];
|
||||
|
||||
for (let i = 2, len = lines.length; i < len; i += 2) {
|
||||
const match = lineRE.exec(lines[i]);
|
||||
if (match) {
|
||||
result.push(
|
||||
new StackFrame({
|
||||
fileName: match[2],
|
||||
lineNumber: parseFloat(match[1]),
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
parseOpera10: function (e: { stacktrace: string }) {
|
||||
const lineRE = /Line (\d+).*script (?:in )?(\S+)(?:: In function (\S+))?$/i;
|
||||
const lines = e.stacktrace.split('\n');
|
||||
const result = [];
|
||||
|
||||
for (let i = 0, len = lines.length; i < len; i += 2) {
|
||||
const match = lineRE.exec(lines[i]);
|
||||
if (match) {
|
||||
result.push(
|
||||
new StackFrame({
|
||||
functionName: match[3] || undefined,
|
||||
fileName: match[2],
|
||||
lineNumber: parseFloat(match[1]),
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
// Opera 10.65+ Error.stack very similar to FF/Safari
|
||||
parseOpera11: function (error: { stack: string }) {
|
||||
const filtered = error.stack.split('\n').filter(function (line) {
|
||||
return (
|
||||
!!line.match(FIREFOX_SAFARI_STACK_REGEXP) &&
|
||||
!line.match(/^Error created at/)
|
||||
);
|
||||
}, this);
|
||||
|
||||
return filtered.map(function (line: string) {
|
||||
const tokens = line.split('@');
|
||||
const locationParts = this.extractLocation(tokens.pop());
|
||||
const functionCall = tokens.shift() || '';
|
||||
const functionName =
|
||||
functionCall
|
||||
.replace(/<anonymous function(: (\w+))?>/, '$2')
|
||||
.replace(/\([^)]*\)/g, '') || undefined;
|
||||
return new StackFrame({
|
||||
functionName,
|
||||
fileName: locationParts[0],
|
||||
lineNumber: locationParts[1],
|
||||
columnNumber: locationParts[2],
|
||||
});
|
||||
}, this);
|
||||
},
|
||||
};
|
||||
241
packages/plugins/rrweb-plugin-console-record/src/index.ts
Normal file
241
packages/plugins/rrweb-plugin-console-record/src/index.ts
Normal file
@@ -0,0 +1,241 @@
|
||||
import type { listenerHandler, RecordPlugin, IWindow } from '@rrweb/types';
|
||||
import { utils } from 'rrweb';
|
||||
import { ErrorStackParser, StackFrame } from './error-stack-parser';
|
||||
import { stringify } from './stringify';
|
||||
|
||||
export type StringifyOptions = {
|
||||
// limit of string length
|
||||
stringLengthLimit?: number;
|
||||
/**
|
||||
* limit of number of keys in an object
|
||||
* if an object contains more keys than this limit, we would call its toString function directly
|
||||
*/
|
||||
numOfKeysLimit: number;
|
||||
/**
|
||||
* limit number of depth in an object
|
||||
* if an object is too deep, toString process may cause browser OOM
|
||||
*/
|
||||
depthOfLimit: number;
|
||||
};
|
||||
|
||||
type LogRecordOptions = {
|
||||
level?: LogLevel[];
|
||||
lengthThreshold?: number;
|
||||
stringifyOptions?: StringifyOptions;
|
||||
logger?: Logger | 'console';
|
||||
};
|
||||
|
||||
const defaultLogOptions: LogRecordOptions = {
|
||||
level: [
|
||||
'assert',
|
||||
'clear',
|
||||
'count',
|
||||
'countReset',
|
||||
'debug',
|
||||
'dir',
|
||||
'dirxml',
|
||||
'error',
|
||||
'group',
|
||||
'groupCollapsed',
|
||||
'groupEnd',
|
||||
'info',
|
||||
'log',
|
||||
'table',
|
||||
'time',
|
||||
'timeEnd',
|
||||
'timeLog',
|
||||
'trace',
|
||||
'warn',
|
||||
],
|
||||
lengthThreshold: 1000,
|
||||
logger: 'console',
|
||||
};
|
||||
|
||||
export type LogData = {
|
||||
level: LogLevel;
|
||||
trace: string[];
|
||||
payload: string[];
|
||||
};
|
||||
|
||||
type logCallback = (p: LogData) => void;
|
||||
|
||||
/* fork from interface Console */
|
||||
// all kinds of console functions
|
||||
export type Logger = {
|
||||
assert?: typeof console.assert;
|
||||
clear?: typeof console.clear;
|
||||
count?: typeof console.count;
|
||||
countReset?: typeof console.countReset;
|
||||
debug?: typeof console.debug;
|
||||
dir?: typeof console.dir;
|
||||
dirxml?: typeof console.dirxml;
|
||||
error?: typeof console.error;
|
||||
group?: typeof console.group;
|
||||
groupCollapsed?: typeof console.groupCollapsed;
|
||||
groupEnd?: () => void;
|
||||
info?: typeof console.info;
|
||||
log?: typeof console.log;
|
||||
table?: typeof console.table;
|
||||
time?: typeof console.time;
|
||||
timeEnd?: typeof console.timeEnd;
|
||||
timeLog?: typeof console.timeLog;
|
||||
trace?: typeof console.trace;
|
||||
warn?: typeof console.warn;
|
||||
};
|
||||
|
||||
export type LogLevel = keyof Logger;
|
||||
|
||||
function initLogObserver(
|
||||
cb: logCallback,
|
||||
win: IWindow, // top window or in an iframe
|
||||
options: LogRecordOptions,
|
||||
): listenerHandler {
|
||||
const logOptions = (
|
||||
options ? Object.assign({}, defaultLogOptions, options) : defaultLogOptions
|
||||
) as {
|
||||
level: LogLevel[];
|
||||
lengthThreshold: number;
|
||||
stringifyOptions?: StringifyOptions;
|
||||
logger: Logger | 'console';
|
||||
};
|
||||
const loggerType = logOptions.logger;
|
||||
if (!loggerType) {
|
||||
return () => {
|
||||
//
|
||||
};
|
||||
}
|
||||
let logger: Logger;
|
||||
if (typeof loggerType === 'string') {
|
||||
logger = win[loggerType];
|
||||
} else {
|
||||
logger = loggerType;
|
||||
}
|
||||
let logCount = 0;
|
||||
let inStack = false;
|
||||
const cancelHandlers: listenerHandler[] = [];
|
||||
// add listener to thrown errors
|
||||
if (logOptions.level.includes('error')) {
|
||||
const errorHandler = (event: ErrorEvent) => {
|
||||
const message = event.message,
|
||||
error = event.error as Error;
|
||||
const trace: string[] = ErrorStackParser.parse(error).map(
|
||||
(stackFrame: StackFrame) => stackFrame.toString(),
|
||||
);
|
||||
const payload = [stringify(message, logOptions.stringifyOptions)];
|
||||
cb({
|
||||
level: 'error',
|
||||
trace,
|
||||
payload,
|
||||
});
|
||||
};
|
||||
win.addEventListener('error', errorHandler);
|
||||
cancelHandlers.push(() => {
|
||||
win.removeEventListener('error', errorHandler);
|
||||
});
|
||||
const unhandledrejectionHandler = (event: PromiseRejectionEvent) => {
|
||||
let error: Error;
|
||||
let payload: string[];
|
||||
if (event.reason instanceof Error) {
|
||||
error = event.reason;
|
||||
payload = [
|
||||
stringify(
|
||||
`Uncaught (in promise) ${error.name}: ${error.message}`,
|
||||
logOptions.stringifyOptions,
|
||||
),
|
||||
];
|
||||
} else {
|
||||
error = new Error();
|
||||
payload = [
|
||||
stringify('Uncaught (in promise)', logOptions.stringifyOptions),
|
||||
stringify(event.reason, logOptions.stringifyOptions),
|
||||
];
|
||||
}
|
||||
const trace: string[] = ErrorStackParser.parse(error).map(
|
||||
(stackFrame: StackFrame) => stackFrame.toString(),
|
||||
);
|
||||
cb({
|
||||
level: 'error',
|
||||
trace,
|
||||
payload,
|
||||
});
|
||||
};
|
||||
win.addEventListener('unhandledrejection', unhandledrejectionHandler);
|
||||
cancelHandlers.push(() => {
|
||||
win.removeEventListener('unhandledrejection', unhandledrejectionHandler);
|
||||
});
|
||||
}
|
||||
for (const levelType of logOptions.level) {
|
||||
cancelHandlers.push(replace(logger, levelType));
|
||||
}
|
||||
return () => {
|
||||
cancelHandlers.forEach((h) => h());
|
||||
};
|
||||
|
||||
/**
|
||||
* replace the original console function and record logs
|
||||
* @param logger - the logger object such as Console
|
||||
* @param level - the name of log function to be replaced
|
||||
*/
|
||||
function replace(_logger: Logger, level: LogLevel) {
|
||||
if (!_logger[level]) {
|
||||
return () => {
|
||||
//
|
||||
};
|
||||
}
|
||||
// replace the logger.{level}. return a restore function
|
||||
return utils.patch(
|
||||
_logger,
|
||||
level,
|
||||
(original: (...args: Array<unknown>) => void) => {
|
||||
return (...args: Array<unknown>) => {
|
||||
original.apply(this, args);
|
||||
if (inStack) {
|
||||
// If we are already in a stack this means something from the following code is calling a console method
|
||||
// likely a proxy method called from stringify. We don't want to log this as it will cause an infinite loop
|
||||
return;
|
||||
}
|
||||
inStack = true;
|
||||
try {
|
||||
const trace = ErrorStackParser.parse(new Error())
|
||||
.map((stackFrame: StackFrame) => stackFrame.toString())
|
||||
.splice(1); // splice(1) to omit the hijacked log function
|
||||
const payload = args.map((s) =>
|
||||
stringify(s, logOptions.stringifyOptions),
|
||||
);
|
||||
logCount++;
|
||||
if (logCount < logOptions.lengthThreshold) {
|
||||
cb({
|
||||
level,
|
||||
trace,
|
||||
payload,
|
||||
});
|
||||
} else if (logCount === logOptions.lengthThreshold) {
|
||||
// notify the user
|
||||
cb({
|
||||
level: 'warn',
|
||||
trace: [],
|
||||
payload: [
|
||||
stringify('The number of log records reached the threshold.'),
|
||||
],
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
original('rrweb logger error:', error, ...args);
|
||||
} finally {
|
||||
inStack = false;
|
||||
}
|
||||
};
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const PLUGIN_NAME = 'rrweb/console@1';
|
||||
|
||||
export const getRecordConsolePlugin: (
|
||||
options?: LogRecordOptions,
|
||||
) => RecordPlugin = (options) => ({
|
||||
name: PLUGIN_NAME,
|
||||
observer: initLogObserver,
|
||||
options: options,
|
||||
});
|
||||
194
packages/plugins/rrweb-plugin-console-record/src/stringify.ts
Normal file
194
packages/plugins/rrweb-plugin-console-record/src/stringify.ts
Normal file
@@ -0,0 +1,194 @@
|
||||
/**
|
||||
* this file is used to serialize log message to string
|
||||
*
|
||||
*/
|
||||
|
||||
import type { StringifyOptions } from './index';
|
||||
|
||||
/**
|
||||
* transfer the node path in Event to string
|
||||
* @param node - the first node in a node path array
|
||||
*/
|
||||
function pathToSelector(node: HTMLElement): string | '' {
|
||||
if (!node || !node.outerHTML) {
|
||||
return '';
|
||||
}
|
||||
|
||||
let path = '';
|
||||
while (node.parentElement) {
|
||||
let name = node.localName;
|
||||
if (!name) {
|
||||
break;
|
||||
}
|
||||
name = name.toLowerCase();
|
||||
const parent = node.parentElement;
|
||||
|
||||
const domSiblings = [];
|
||||
|
||||
if (parent.children && parent.children.length > 0) {
|
||||
for (let i = 0; i < parent.children.length; i++) {
|
||||
const sibling = parent.children[i];
|
||||
if (sibling.localName && sibling.localName.toLowerCase) {
|
||||
if (sibling.localName.toLowerCase() === name) {
|
||||
domSiblings.push(sibling);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (domSiblings.length > 1) {
|
||||
name += `:eq(${domSiblings.indexOf(node)})`;
|
||||
}
|
||||
path = name + (path ? '>' + path : '');
|
||||
node = parent;
|
||||
}
|
||||
|
||||
return path;
|
||||
}
|
||||
|
||||
/**
|
||||
* judge is object
|
||||
*/
|
||||
function isObject(obj: unknown): boolean {
|
||||
return Object.prototype.toString.call(obj) === '[object Object]';
|
||||
}
|
||||
|
||||
/**
|
||||
* judge the object's depth
|
||||
*/
|
||||
function isObjTooDeep(obj: Record<string, unknown>, limit: number): boolean {
|
||||
if (limit === 0) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const keys = Object.keys(obj);
|
||||
for (const key of keys) {
|
||||
if (
|
||||
isObject(obj[key]) &&
|
||||
isObjTooDeep(obj[key] as Record<string, unknown>, limit - 1)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* stringify any js object
|
||||
* @param obj - the object to stringify
|
||||
*/
|
||||
export function stringify(
|
||||
obj: unknown,
|
||||
stringifyOptions?: StringifyOptions,
|
||||
): string {
|
||||
const options: StringifyOptions = {
|
||||
numOfKeysLimit: 50,
|
||||
depthOfLimit: 4,
|
||||
};
|
||||
Object.assign(options, stringifyOptions);
|
||||
const stack: unknown[] = [];
|
||||
const keys: unknown[] = [];
|
||||
return JSON.stringify(
|
||||
obj,
|
||||
function (key, value: string | bigint | object | null | undefined) {
|
||||
/**
|
||||
* forked from https://github.com/moll/json-stringify-safe/blob/master/stringify.js
|
||||
* to deCycle the object
|
||||
*/
|
||||
if (stack.length > 0) {
|
||||
const thisPos = stack.indexOf(this);
|
||||
~thisPos ? stack.splice(thisPos + 1) : stack.push(this);
|
||||
~thisPos ? keys.splice(thisPos, Infinity, key) : keys.push(key);
|
||||
if (~stack.indexOf(value)) {
|
||||
if (stack[0] === value) {
|
||||
value = '[Circular ~]';
|
||||
} else {
|
||||
value =
|
||||
'[Circular ~.' +
|
||||
keys.slice(0, stack.indexOf(value)).join('.') +
|
||||
']';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
stack.push(value);
|
||||
}
|
||||
/* END of the FORK */
|
||||
|
||||
if (value === null) return value;
|
||||
if (value === undefined) return 'undefined';
|
||||
if (shouldIgnore(value as object)) {
|
||||
return toString(value as object);
|
||||
}
|
||||
if (typeof value === 'bigint') {
|
||||
return value.toString() + 'n';
|
||||
}
|
||||
if (value instanceof Event) {
|
||||
const eventResult: Record<string, unknown> = {};
|
||||
for (const eventKey in value) {
|
||||
const eventValue = (value as unknown as Record<string, unknown>)[
|
||||
eventKey
|
||||
];
|
||||
if (Array.isArray(eventValue)) {
|
||||
eventResult[eventKey] = pathToSelector(
|
||||
(eventValue.length ? eventValue[0] : null) as HTMLElement,
|
||||
);
|
||||
} else {
|
||||
eventResult[eventKey] = eventValue;
|
||||
}
|
||||
}
|
||||
return eventResult;
|
||||
} else if (value instanceof Node) {
|
||||
if (value instanceof HTMLElement) {
|
||||
return value ? value.outerHTML : '';
|
||||
}
|
||||
return value.nodeName;
|
||||
} else if (value instanceof Error) {
|
||||
return value.stack
|
||||
? value.stack + '\nEnd of stack for Error object'
|
||||
: value.name + ': ' + value.message;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* whether we should ignore obj's info and call toString() function instead
|
||||
*/
|
||||
function shouldIgnore(_obj: object): boolean {
|
||||
// outof keys limit
|
||||
if (isObject(_obj) && Object.keys(_obj).length > options.numOfKeysLimit) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// is function or bigint
|
||||
if (typeof _obj === 'function') {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* judge object's depth to avoid browser's OOM
|
||||
*
|
||||
* issues: https://github.com/rrweb-io/rrweb/issues/653
|
||||
*/
|
||||
if (
|
||||
isObject(_obj) &&
|
||||
isObjTooDeep(_obj as Record<string, unknown>, options.depthOfLimit)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* limit the toString() result according to option
|
||||
*/
|
||||
function toString(_obj: object): string {
|
||||
let str = _obj.toString();
|
||||
if (options.stringLengthLimit && str.length > options.stringLengthLimit) {
|
||||
str = `${str.slice(0, options.stringLengthLimit)}...`;
|
||||
}
|
||||
return str;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,697 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`rrweb-plugin-console-record > should handle recursive console messages 1`] = `
|
||||
"[
|
||||
{
|
||||
\\"type\\": 4,
|
||||
\\"data\\": {
|
||||
\\"href\\": \\"about:blank\\",
|
||||
\\"width\\": 1920,
|
||||
\\"height\\": 1080
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"data\\": {
|
||||
\\"node\\": {
|
||||
\\"type\\": 0,
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 1,
|
||||
\\"name\\": \\"html\\",
|
||||
\\"publicId\\": \\"\\",
|
||||
\\"systemId\\": \\"\\",
|
||||
\\"id\\": 2
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"html\\",
|
||||
\\"attributes\\": {
|
||||
\\"lang\\": \\"en\\"
|
||||
},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"head\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 5
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"script\\",
|
||||
\\"attributes\\": {
|
||||
\\"type\\": \\"module\\",
|
||||
\\"src\\": \\"http://localhost:3030/@vite/client\\"
|
||||
},
|
||||
\\"childNodes\\": [],
|
||||
\\"id\\": 6
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n\\\\n \\",
|
||||
\\"id\\": 7
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"meta\\",
|
||||
\\"attributes\\": {
|
||||
\\"charset\\": \\"UTF-8\\"
|
||||
},
|
||||
\\"childNodes\\": [],
|
||||
\\"id\\": 8
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 9
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"meta\\",
|
||||
\\"attributes\\": {
|
||||
\\"name\\": \\"viewport\\",
|
||||
\\"content\\": \\"width=device-width, initial-scale=1.0\\"
|
||||
},
|
||||
\\"childNodes\\": [],
|
||||
\\"id\\": 10
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 11
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"meta\\",
|
||||
\\"attributes\\": {
|
||||
\\"http-equiv\\": \\"X-UA-Compatible\\",
|
||||
\\"content\\": \\"ie=edge\\"
|
||||
},
|
||||
\\"childNodes\\": [],
|
||||
\\"id\\": 12
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 13
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"title\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"Log record\\",
|
||||
\\"id\\": 15
|
||||
}
|
||||
],
|
||||
\\"id\\": 14
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 16
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"script\\",
|
||||
\\"attributes\\": {
|
||||
\\"src\\": \\"http://localhost:3030/test/html/index.ts\\",
|
||||
\\"type\\": \\"module\\"
|
||||
},
|
||||
\\"childNodes\\": [],
|
||||
\\"id\\": 17
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 18
|
||||
}
|
||||
],
|
||||
\\"id\\": 4
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 19
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"body\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n\\\\n\\",
|
||||
\\"id\\": 21
|
||||
}
|
||||
],
|
||||
\\"id\\": 20
|
||||
}
|
||||
],
|
||||
\\"id\\": 3
|
||||
}
|
||||
],
|
||||
\\"id\\": 1
|
||||
},
|
||||
\\"initialOffset\\": {
|
||||
\\"left\\": 0,
|
||||
\\"top\\": 0
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"log\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:21:15\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"Proxied object:\\\\\\"\\",
|
||||
\\"\\\\\\"[object Object]\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]"
|
||||
`;
|
||||
|
||||
exports[`rrweb-plugin-console-record > should record console messages 1`] = `
|
||||
"[
|
||||
{
|
||||
\\"type\\": 4,
|
||||
\\"data\\": {
|
||||
\\"href\\": \\"about:blank\\",
|
||||
\\"width\\": 1920,
|
||||
\\"height\\": 1080
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"data\\": {
|
||||
\\"node\\": {
|
||||
\\"type\\": 0,
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 1,
|
||||
\\"name\\": \\"html\\",
|
||||
\\"publicId\\": \\"\\",
|
||||
\\"systemId\\": \\"\\",
|
||||
\\"id\\": 2
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"html\\",
|
||||
\\"attributes\\": {
|
||||
\\"lang\\": \\"en\\"
|
||||
},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"head\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 5
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"script\\",
|
||||
\\"attributes\\": {
|
||||
\\"type\\": \\"module\\",
|
||||
\\"src\\": \\"http://localhost:3030/@vite/client\\"
|
||||
},
|
||||
\\"childNodes\\": [],
|
||||
\\"id\\": 6
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n\\\\n \\",
|
||||
\\"id\\": 7
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"meta\\",
|
||||
\\"attributes\\": {
|
||||
\\"charset\\": \\"UTF-8\\"
|
||||
},
|
||||
\\"childNodes\\": [],
|
||||
\\"id\\": 8
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 9
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"meta\\",
|
||||
\\"attributes\\": {
|
||||
\\"name\\": \\"viewport\\",
|
||||
\\"content\\": \\"width=device-width, initial-scale=1.0\\"
|
||||
},
|
||||
\\"childNodes\\": [],
|
||||
\\"id\\": 10
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 11
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"meta\\",
|
||||
\\"attributes\\": {
|
||||
\\"http-equiv\\": \\"X-UA-Compatible\\",
|
||||
\\"content\\": \\"ie=edge\\"
|
||||
},
|
||||
\\"childNodes\\": [],
|
||||
\\"id\\": 12
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 13
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"title\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"Log record\\",
|
||||
\\"id\\": 15
|
||||
}
|
||||
],
|
||||
\\"id\\": 14
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 16
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"script\\",
|
||||
\\"attributes\\": {
|
||||
\\"src\\": \\"http://localhost:3030/test/html/index.ts\\",
|
||||
\\"type\\": \\"module\\"
|
||||
},
|
||||
\\"childNodes\\": [],
|
||||
\\"id\\": 17
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 18
|
||||
}
|
||||
],
|
||||
\\"id\\": 4
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n \\",
|
||||
\\"id\\": 19
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"body\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"textContent\\": \\"\\\\n\\\\n\\",
|
||||
\\"id\\": 21
|
||||
}
|
||||
],
|
||||
\\"id\\": 20
|
||||
}
|
||||
],
|
||||
\\"id\\": 3
|
||||
}
|
||||
],
|
||||
\\"id\\": 1
|
||||
},
|
||||
\\"initialOffset\\": {
|
||||
\\"left\\": 0,
|
||||
\\"top\\": 0
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"assert\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:2:15\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"true\\",
|
||||
\\"\\\\\\"assert\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"count\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:3:15\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"count\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"countReset\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:4:15\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"count\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"debug\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:5:15\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"debug\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"dir\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:6:15\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"dir\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"dirxml\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:7:15\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"dirxml\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"group\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:8:15\\"
|
||||
],
|
||||
\\"payload\\": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"groupCollapsed\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:9:15\\"
|
||||
],
|
||||
\\"payload\\": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"info\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:10:15\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"info\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"log\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:11:15\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"log\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"table\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:12:15\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"table\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"time\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:13:15\\"
|
||||
],
|
||||
\\"payload\\": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"timeEnd\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:14:15\\"
|
||||
],
|
||||
\\"payload\\": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"timeLog\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:15:15\\"
|
||||
],
|
||||
\\"payload\\": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"trace\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:16:15\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"trace\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"warn\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:17:15\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"warn\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"clear\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:18:15\\"
|
||||
],
|
||||
\\"payload\\": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"log\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:19:15\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"TypeError: a message\\\\\\\\n at __puppeteer_evaluation_script__:19:19\\\\\\\\nEnd of stack for Error object\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"data\\": {
|
||||
\\"source\\": 0,
|
||||
\\"texts\\": [],
|
||||
\\"attributes\\": [],
|
||||
\\"removes\\": [],
|
||||
\\"adds\\": [
|
||||
{
|
||||
\\"parentId\\": 20,
|
||||
\\"nextId\\": null,
|
||||
\\"node\\": {
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"iframe\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [],
|
||||
\\"id\\": 22
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 3,
|
||||
\\"data\\": {
|
||||
\\"source\\": 0,
|
||||
\\"adds\\": [
|
||||
{
|
||||
\\"parentId\\": 22,
|
||||
\\"nextId\\": null,
|
||||
\\"node\\": {
|
||||
\\"type\\": 0,
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"html\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"head\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [],
|
||||
\\"rootId\\": 23,
|
||||
\\"id\\": 25
|
||||
},
|
||||
{
|
||||
\\"type\\": 2,
|
||||
\\"tagName\\": \\"body\\",
|
||||
\\"attributes\\": {},
|
||||
\\"childNodes\\": [],
|
||||
\\"rootId\\": 23,
|
||||
\\"id\\": 26
|
||||
}
|
||||
],
|
||||
\\"rootId\\": 23,
|
||||
\\"id\\": 24
|
||||
}
|
||||
],
|
||||
\\"compatMode\\": \\"BackCompat\\",
|
||||
\\"id\\": 23
|
||||
}
|
||||
}
|
||||
],
|
||||
\\"removes\\": [],
|
||||
\\"texts\\": [],
|
||||
\\"attributes\\": [],
|
||||
\\"isAttachIframe\\": true
|
||||
}
|
||||
},
|
||||
{
|
||||
\\"type\\": 6,
|
||||
\\"data\\": {
|
||||
\\"plugin\\": \\"rrweb/console@1\\",
|
||||
\\"payload\\": {
|
||||
\\"level\\": \\"log\\",
|
||||
\\"trace\\": [
|
||||
\\"__puppeteer_evaluation_script__:2:15\\"
|
||||
],
|
||||
\\"payload\\": [
|
||||
\\"\\\\\\"from iframe\\\\\\"\\"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]"
|
||||
`;
|
||||
@@ -0,0 +1,19 @@
|
||||
import type { eventWithTime } from '@rrweb/types';
|
||||
import { record } from 'rrweb';
|
||||
import { getRecordConsolePlugin } from '../../src/index';
|
||||
|
||||
window.Date.now = () => new Date(Date.UTC(2018, 10, 15, 8)).valueOf();
|
||||
const snapshots: eventWithTime[] = ((window as any).snapshots = []);
|
||||
record({
|
||||
emit: (event) => {
|
||||
snapshots.push(event);
|
||||
},
|
||||
// maskTextSelector: ${JSON.stringify(options.maskTextSelector)},
|
||||
// maskAllInputs: ${options.maskAllInputs},
|
||||
// maskInputOptions: ${JSON.stringify(options.maskAllInputs)},
|
||||
// userTriggeredOnInput: ${options.userTriggeredOnInput},
|
||||
// maskTextFn: ${options.maskTextFn},
|
||||
// recordCanvas: ${options.recordCanvas},
|
||||
// inlineImages: ${options.inlineImages},
|
||||
plugins: [getRecordConsolePlugin()],
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Log record</title>
|
||||
<script src="./index.ts" type="module"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
128
packages/plugins/rrweb-plugin-console-record/test/index.test.ts
Normal file
128
packages/plugins/rrweb-plugin-console-record/test/index.test.ts
Normal file
@@ -0,0 +1,128 @@
|
||||
import { describe, it, beforeAll, afterAll, expect, vi } from 'vitest';
|
||||
import { stringifySnapshots } from '../../../rrweb/test/utils';
|
||||
import { createServer, ViteDevServer } from 'vite';
|
||||
import * as puppeteer from 'puppeteer';
|
||||
import type { Browser, Page } from 'puppeteer';
|
||||
import type { eventWithTime } from '@rrweb/types';
|
||||
|
||||
export async function launchPuppeteer(
|
||||
options?: Parameters<(typeof puppeteer)['launch']>[0],
|
||||
) {
|
||||
return await puppeteer.launch({
|
||||
headless: process.env.PUPPETEER_HEADLESS ? true : false,
|
||||
defaultViewport: {
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
},
|
||||
args: ['--no-sandbox'],
|
||||
...options,
|
||||
});
|
||||
}
|
||||
|
||||
export function assertSnapshot(snapshots: eventWithTime[]) {
|
||||
expect(snapshots).toBeDefined();
|
||||
expect(stringifySnapshots(snapshots)).toMatchSnapshot();
|
||||
}
|
||||
|
||||
describe('rrweb-plugin-console-record', () => {
|
||||
// vi.setConfig({ testTimeout: 120_000 });
|
||||
let server: ViteDevServer;
|
||||
let serverUrl: string;
|
||||
let browser: Browser;
|
||||
let page: Page;
|
||||
|
||||
beforeAll(async () => {
|
||||
server = await createServer({
|
||||
preview: { port: 3000 },
|
||||
mode: 'test',
|
||||
// hmr calls `console.debug('[vite] connected')` and messes up our snapshots
|
||||
// so we disable it
|
||||
server: { hmr: false },
|
||||
});
|
||||
await server.listen();
|
||||
serverUrl = server.resolvedUrls!.local[0];
|
||||
browser = await launchPuppeteer();
|
||||
page = await browser.newPage();
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await browser.close();
|
||||
await server.close();
|
||||
});
|
||||
|
||||
it('should handle recursive console messages', async () => {
|
||||
await page.goto(`${serverUrl}test/html/log.html`);
|
||||
|
||||
await page.evaluate(() => {
|
||||
// Some frameworks like Vue.js use proxies to implement reactivity.
|
||||
// This can cause infinite loops when logging objects.
|
||||
let recursiveTarget = { foo: 'bar', proxied: 'i-am', proxy: null };
|
||||
let count = 0;
|
||||
|
||||
const handler = {
|
||||
get(target: any, prop: any, ...args: any[]) {
|
||||
if (prop === 'proxied') {
|
||||
if (count > 9) {
|
||||
return;
|
||||
}
|
||||
count++; // We don't want out test to get into an infinite loop...
|
||||
console.warn(
|
||||
'proxied was accessed so triggering a console.warn',
|
||||
target,
|
||||
);
|
||||
}
|
||||
return Reflect.get(target, prop, ...args);
|
||||
},
|
||||
};
|
||||
|
||||
const proxy = new Proxy(recursiveTarget, handler);
|
||||
recursiveTarget.proxy = proxy;
|
||||
|
||||
console.log('Proxied object:', proxy);
|
||||
});
|
||||
|
||||
// await waitForRAF(page);
|
||||
|
||||
const snapshots = (await page.evaluate(
|
||||
'window.snapshots',
|
||||
)) as eventWithTime[];
|
||||
// The snapshots should containe 1 console log, not multiple.
|
||||
assertSnapshot(snapshots);
|
||||
});
|
||||
|
||||
it('should record console messages', async () => {
|
||||
await page.goto(`${serverUrl}test/html/log.html`);
|
||||
|
||||
await page.evaluate(() => {
|
||||
console.assert(0 === 0, 'assert');
|
||||
console.count('count');
|
||||
console.countReset('count');
|
||||
console.debug('debug');
|
||||
console.dir('dir');
|
||||
console.dirxml('dirxml');
|
||||
console.group();
|
||||
console.groupCollapsed();
|
||||
console.info('info');
|
||||
console.log('log');
|
||||
console.table('table');
|
||||
console.time();
|
||||
console.timeEnd();
|
||||
console.timeLog();
|
||||
console.trace('trace');
|
||||
console.warn('warn');
|
||||
console.clear();
|
||||
console.log(new TypeError('a message'));
|
||||
const iframe = document.createElement('iframe');
|
||||
document.body.appendChild(iframe);
|
||||
});
|
||||
|
||||
await page.frames()[1].evaluate(() => {
|
||||
console.log('from iframe');
|
||||
});
|
||||
|
||||
const snapshots = (await page.evaluate(
|
||||
'window.snapshots',
|
||||
)) as eventWithTime[];
|
||||
assertSnapshot(snapshots);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
|
||||
import { stringify } from '../src/stringify';
|
||||
import { describe, it, expect } from 'vitest';
|
||||
|
||||
describe('console record plugin', () => {
|
||||
it('can stringify bigint', () => {
|
||||
expect(stringify(BigInt(1))).toEqual('"1n"');
|
||||
});
|
||||
});
|
||||
18
packages/plugins/rrweb-plugin-console-record/tsconfig.json
Normal file
18
packages/plugins/rrweb-plugin-console-record/tsconfig.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.base.json",
|
||||
"include": ["src"],
|
||||
"exclude": ["vite.config.ts", "vitest.config.ts", "test"],
|
||||
"compilerOptions": {
|
||||
"rootDir": "src",
|
||||
"tsBuildInfoFile": "./tsconfig.tsbuildinfo",
|
||||
|
||||
// TODO: enable me in the future
|
||||
// at time of writing (April 2024) there are 6 errors in this package
|
||||
"strict": false
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"path": "../../rrweb"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import config from '../../../vite.config.default';
|
||||
|
||||
export default config('src/index.ts', 'rrwebPluginConsoleRecord');
|
||||
@@ -0,0 +1,5 @@
|
||||
/// <reference types="vitest" />
|
||||
import { defineProject, mergeConfig } from 'vitest/config';
|
||||
import configShared from '../../../vitest.config.ts';
|
||||
|
||||
export default mergeConfig(configShared, defineProject({}));
|
||||
178
packages/plugins/rrweb-plugin-console-replay/README.md
Normal file
178
packages/plugins/rrweb-plugin-console-replay/README.md
Normal file
@@ -0,0 +1,178 @@
|
||||
# @rrweb/rrweb-plugin-console-replay
|
||||
|
||||
Please refer to the [console recipe](../../../docs/recipes/console.md) on how to use this plugin.
|
||||
See the [guide](../../../guide.md) for more info on rrweb.
|
||||
|
||||
## Sponsors
|
||||
|
||||
[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site.
|
||||
|
||||
### Gold Sponsors 🥇
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/0/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/1/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/2/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/3/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/4/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/5/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/6/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Silver Sponsors 🥈
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/0/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/1/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/2/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/3/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/4/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/5/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/6/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Bronze Sponsors 🥉
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/0/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/1/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/2/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/3/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/4/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/5/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/6/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/7/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/8/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Backers
|
||||
|
||||
<a href="https://opencollective.com/rrweb#sponsor" rel="nofollow"><img src="https://opencollective.com/rrweb/tiers/backers.svg?avatarHeight=36"></a>
|
||||
|
||||
## Core Team Members
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://github.com/Yuyz0112">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/13651389?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Yuyz0112</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/YunFeng0817">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/27533910?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Yun Feng</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/eoghanmurray">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/156780?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>eoghanmurray</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/Juice10">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/4106?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Juice10</b></sub>
|
||||
<br /><sub>open for rrweb consulting</sub>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Who's using rrweb?
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="http://www.smartx.com/" target="_blank">
|
||||
<img width="195px" src="https://www.rrweb.io/logos/smartx.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
|
||||
<img width="195px" src="https://www.rrweb.io/logos/posthog.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://statcounter.com/session-replay/" target="_blank">
|
||||
<img width="195px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://recordonce.com/" target="_blank">
|
||||
<img width="195px" alt="Smart screen recording for SaaS" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://cux.io" target="_blank">
|
||||
<img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://remsupp.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Remote Access & Co-Browsing" width="195px" src="https://remsupp.com/images/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://highlight.io" target="_blank">
|
||||
<img style="padding: 8px" alt="The open source, fullstack Monitoring Platform." width="195px" src="https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://analyzee.io" target="_blank">
|
||||
<img style="padding: 8px" alt="Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions." width="195px" src="https://cdn.analyzee.io/assets/analyzee-logo.png">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://requestly.io" target="_blank">
|
||||
<img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://gleap.io" target="_blank">
|
||||
<img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://uxwizz.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://www.howdygo.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Interactive product demos for small marketing teams" width="195px" src="https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
55
packages/plugins/rrweb-plugin-console-replay/package.json
Normal file
55
packages/plugins/rrweb-plugin-console-replay/package.json
Normal file
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "@rrweb/rrweb-plugin-console-replay",
|
||||
"version": "2.0.0-alpha.14",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./dist/rrweb-plugin-console-replay.umd.cjs",
|
||||
"module": "./dist/rrweb-plugin-console-replay.js",
|
||||
"unpkg": "./dist/rrweb-plugin-console-replay.umd.cjs",
|
||||
"typings": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"default": "./dist/rrweb-plugin-console-replay.js"
|
||||
},
|
||||
"require": {
|
||||
"types": "./dist/index.d.cts",
|
||||
"default": "./dist/rrweb-plugin-console-replay.umd.cjs"
|
||||
}
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "vite build --watch",
|
||||
"build": "tsc -noEmit && vite build",
|
||||
"check-types": "tsc -noEmit",
|
||||
"prepublish": "npm run build"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/rrweb-io/rrweb.git"
|
||||
},
|
||||
"keywords": [
|
||||
"rrweb"
|
||||
],
|
||||
"author": "yanzhen@smartx.com",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/rrweb-io/rrweb/issues"
|
||||
},
|
||||
"homepage": "https://github.com/rrweb-io/rrweb#readme",
|
||||
"devDependencies": {
|
||||
"@rrweb/rrweb-plugin-console-record": "^2.0.0-alpha.14",
|
||||
"rrweb": "^2.0.0-alpha.14",
|
||||
"typescript": "^4.7.3",
|
||||
"vite": "^5.2.8",
|
||||
"vite-plugin-dts": "^3.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rrweb": "^2.0.0-alpha.14"
|
||||
}
|
||||
}
|
||||
149
packages/plugins/rrweb-plugin-console-replay/src/index.ts
Normal file
149
packages/plugins/rrweb-plugin-console-replay/src/index.ts
Normal file
@@ -0,0 +1,149 @@
|
||||
import {
|
||||
LogLevel,
|
||||
LogData,
|
||||
PLUGIN_NAME,
|
||||
} from '@rrweb/rrweb-plugin-console-record';
|
||||
import type { eventWithTime } from '@rrweb/types';
|
||||
import { EventType, IncrementalSource } from '@rrweb/types';
|
||||
import type { ReplayPlugin, Replayer } from 'rrweb';
|
||||
|
||||
/**
|
||||
* define an interface to replay log records
|
||||
* (data: logData) => void> function to display the log data
|
||||
*/
|
||||
type ReplayLogger = Partial<Record<LogLevel, (data: LogData) => void>>;
|
||||
|
||||
type LogReplayConfig = {
|
||||
level?: LogLevel[];
|
||||
replayLogger?: ReplayLogger;
|
||||
};
|
||||
|
||||
const ORIGINAL_ATTRIBUTE_NAME = '__rrweb_original__';
|
||||
type PatchedConsoleLog = {
|
||||
[ORIGINAL_ATTRIBUTE_NAME]: typeof console.log;
|
||||
};
|
||||
|
||||
const defaultLogConfig: LogReplayConfig = {
|
||||
level: [
|
||||
'assert',
|
||||
'clear',
|
||||
'count',
|
||||
'countReset',
|
||||
'debug',
|
||||
'dir',
|
||||
'dirxml',
|
||||
'error',
|
||||
'group',
|
||||
'groupCollapsed',
|
||||
'groupEnd',
|
||||
'info',
|
||||
'log',
|
||||
'table',
|
||||
'time',
|
||||
'timeEnd',
|
||||
'timeLog',
|
||||
'trace',
|
||||
'warn',
|
||||
],
|
||||
replayLogger: undefined,
|
||||
};
|
||||
|
||||
class LogReplayPlugin {
|
||||
private config: LogReplayConfig;
|
||||
|
||||
constructor(config?: LogReplayConfig) {
|
||||
this.config = Object.assign(defaultLogConfig, config);
|
||||
}
|
||||
|
||||
/**
|
||||
* generate a console log replayer which implement the interface ReplayLogger
|
||||
*/
|
||||
public getConsoleLogger(): ReplayLogger {
|
||||
const replayLogger: ReplayLogger = {};
|
||||
for (const level of this.config.level!) {
|
||||
if (level === 'trace') {
|
||||
replayLogger[level] = (data: LogData) => {
|
||||
const logger = (console.log as unknown as PatchedConsoleLog)[
|
||||
ORIGINAL_ATTRIBUTE_NAME
|
||||
]
|
||||
? (console.log as unknown as PatchedConsoleLog)[
|
||||
ORIGINAL_ATTRIBUTE_NAME
|
||||
]
|
||||
: console.log;
|
||||
logger(
|
||||
...data.payload.map((s) => JSON.parse(s) as object),
|
||||
this.formatMessage(data),
|
||||
);
|
||||
};
|
||||
} else {
|
||||
replayLogger[level] = (data: LogData) => {
|
||||
const logger = (console[level] as unknown as PatchedConsoleLog)[
|
||||
ORIGINAL_ATTRIBUTE_NAME
|
||||
]
|
||||
? (console[level] as unknown as PatchedConsoleLog)[
|
||||
ORIGINAL_ATTRIBUTE_NAME
|
||||
]
|
||||
: console[level];
|
||||
logger(
|
||||
...data.payload.map((s) => JSON.parse(s) as object),
|
||||
this.formatMessage(data),
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
return replayLogger;
|
||||
}
|
||||
|
||||
/**
|
||||
* format the trace data to a string
|
||||
* @param data - the log data
|
||||
*/
|
||||
private formatMessage(data: LogData): string {
|
||||
if (data.trace.length === 0) {
|
||||
return '';
|
||||
}
|
||||
const stackPrefix = '\n\tat ';
|
||||
let result = stackPrefix;
|
||||
result += data.trace.join(stackPrefix);
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
export const getReplayConsolePlugin: (
|
||||
options?: LogReplayConfig,
|
||||
) => ReplayPlugin = (options) => {
|
||||
const replayLogger =
|
||||
options?.replayLogger || new LogReplayPlugin(options).getConsoleLogger();
|
||||
|
||||
return {
|
||||
handler(
|
||||
event: eventWithTime,
|
||||
_isSync: boolean,
|
||||
context: { replayer: Replayer },
|
||||
) {
|
||||
let logData: LogData | null = null;
|
||||
if (
|
||||
event.type === EventType.IncrementalSnapshot &&
|
||||
event.data.source === (IncrementalSource.Log as IncrementalSource)
|
||||
) {
|
||||
logData = event.data as unknown as LogData;
|
||||
} else if (
|
||||
event.type === EventType.Plugin &&
|
||||
event.data.plugin === PLUGIN_NAME
|
||||
) {
|
||||
logData = event.data.payload as LogData;
|
||||
}
|
||||
if (logData) {
|
||||
try {
|
||||
if (typeof replayLogger[logData.level] === 'function') {
|
||||
replayLogger[logData.level]!(logData);
|
||||
}
|
||||
} catch (error) {
|
||||
if (context.replayer.config.showWarning) {
|
||||
console.warn(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
17
packages/plugins/rrweb-plugin-console-replay/tsconfig.json
Normal file
17
packages/plugins/rrweb-plugin-console-replay/tsconfig.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.base.json",
|
||||
"include": ["src"],
|
||||
"exclude": ["vite.config.ts", "dist", "tsconfig.json"],
|
||||
"compilerOptions": {
|
||||
"rootDir": ".",
|
||||
"tsBuildInfoFile": "./tsconfig.tsbuildinfo"
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"path": "../rrweb-plugin-console-record"
|
||||
},
|
||||
{
|
||||
"path": "../../rrweb"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import config from '../../../vite.config.default';
|
||||
|
||||
export default config('src/index.ts', 'rrwebPluginConsoleReplay');
|
||||
202
packages/plugins/rrweb-plugin-sequential-id-record/README.md
Normal file
202
packages/plugins/rrweb-plugin-sequential-id-record/README.md
Normal file
@@ -0,0 +1,202 @@
|
||||
# @rrweb/rrweb-plugin-sequential-id-record
|
||||
|
||||
Use this plugin in combination with the [@rrweb/rrweb-plugin-sequential-id-replay](../rrweb-plugin-sequential-id-replay) plugin to record and replay events with a sequential id.
|
||||
See the [guide](../../../guide.md) for more info on rrweb.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install @rrweb/rrweb-plugin-sequential-id-record
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import rrweb from 'rrweb';
|
||||
import { getRecordSequentialIdPlugin } from '@rrweb/rrweb-plugin-sequential-id-record';
|
||||
|
||||
rrweb.record({
|
||||
emit: function emit(event) {
|
||||
// send events to server
|
||||
},
|
||||
plugins: [
|
||||
getRecordSequentialIdPlugin({
|
||||
key: '_sid', // default value
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## Sponsors
|
||||
|
||||
[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site.
|
||||
|
||||
### Gold Sponsors 🥇
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/0/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/1/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/2/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/3/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/4/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/5/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/6/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Silver Sponsors 🥈
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/0/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/1/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/2/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/3/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/4/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/5/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/6/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Bronze Sponsors 🥉
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/0/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/1/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/2/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/3/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/4/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/5/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/6/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/7/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/8/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Backers
|
||||
|
||||
<a href="https://opencollective.com/rrweb#sponsor" rel="nofollow"><img src="https://opencollective.com/rrweb/tiers/backers.svg?avatarHeight=36"></a>
|
||||
|
||||
## Core Team Members
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://github.com/Yuyz0112">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/13651389?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Yuyz0112</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/YunFeng0817">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/27533910?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Yun Feng</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/eoghanmurray">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/156780?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>eoghanmurray</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/Juice10">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/4106?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Juice10</b></sub>
|
||||
<br /><sub>open for rrweb consulting</sub>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Who's using rrweb?
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="http://www.smartx.com/" target="_blank">
|
||||
<img width="195px" src="https://www.rrweb.io/logos/smartx.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
|
||||
<img width="195px" src="https://www.rrweb.io/logos/posthog.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://statcounter.com/session-replay/" target="_blank">
|
||||
<img width="195px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://recordonce.com/" target="_blank">
|
||||
<img width="195px" alt="Smart screen recording for SaaS" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://cux.io" target="_blank">
|
||||
<img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://remsupp.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Remote Access & Co-Browsing" width="195px" src="https://remsupp.com/images/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://highlight.io" target="_blank">
|
||||
<img style="padding: 8px" alt="The open source, fullstack Monitoring Platform." width="195px" src="https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://analyzee.io" target="_blank">
|
||||
<img style="padding: 8px" alt="Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions." width="195px" src="https://cdn.analyzee.io/assets/analyzee-logo.png">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://requestly.io" target="_blank">
|
||||
<img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://gleap.io" target="_blank">
|
||||
<img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://uxwizz.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://www.howdygo.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Interactive product demos for small marketing teams" width="195px" src="https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"name": "@rrweb/rrweb-plugin-sequential-id-record",
|
||||
"version": "2.0.0-alpha.14",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./dist/rrweb-plugin-sequential-id-record.umd.cjs",
|
||||
"module": "./dist/rrweb-plugin-sequential-id-record.js",
|
||||
"unpkg": "./dist/rrweb-plugin-sequential-id-record.umd.cjs",
|
||||
"typings": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"default": "./dist/rrweb-plugin-sequential-id-record.js"
|
||||
},
|
||||
"require": {
|
||||
"types": "./dist/index.d.cts",
|
||||
"default": "./dist/rrweb-plugin-sequential-id-record.umd.cjs"
|
||||
}
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "vite build --watch",
|
||||
"build": "tsc -noEmit && vite build",
|
||||
"check-types": "tsc -noEmit",
|
||||
"prepublish": "npm run build"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/rrweb-io/rrweb.git"
|
||||
},
|
||||
"keywords": [
|
||||
"rrweb"
|
||||
],
|
||||
"author": "yanzhen@smartx.com",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/rrweb-io/rrweb/issues"
|
||||
},
|
||||
"homepage": "https://github.com/rrweb-io/rrweb#readme",
|
||||
"devDependencies": {
|
||||
"rrweb": "^2.0.0-alpha.14",
|
||||
"typescript": "^4.7.3",
|
||||
"vite": "^5.2.8",
|
||||
"vite-plugin-dts": "^3.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rrweb": "^2.0.0-alpha.14"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import type { RecordPlugin } from '@rrweb/types';
|
||||
|
||||
export type SequentialIdOptions = {
|
||||
key: string;
|
||||
};
|
||||
|
||||
const defaultOptions: SequentialIdOptions = {
|
||||
key: '_sid',
|
||||
};
|
||||
|
||||
export const PLUGIN_NAME = 'rrweb/sequential-id@1';
|
||||
|
||||
export const getRecordSequentialIdPlugin: (
|
||||
options?: Partial<SequentialIdOptions>,
|
||||
) => RecordPlugin = (options) => {
|
||||
const _options = options
|
||||
? Object.assign({}, defaultOptions, options)
|
||||
: defaultOptions;
|
||||
let id = 0;
|
||||
|
||||
return {
|
||||
name: PLUGIN_NAME,
|
||||
eventProcessor(event) {
|
||||
Object.assign(event, {
|
||||
[_options.key]: ++id,
|
||||
});
|
||||
return event;
|
||||
},
|
||||
options: _options,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.base.json",
|
||||
"include": ["src"],
|
||||
"exclude": ["vite.config.ts"],
|
||||
"compilerOptions": {
|
||||
"rootDir": "src",
|
||||
"tsBuildInfoFile": "./tsconfig.tsbuildinfo"
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"path": "../../rrweb"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import config from '../../../vite.config.default';
|
||||
|
||||
export default config('src/index.ts', 'rrwebPluginSequentialIdRecord');
|
||||
202
packages/plugins/rrweb-plugin-sequential-id-replay/README.md
Normal file
202
packages/plugins/rrweb-plugin-sequential-id-replay/README.md
Normal file
@@ -0,0 +1,202 @@
|
||||
# @rrweb/rrweb-plugin-sequential-id-replay
|
||||
|
||||
Use this plugin in combination with the [@rrweb/rrweb-plugin-sequential-id-record](../rrweb-plugin-sequential-id-record) plugin to record and replay events with a sequential id.
|
||||
See the [guide](../../../guide.md) for more info on rrweb.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install @rrweb/rrweb-plugin-sequential-id-replay
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import rrweb from 'rrweb';
|
||||
import { getReplaySequentialIdPlugin } from '@rrweb/rrweb-plugin-sequential-id-replay';
|
||||
|
||||
const replayer = new rrweb.Replayer(events, {
|
||||
plugins: [
|
||||
getReplaySequentialIdPlugin({
|
||||
// make sure this is the same as the record side
|
||||
key: '_id', // default value
|
||||
warnOnMissingId: true, // default value
|
||||
}),
|
||||
],
|
||||
});
|
||||
replayer.play(); // ERROR: [sequential-id-plugin]: expect to get an id with value "42", but got "666"`
|
||||
```
|
||||
|
||||
## Sponsors
|
||||
|
||||
[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site.
|
||||
|
||||
### Gold Sponsors 🥇
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/0/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/1/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/2/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/3/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/4/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/5/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/6/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Silver Sponsors 🥈
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/0/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/1/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/2/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/3/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/4/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/5/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/6/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Bronze Sponsors 🥉
|
||||
|
||||
<div dir="auto">
|
||||
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/0/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/1/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/2/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/3/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/4/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/5/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/6/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/7/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
<a href="https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/8/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
||||
|
||||
</div>
|
||||
|
||||
### Backers
|
||||
|
||||
<a href="https://opencollective.com/rrweb#sponsor" rel="nofollow"><img src="https://opencollective.com/rrweb/tiers/backers.svg?avatarHeight=36"></a>
|
||||
|
||||
## Core Team Members
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://github.com/Yuyz0112">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/13651389?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Yuyz0112</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/YunFeng0817">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/27533910?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Yun Feng</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/eoghanmurray">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/156780?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>eoghanmurray</b></sub>
|
||||
<br /><br />
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/Juice10">
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/4106?s=100"
|
||||
width="100px;"
|
||||
alt=""
|
||||
/>
|
||||
<br /><sub><b>Juice10</b></sub>
|
||||
<br /><sub>open for rrweb consulting</sub>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
## Who's using rrweb?
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="http://www.smartx.com/" target="_blank">
|
||||
<img width="195px" src="https://www.rrweb.io/logos/smartx.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
|
||||
<img width="195px" src="https://www.rrweb.io/logos/posthog.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://statcounter.com/session-replay/" target="_blank">
|
||||
<img width="195px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://recordonce.com/" target="_blank">
|
||||
<img width="195px" alt="Smart screen recording for SaaS" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://cux.io" target="_blank">
|
||||
<img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://remsupp.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Remote Access & Co-Browsing" width="195px" src="https://remsupp.com/images/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://highlight.io" target="_blank">
|
||||
<img style="padding: 8px" alt="The open source, fullstack Monitoring Platform." width="195px" src="https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://analyzee.io" target="_blank">
|
||||
<img style="padding: 8px" alt="Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions." width="195px" src="https://cdn.analyzee.io/assets/analyzee-logo.png">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://requestly.io" target="_blank">
|
||||
<img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://gleap.io" target="_blank">
|
||||
<img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://uxwizz.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://www.howdygo.com" target="_blank">
|
||||
<img style="padding: 8px" alt="Interactive product demos for small marketing teams" width="195px" src="https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg">
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "@rrweb/rrweb-plugin-sequential-id-replay",
|
||||
"version": "2.0.0-alpha.14",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "./dist/rrweb-plugin-sequential-id-replay.umd.cjs",
|
||||
"module": "./dist/rrweb-plugin-sequential-id-replay.js",
|
||||
"unpkg": "./dist/rrweb-plugin-sequential-id-replay.umd.cjs",
|
||||
"typings": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"default": "./dist/rrweb-plugin-sequential-id-replay.js"
|
||||
},
|
||||
"require": {
|
||||
"types": "./dist/index.d.cts",
|
||||
"default": "./dist/rrweb-plugin-sequential-id-replay.umd.cjs"
|
||||
}
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"package.json"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "vite build --watch",
|
||||
"build": "tsc -noEmit && vite build",
|
||||
"check-types": "tsc -noEmit",
|
||||
"prepublish": "npm run build"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/rrweb-io/rrweb.git"
|
||||
},
|
||||
"keywords": [
|
||||
"rrweb"
|
||||
],
|
||||
"author": "yanzhen@smartx.com",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/rrweb-io/rrweb/issues"
|
||||
},
|
||||
"homepage": "https://github.com/rrweb-io/rrweb#readme",
|
||||
"devDependencies": {
|
||||
"@rrweb/rrweb-plugin-sequential-id-record": "^2.0.0-alpha.14",
|
||||
"rrweb": "^2.0.0-alpha.14",
|
||||
"typescript": "^4.7.3",
|
||||
"vite": "^5.2.8",
|
||||
"vite-plugin-dts": "^3.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rrweb": "^2.0.0-alpha.14"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import type { SequentialIdOptions } from '@rrweb/rrweb-plugin-sequential-id-record';
|
||||
import type { ReplayPlugin } from 'rrweb';
|
||||
import type { eventWithTime } from '@rrweb/types';
|
||||
|
||||
type Options = SequentialIdOptions & {
|
||||
warnOnMissingId: boolean;
|
||||
};
|
||||
|
||||
const defaultOptions: Options = {
|
||||
key: '_sid',
|
||||
warnOnMissingId: true,
|
||||
};
|
||||
|
||||
export const getReplaySequentialIdPlugin: (
|
||||
options?: Partial<Options>,
|
||||
) => ReplayPlugin = (options) => {
|
||||
const { key, warnOnMissingId } = options
|
||||
? Object.assign({}, defaultOptions, options)
|
||||
: defaultOptions;
|
||||
let currentId = 1;
|
||||
|
||||
return {
|
||||
handler(event: eventWithTime) {
|
||||
if (key in event) {
|
||||
const id = (event as unknown as Record<string, number>)[key];
|
||||
if (id !== currentId) {
|
||||
console.error(
|
||||
`[sequential-id-plugin]: expect to get an id with value "${currentId}", but got "${id}"`,
|
||||
);
|
||||
} else {
|
||||
currentId++;
|
||||
}
|
||||
} else if (warnOnMissingId) {
|
||||
console.warn(
|
||||
`[sequential-id-plugin]: failed to get id in key: "${key}"`,
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "../../../tsconfig.base.json",
|
||||
"include": ["src"],
|
||||
"exclude": ["vite.config.ts", "dist", "tsconfig.json"],
|
||||
"compilerOptions": {
|
||||
"rootDir": ".",
|
||||
"tsBuildInfoFile": "./tsconfig.tsbuildinfo"
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"path": "../rrweb-plugin-sequential-id-record"
|
||||
},
|
||||
{
|
||||
"path": "../../rrweb"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import config from '../../../vite.config.default';
|
||||
|
||||
export default config('src/index.ts', 'rrwebPluginSequentialIdReplay');
|
||||
Reference in New Issue
Block a user