rrweb
Version:
record and replay the web
197 lines (194 loc) • 8.41 kB
JavaScript
import { __assign, __read } from '../../node_modules/tslib/tslib.es6.js';
import { snapshot } from '../../node_modules/rrweb-snapshot/es/rrweb-snapshot.js';
import { EventType, IncrementalSource } from '../types.js';
import { polyfill, on, getWindowWidth, getWindowHeight, mirror } from '../utils.js';
import initObservers from './observer.js';
function wrapEvent(e) {
return __assign(__assign({}, e), { timestamp: Date.now() });
}
var wrappedEmit;
function record(options) {
if (options === void 0) { options = {}; }
var emit = options.emit, checkoutEveryNms = options.checkoutEveryNms, checkoutEveryNth = options.checkoutEveryNth, _a = options.blockClass, blockClass = _a === void 0 ? 'rr-block' : _a, _b = options.ignoreClass, ignoreClass = _b === void 0 ? 'rr-ignore' : _b, _c = options.inlineStylesheet, inlineStylesheet = _c === void 0 ? true : _c, maskAllInputs = options.maskAllInputs, _maskInputOptions = options.maskInputOptions, hooks = options.hooks, packFn = options.packFn, _d = options.sampling, sampling = _d === void 0 ? {} : _d, mousemoveWait = options.mousemoveWait;
if (!emit) {
throw new Error('emit function is required');
}
if (mousemoveWait !== undefined && sampling.mousemove === undefined) {
sampling.mousemove = mousemoveWait;
}
var maskInputOptions = maskAllInputs === true
? {
color: true,
date: true,
'datetime-local': true,
email: true,
month: true,
number: true,
range: true,
search: true,
tel: true,
text: true,
time: true,
url: true,
week: true,
textarea: true,
select: true,
}
: _maskInputOptions !== undefined
? _maskInputOptions
: {};
polyfill();
var lastFullSnapshotEvent;
var incrementalSnapshotCount = 0;
wrappedEmit = function (e, isCheckout) {
emit((packFn ? packFn(e) : e), isCheckout);
if (e.type === EventType.FullSnapshot) {
lastFullSnapshotEvent = e;
incrementalSnapshotCount = 0;
}
else if (e.type === EventType.IncrementalSnapshot) {
incrementalSnapshotCount++;
var exceedCount = checkoutEveryNth && incrementalSnapshotCount >= checkoutEveryNth;
var exceedTime = checkoutEveryNms &&
e.timestamp - lastFullSnapshotEvent.timestamp > checkoutEveryNms;
if (exceedCount || exceedTime) {
takeFullSnapshot(true);
}
}
};
function takeFullSnapshot(isCheckout) {
var _a, _b, _c, _d;
if (isCheckout === void 0) { isCheckout = false; }
wrappedEmit(wrapEvent({
type: EventType.Meta,
data: {
href: window.location.href,
width: getWindowWidth(),
height: getWindowHeight(),
},
}), isCheckout);
var _e = __read(snapshot(document, blockClass, inlineStylesheet, maskInputOptions), 2), node = _e[0], idNodeMap = _e[1];
if (!node) {
return console.warn('Failed to snapshot the document');
}
mirror.map = idNodeMap;
wrappedEmit(wrapEvent({
type: EventType.FullSnapshot,
data: {
node: node,
initialOffset: {
left: window.pageXOffset !== undefined
? window.pageXOffset
: (document === null || document === void 0 ? void 0 : document.documentElement.scrollLeft) || ((_b = (_a = document === null || document === void 0 ? void 0 : document.body) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.scrollLeft) || (document === null || document === void 0 ? void 0 : document.body.scrollLeft) ||
0,
top: window.pageYOffset !== undefined
? window.pageYOffset
: (document === null || document === void 0 ? void 0 : document.documentElement.scrollTop) || ((_d = (_c = document === null || document === void 0 ? void 0 : document.body) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.scrollTop) || (document === null || document === void 0 ? void 0 : document.body.scrollTop) ||
0,
},
},
}));
}
try {
var handlers_1 = [];
handlers_1.push(on('DOMContentLoaded', function () {
wrappedEmit(wrapEvent({
type: EventType.DomContentLoaded,
data: {},
}));
}));
var init_1 = function () {
takeFullSnapshot();
handlers_1.push(initObservers({
mutationCb: function (m) {
return wrappedEmit(wrapEvent({
type: EventType.IncrementalSnapshot,
data: __assign({ source: IncrementalSource.Mutation }, m),
}));
},
mousemoveCb: function (positions, source) {
return wrappedEmit(wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: source,
positions: positions,
},
}));
},
mouseInteractionCb: function (d) {
return wrappedEmit(wrapEvent({
type: EventType.IncrementalSnapshot,
data: __assign({ source: IncrementalSource.MouseInteraction }, d),
}));
},
scrollCb: function (p) {
return wrappedEmit(wrapEvent({
type: EventType.IncrementalSnapshot,
data: __assign({ source: IncrementalSource.Scroll }, p),
}));
},
viewportResizeCb: function (d) {
return wrappedEmit(wrapEvent({
type: EventType.IncrementalSnapshot,
data: __assign({ source: IncrementalSource.ViewportResize }, d),
}));
},
inputCb: function (v) {
return wrappedEmit(wrapEvent({
type: EventType.IncrementalSnapshot,
data: __assign({ source: IncrementalSource.Input }, v),
}));
},
mediaInteractionCb: function (p) {
return wrappedEmit(wrapEvent({
type: EventType.IncrementalSnapshot,
data: __assign({ source: IncrementalSource.MediaInteraction }, p),
}));
},
styleSheetRuleCb: function (r) {
return wrappedEmit(wrapEvent({
type: EventType.IncrementalSnapshot,
data: __assign({ source: IncrementalSource.StyleSheetRule }, r),
}));
},
blockClass: blockClass,
ignoreClass: ignoreClass,
maskInputOptions: maskInputOptions,
inlineStylesheet: inlineStylesheet,
sampling: sampling,
}, hooks));
};
if (document.readyState === 'interactive' ||
document.readyState === 'complete') {
init_1();
}
else {
handlers_1.push(on('load', function () {
wrappedEmit(wrapEvent({
type: EventType.Load,
data: {},
}));
init_1();
}, window));
}
return function () {
handlers_1.forEach(function (h) { return h(); });
};
}
catch (error) {
console.warn(error);
}
}
record.addCustomEvent = function (tag, payload) {
if (!wrappedEmit) {
throw new Error('please add custom event after start recording');
}
wrappedEmit(wrapEvent({
type: EventType.Custom,
data: {
tag: tag,
payload: payload,
},
}));
};
export default record;