From 9d2db86d5a1fc300e77c8c018396e2176cba5878 Mon Sep 17 00:00:00 2001 From: Lucky Feng Date: Wed, 1 Apr 2026 12:00:00 +0800 Subject: [PATCH] feat: enable rrweb to record and replay log messages in console (#424) * wip: working on rrweb logger * wip: can record and replay some simple log * wip: can record and replay log's stack * wip: try to serialize object * wip: record and replay console logger hijack all of the console functions. add listener to thrown errors * wip: record and replay console logger add limit to the max number of log records * feat: enable rrweb to record and replay log messages in console this is the implementation of new feature request(issue #234) here are a few points of description. 1. users need to set recordLog option in rrweb.record's parameter to record log messages. The log recorder is off by default. 2. support recording and replaying all kinds of console functions. But the reliability of them should be tested more 3. the stringify function in stringify.ts needs improvement. e.g. robustness, handler for cyclical structures and better support for more kinds of object 4. we can replay the log messages in a simulated html console like LogRocket by implementing the interface "ReplayLogger" in the future * improve: the stringify function 1. handle cyclical structures 2. add stringify option to limit the length of result 3. handle function type * refactor: simplify the type definition of ReplayLogger --- src/record/index.ts | 44 ++ src/record/observer.ts | 110 +++ src/record/stringify.ts | 126 ++++ src/replay/index.ts | 85 +++ src/replay/machine.ts | 1 + src/types.ts | 100 ++- test/__snapshots__/integration.test.ts.snap | 714 ++++++++++++++++++++ test/html/log.html | 10 + test/integration.test.ts | 39 +- test/record.test.ts | 2 +- typings/record/stringify.d.ts | 2 + typings/replay/index.d.ts | 2 + typings/types.d.ts | 62 +- 13 files changed, 1289 insertions(+), 8 deletions(-) create mode 100644 src/record/stringify.ts create mode 100644 test/html/log.html create mode 100644 typings/record/stringify.d.ts diff --git a/src/record/index.ts b/src/record/index.ts index c6f56673..fdaad963 100644 --- a/src/record/index.ts +++ b/src/record/index.ts @@ -14,6 +14,7 @@ import { recordOptions, IncrementalSource, listenerHandler, + LogRecordOptions, } from '../types'; function wrapEvent(e: event): eventWithTime { @@ -46,6 +47,7 @@ function record( mousemoveWait, recordCanvas = false, collectFonts = false, + recordLog = false, } = options; // runtime checks for user options if (!emit) { @@ -98,6 +100,37 @@ function record( : _slimDOMOptions ? _slimDOMOptions : {}; + 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, + }; + + const logOptions: LogRecordOptions = recordLog + ? recordLog === true + ? defaultLogOptions + : Object.assign({}, defaultLogOptions, recordLog) + : {}; polyfill(); @@ -312,6 +345,16 @@ function record( }, }), ), + logCb: (p) => + wrappedEmit( + wrapEvent({ + type: EventType.IncrementalSnapshot, + data: { + source: IncrementalSource.Log, + ...p, + }, + }), + ), blockClass, blockSelector, ignoreClass, @@ -322,6 +365,7 @@ function record( recordCanvas, collectFonts, slimDOMOptions, + logOptions, }, hooks, ), diff --git a/src/record/observer.ts b/src/record/observer.ts index 96243616..de471ba7 100644 --- a/src/record/observer.ts +++ b/src/record/observer.ts @@ -36,8 +36,13 @@ import { fontCallback, fontParam, MaskInputFn, + logCallback, + LogRecordOptions, + Logger, + LogLevel, } from '../types'; import MutationBuffer from './mutation'; +import { stringify } from './stringify'; export const mutationBuffer = new MutationBuffer(); @@ -499,6 +504,100 @@ function initFontObserver(cb: fontCallback): listenerHandler { }; } +function initLogObserver( + cb: logCallback, + logOptions: LogRecordOptions, +): listenerHandler { + const logger = logOptions.logger; + if (!logger) return () => {}; + let logCount = 0; + const cancelHandlers: any[] = []; + // add listener to thrown errors + if (logOptions.level!.includes('error')) { + if (window) { + const originalOnError = window.onerror; + window.onerror = (...args: any[]) => { + originalOnError && originalOnError.apply(this, args); + let stack: Array = []; + if (args[args.length - 1] instanceof Error) + // 0(the second parameter) tells parseStack that every stack in Error is useful + stack = parseStack(args[args.length - 1].stack, 0); + const payload = [stringify(args[0], logOptions.stringifyOptions)]; + cb({ + level: 'error', + trace: stack, + payload: payload, + }); + }; + cancelHandlers.push(() => { + window.onerror = originalOnError; + }); + } + } + 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 patch(logger, level, (original) => { + return (...args: any[]) => { + original.apply(this, args); + try { + const stack = parseStack(new Error().stack); + const payload = args.map((s) => + stringify(s, logOptions.stringifyOptions), + ); + logCount++; + if (logCount < logOptions.lengthThreshold!) + cb({ + level: level, + trace: stack, + payload: 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); + } + }; + }); + } + /** + * parse single stack message to an stack array. + * @param stack the stack message to be parsed + * @param omitDepth omit specific depth of useless stack. omit hijacked log function by default + */ + function parseStack( + stack: string | undefined, + omitDepth: number = 1, + ): Array { + let stacks: string[] = []; + if (stack) { + stacks = stack + .split('at') + .splice(1 + omitDepth) + .map((s) => s.trim()); + } + return stacks; + } +} + function mergeHooks(o: observerParam, hooks: hooksParam) { const { mutationCb, @@ -511,6 +610,7 @@ function mergeHooks(o: observerParam, hooks: hooksParam) { styleSheetRuleCb, canvasMutationCb, fontCb, + logCb, } = o; o.mutationCb = (...p: Arguments) => { if (hooks.mutation) { @@ -572,6 +672,12 @@ function mergeHooks(o: observerParam, hooks: hooksParam) { } fontCb(...p); }; + o.logCb = (...p: Arguments) => { + if (hooks.log) { + hooks.log(...p); + } + logCb(...p); + }; } export function initObservers( @@ -617,6 +723,9 @@ export function initObservers( ? initCanvasMutationObserver(o.canvasMutationCb, o.blockClass) : () => {}; const fontObserver = o.collectFonts ? initFontObserver(o.fontCb) : () => {}; + const logObserver = o.logOptions + ? initLogObserver(o.logCb, o.logOptions) + : () => {}; return () => { mutationObserver.disconnect(); @@ -629,5 +738,6 @@ export function initObservers( styleSheetObserver(); canvasMutationObserver(); fontObserver(); + logObserver(); }; } diff --git a/src/record/stringify.ts b/src/record/stringify.ts new file mode 100644 index 00000000..0547f2f3 --- /dev/null +++ b/src/record/stringify.ts @@ -0,0 +1,126 @@ +/** + * this file is used to serialize log message to string + * + */ + +import { StringifyOptions } from '../types'; + +/** + * 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 ''; + } + + var path = ''; + while (node.parentElement) { + var name = node.localName; + if (!name) break; + name = name.toLowerCase(); + var parent = node.parentElement; + + var domSiblings = []; + + if (parent.children && parent.children.length > 0) { + for (var i = 0; i < parent.children.length; i++) { + var 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; +} + +/** + * stringify any js object + * @param obj the object to stringify + */ +export function stringify( + obj: any, + stringifyOptions?: StringifyOptions, +): string { + const options: StringifyOptions = { + numOfKeysLimit: 50, + }; + Object.assign(options, stringifyOptions); + let stack: any[] = [], + keys: any[] = []; + return JSON.stringify(obj, function (key, value) { + /** + * forked from https://github.com/moll/json-stringify-safe/blob/master/stringify.js + * to deCycle the object + */ + if (stack.length > 0) { + var 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 || value === undefined) return value; + if (shouldToString(value)) { + return toString(value); + } + if (value instanceof Event) { + const eventResult: any = {}; + for (const key in value) { + const eventValue = (value as any)[key]; + if (Array.isArray(eventValue)) + eventResult[key] = pathToSelector( + eventValue.length ? eventValue[0] : null, + ); + else eventResult[key] = eventValue; + } + return eventResult; + } else if (value instanceof Node) { + if (value instanceof HTMLElement) return value ? value.outerHTML : ''; + return value.nodeName; + } + return value; + }); + + /** + * whether we should call toString function of this object + */ + function shouldToString(obj: object): boolean { + if ( + typeof obj === 'object' && + Object.keys(obj).length > options.numOfKeysLimit + ) + return true; + if (typeof obj === 'function') 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; + } +} diff --git a/src/replay/index.ts b/src/replay/index.ts index 7888f768..6f2f7a60 100644 --- a/src/replay/index.ts +++ b/src/replay/index.ts @@ -27,6 +27,9 @@ import { inputData, canvasMutationData, ElementState, + LogReplayConfig, + logData, + ReplayLogger, } from '../types'; import { mirror, @@ -54,6 +57,31 @@ const defaultMouseTailConfig = { strokeStyle: 'red', } as const; +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, +}; + export class Replayer { public wrapper: HTMLDivElement; public iframe: HTMLIFrameElement; @@ -104,8 +132,11 @@ export class Replayer { UNSAFE_replayCanvas: false, pauseAnimation: true, mouseTail: defaultMouseTailConfig, + logConfig: defaultLogConfig, }; this.config = Object.assign({}, defaultConfig, config); + if (!this.config.logConfig.replayLogger) + this.config.logConfig.replayLogger = this.getConsoleLogger(); this.handleResize = this.handleResize.bind(this); this.getCastFn = this.getCastFn.bind(this); @@ -904,6 +935,18 @@ export class Replayer { } break; } + case IncrementalSource.Log: { + try { + const logData = e.data as logData; + const replayLogger = this.config.logConfig.replayLogger!; + if (typeof replayLogger[logData.level] === 'function') + replayLogger[logData.level]!(logData); + } catch (error) { + if (this.config.showWarning) { + console.warn(error); + } + } + } default: } } @@ -1159,6 +1202,48 @@ export class Replayer { } } + /** + * 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; + } + + /** + * generate a console log replayer which implement the interface ReplayLogger + */ + private getConsoleLogger(): ReplayLogger { + const rrwebOriginal = '__rrweb_original__'; + const replayLogger: ReplayLogger = {}; + for (const level of this.config.logConfig.level!) + if (level === 'trace') + replayLogger[level] = (data: logData) => { + const logger = (console.log as any)[rrwebOriginal] + ? (console.log as any)[rrwebOriginal] + : console.log; + logger( + ...data.payload.map((s) => JSON.parse(s)), + this.formatMessage(data), + ); + }; + else + replayLogger[level] = (data: logData) => { + const logger = (console[level] as any)[rrwebOriginal] + ? (console[level] as any)[rrwebOriginal] + : console[level]; + logger( + ...data.payload.map((s) => JSON.parse(s)), + this.formatMessage(data), + ); + }; + return replayLogger; + } + private legacy_resolveMissingNode( map: missingNodeMap, parent: Node, diff --git a/src/replay/machine.ts b/src/replay/machine.ts index 8df67474..fc53b023 100644 --- a/src/replay/machine.ts +++ b/src/replay/machine.ts @@ -165,6 +165,7 @@ export function createPlayerService( }; }), play(ctx) { + console.warn('play'); const { timer, events, baselineTime, lastPlayedEvent } = ctx; timer.clear(); for (const event of events) { diff --git a/src/types.ts b/src/types.ts index 0bacc34d..02f5ce1c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -52,6 +52,11 @@ export type metaEvent = { }; }; +export type logEvent = { + type: EventType.IncrementalSnapshot; + data: incrementalData; +}; + export type customEvent = { type: EventType.Custom; data: { @@ -74,6 +79,7 @@ export enum IncrementalSource { StyleSheetRule, CanvasMutation, Font, + Log, } export type mutationData = { @@ -118,6 +124,10 @@ export type fontData = { source: IncrementalSource.Font; } & fontParam; +export type logData = { + source: IncrementalSource.Log; +} & LogParam; + export type incrementalData = | mutationData | mousemoveData @@ -128,7 +138,8 @@ export type incrementalData = | mediaInteractionData | styleSheetRuleData | canvasMutationData - | fontData; + | fontData + | logData; export type event = | domContentLoadedEvent @@ -136,6 +147,7 @@ export type event = | fullSnapshotEvent | incrementalSnapshotEvent | metaEvent + | logEvent | customEvent; export type eventWithTime = event & { @@ -186,6 +198,7 @@ export type recordOptions = { collectFonts?: boolean; // departed, please use sampling options mousemoveWait?: number; + recordLog?: boolean | LogRecordOptions; }; export type observerParam = { @@ -205,6 +218,8 @@ export type observerParam = { styleSheetRuleCb: styleSheetRuleCallback; canvasMutationCb: canvasMutationCallback; fontCb: fontCallback; + logCb: logCallback; + logOptions: LogRecordOptions; sampling: SamplingStrategy; recordCanvas: boolean; collectFonts: boolean; @@ -222,6 +237,7 @@ export type hooksParam = { styleSheetRule?: styleSheetRuleCallback; canvasMutation?: canvasMutationCallback; font?: fontCallback; + log?: logCallback; }; // https://dom.spec.whatwg.org/#interface-mutationrecord @@ -353,8 +369,67 @@ export type fontParam = { descriptors?: FontFaceDescriptors; }; +export type LogLevel = + | 'assert' + | 'clear' + | 'count' + | 'countReset' + | 'debug' + | 'dir' + | 'dirxml' + | 'error' + | 'group' + | 'groupCollapsed' + | 'groupEnd' + | 'info' + | 'log' + | 'table' + | 'time' + | 'timeEnd' + | 'timeLog' + | 'trace' + | 'warn'; + +/* fork from interface Console */ +// all kinds of console functions +export type Logger = { + assert?: (value: any, message?: string, ...optionalParams: any[]) => void; + clear?: () => void; + count?: (label?: string) => void; + countReset?: (label?: string) => void; + debug?: (message?: any, ...optionalParams: any[]) => void; + dir?: (obj: any, options?: NodeJS.InspectOptions) => void; + dirxml?: (...data: any[]) => void; + error?: (message?: any, ...optionalParams: any[]) => void; + group?: (...label: any[]) => void; + groupCollapsed?: (label?: any[]) => void; + groupEnd?: () => void; + info?: (message?: any, ...optionalParams: any[]) => void; + log?: (message?: any, ...optionalParams: any[]) => void; + table?: (tabularData: any, properties?: ReadonlyArray) => void; + time?: (label?: string) => void; + timeEnd?: (label?: string) => void; + timeLog?: (label?: string, ...data: any[]) => void; + trace?: (message?: any, ...optionalParams: any[]) => void; + warn?: (message?: any, ...optionalParams: any[]) => void; +}; + +/** + * define an interface to replay log records + * (data: logData) => void> function to display the log data + */ +export type ReplayLogger = Partial void>>; + +export type LogParam = { + level: LogLevel; + trace: Array; + payload: Array; +}; + export type fontCallback = (p: fontParam) => void; +export type logCallback = (p: LogParam) => void; + export type viewportResizeDimention = { width: number; height: number; @@ -419,6 +494,12 @@ export type playerConfig = { strokeStyle?: string; }; unpackFn?: UnpackFn; + logConfig: LogReplayConfig; +}; + +export type LogReplayConfig = { + level?: Array | undefined; + replayLogger: ReplayLogger | undefined; }; export type playerMetaData = { @@ -477,3 +558,20 @@ export type ElementState = { // [scrollLeft,scrollTop] scroll?: [number, number]; }; + +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; +}; + +export type LogRecordOptions = { + level?: Array | undefined; + lengthThreshold?: number; + stringifyOptions?: StringifyOptions; + logger?: Logger; +}; diff --git a/test/__snapshots__/integration.test.ts.snap b/test/__snapshots__/integration.test.ts.snap index f88e31bd..19f34fb6 100644 --- a/test/__snapshots__/integration.test.ts.snap +++ b/test/__snapshots__/integration.test.ts.snap @@ -2002,6 +2002,720 @@ exports[`ignore 1`] = ` ]" `; +exports[`log`] = ` +"[ + { + \\"type\\": 0, + \\"data\\": {} + }, + { + \\"type\\": 1, + \\"data\\": {} + }, + { + \\"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\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"id\\": 6 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 9 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"http-equiv\\": \\"X-UA-Compatible\\", + \\"content\\": \\"ie=edge\\" + }, + \\"childNodes\\": [], + \\"id\\": 10 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 11 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"Log record\\", + \\"id\\": 13 + } + ], + \\"id\\": 12 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 14 + } + ], + \\"id\\": 4 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 15 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 17 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 19 + } + ], + \\"id\\": 18 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", + \\"id\\": 20 + } + ], + \\"id\\": 16 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"assert\\", + \\"payload\\": [ + \\"true\\", + \\"\\"assert\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"count\\", + \\"payload\\": [ + \\"\\"count\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"countReset\\", + \\"payload\\": [ + \\"\\"count\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"debug\\", + \\"payload\\": [ + \\"\\"debug\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"dir\\", + \\"payload\\": [ + \\"\\"dir\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"dirxml\\", + \\"payload\\": [ + \\"\\"dirxml\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"group\\", + \\"payload\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"groupCollapsed\\", + \\"payload\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"info\\", + \\"payload\\": [ + \\"\\"info\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"log\\", + \\"payload\\": [ + \\"\\"log\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"table\\", + \\"payload\\": [ + \\"\\"table\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"time\\", + \\"payload\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"timeEnd\\", + \\"payload\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"timeLog\\", + \\"payload\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"trace\\", + \\"payload\\": [ + \\"\\"trace\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"warn\\", + \\"payload\\": [ + \\"\\"warn\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"clear\\", + \\"payload\\": [] + } + } +]" +`; + +exports[`log 1`] = ` +"[ + { + \\"type\\": 0, + \\"data\\": {} + }, + { + \\"type\\": 1, + \\"data\\": {} + }, + { + \\"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\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"id\\": 6 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 9 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"http-equiv\\": \\"X-UA-Compatible\\", + \\"content\\": \\"ie=edge\\" + }, + \\"childNodes\\": [], + \\"id\\": 10 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 11 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"Log record\\", + \\"id\\": 13 + } + ], + \\"id\\": 12 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 14 + } + ], + \\"id\\": 4 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 15 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 17 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 19 + } + ], + \\"id\\": 18 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", + \\"id\\": 20 + } + ], + \\"id\\": 16 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"assert\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:2:37\\" + ], + \\"payload\\": [ + \\"true\\", + \\"\\\\\\"assert\\\\\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"count\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:3:37\\" + ], + \\"payload\\": [ + \\"\\\\\\"count\\\\\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"countReset\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:4:37\\" + ], + \\"payload\\": [ + \\"\\\\\\"count\\\\\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"debug\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:5:37\\" + ], + \\"payload\\": [ + \\"\\\\\\"debug\\\\\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"dir\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:6:37\\" + ], + \\"payload\\": [ + \\"\\\\\\"dir\\\\\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"dirxml\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:7:37\\" + ], + \\"payload\\": [ + \\"\\\\\\"dirxml\\\\\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"group\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:8:37\\" + ], + \\"payload\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"groupCollapsed\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:9:37\\" + ], + \\"payload\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"info\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:10:37\\" + ], + \\"payload\\": [ + \\"\\\\\\"info\\\\\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"log\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:11:37\\" + ], + \\"payload\\": [ + \\"\\\\\\"log\\\\\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"table\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:12:37\\" + ], + \\"payload\\": [ + \\"\\\\\\"table\\\\\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"time\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:13:37\\" + ], + \\"payload\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"timeEnd\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:14:37\\" + ], + \\"payload\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"timeLog\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:15:37\\" + ], + \\"payload\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"trace\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:16:37\\" + ], + \\"payload\\": [ + \\"\\\\\\"trace\\\\\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"warn\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:17:37\\" + ], + \\"payload\\": [ + \\"\\\\\\"warn\\\\\\"\\" + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 11, + \\"level\\": \\"clear\\", + \\"trace\\": [ + \\"__puppeteer_evalu\\", + \\"ion_script__:18:37\\" + ], + \\"payload\\": [] + } + } +]" +`; + exports[`mask 1`] = ` "[ { diff --git a/test/html/log.html b/test/html/log.html new file mode 100644 index 00000000..ba60e26e --- /dev/null +++ b/test/html/log.html @@ -0,0 +1,10 @@ + + + + + + + Log record + + + diff --git a/test/integration.test.ts b/test/integration.test.ts index 8d1f2d32..767dc413 100644 --- a/test/integration.test.ts +++ b/test/integration.test.ts @@ -29,13 +29,13 @@ describe('record integration tests', function (this: ISuite) { window.Date.now = () => new Date(Date.UTC(2018, 10, 15, 8)).valueOf(); window.snapshots = []; rrweb.record({ - emit: event => { - console.log(event); + emit: event => { window.snapshots.push(event); }, maskAllInputs: ${options.maskAllInputs}, maskInputOptions: ${JSON.stringify(options.maskAllInputs)}, - recordCanvas: ${options.recordCanvas} + recordCanvas: ${options.recordCanvas}, + recordLog: ${options.recordLog}, }); @@ -334,4 +334,37 @@ describe('record integration tests', function (this: ISuite) { expect(text).to.equal('4\n3\n2\n1\n5'); }); + + it('can record log mutation', async () => { + const page: puppeteer.Page = await this.browser.newPage(); + await page.goto('about:blank'); + await page.setContent( + getHtml.call(this, 'log.html', { + recordLog: true, + }), + ); + + 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(); + }); + + const snapshots = await page.evaluate('window.snapshots'); + assertSnapshot(snapshots, __filename, 'log'); + }); }); diff --git a/test/record.test.ts b/test/record.test.ts index 417c3a27..61121b2e 100644 --- a/test/record.test.ts +++ b/test/record.test.ts @@ -179,7 +179,7 @@ describe('record', function (this: ISuite) { document.body.appendChild(span); }, 10); }); - await this.page.waitFor(50); + await this.page.waitFor(100); assertSnapshot(this.events, __filename, 'async-checkout'); }); diff --git a/typings/record/stringify.d.ts b/typings/record/stringify.d.ts new file mode 100644 index 00000000..d861956b --- /dev/null +++ b/typings/record/stringify.d.ts @@ -0,0 +1,2 @@ +import { StringifyOptions } from '../types'; +export declare function stringify(obj: any, stringifyOptions?: StringifyOptions): string; diff --git a/typings/replay/index.d.ts b/typings/replay/index.d.ts index fa7093c0..f3720ce2 100644 --- a/typings/replay/index.d.ts +++ b/typings/replay/index.d.ts @@ -42,6 +42,8 @@ export declare class Replayer { private applyMutation; private applyScroll; private applyInput; + private formatMessage; + private getConsoleLogger; private legacy_resolveMissingNode; private moveAndHover; private drawMouseTail; diff --git a/typings/types.d.ts b/typings/types.d.ts index 2d8d59bc..5e8542ad 100644 --- a/typings/types.d.ts +++ b/typings/types.d.ts @@ -39,6 +39,10 @@ export declare type metaEvent = { height: number; }; }; +export declare type logEvent = { + type: EventType.IncrementalSnapshot; + data: incrementalData; +}; export declare type customEvent = { type: EventType.Custom; data: { @@ -58,7 +62,8 @@ export declare enum IncrementalSource { MediaInteraction = 7, StyleSheetRule = 8, CanvasMutation = 9, - Font = 10 + Font = 10, + Log = 11 } export declare type mutationData = { source: IncrementalSource.Mutation; @@ -92,8 +97,11 @@ export declare type canvasMutationData = { export declare type fontData = { source: IncrementalSource.Font; } & fontParam; -export declare type incrementalData = mutationData | mousemoveData | mouseInteractionData | scrollData | viewportResizeData | inputData | mediaInteractionData | styleSheetRuleData | canvasMutationData | fontData; -export declare type event = domContentLoadedEvent | loadedEvent | fullSnapshotEvent | incrementalSnapshotEvent | metaEvent | customEvent; +export declare type logData = { + source: IncrementalSource.Log; +} & LogParam; +export declare type incrementalData = mutationData | mousemoveData | mouseInteractionData | scrollData | viewportResizeData | inputData | mediaInteractionData | styleSheetRuleData | canvasMutationData | fontData | logData; +export declare type event = domContentLoadedEvent | loadedEvent | fullSnapshotEvent | incrementalSnapshotEvent | metaEvent | logEvent | customEvent; export declare type eventWithTime = event & { timestamp: number; delay?: number; @@ -123,6 +131,7 @@ export declare type recordOptions = { recordCanvas?: boolean; collectFonts?: boolean; mousemoveWait?: number; + recordLog?: boolean | LogRecordOptions; }; export declare type observerParam = { mutationCb: mutationCallBack; @@ -141,6 +150,8 @@ export declare type observerParam = { styleSheetRuleCb: styleSheetRuleCallback; canvasMutationCb: canvasMutationCallback; fontCb: fontCallback; + logCb: logCallback; + logOptions: LogRecordOptions; sampling: SamplingStrategy; recordCanvas: boolean; collectFonts: boolean; @@ -157,6 +168,7 @@ export declare type hooksParam = { styleSheetRule?: styleSheetRuleCallback; canvasMutation?: canvasMutationCallback; font?: fontCallback; + log?: logCallback; }; export declare type mutationRecord = { type: string; @@ -261,7 +273,36 @@ export declare type fontParam = { buffer: boolean; descriptors?: FontFaceDescriptors; }; +export declare type LogLevel = 'assert' | 'clear' | 'count' | 'countReset' | 'debug' | 'dir' | 'dirxml' | 'error' | 'group' | 'groupCollapsed' | 'groupEnd' | 'info' | 'log' | 'table' | 'time' | 'timeEnd' | 'timeLog' | 'trace' | 'warn'; +export declare type Logger = { + assert?: (value: any, message?: string, ...optionalParams: any[]) => void; + clear?: () => void; + count?: (label?: string) => void; + countReset?: (label?: string) => void; + debug?: (message?: any, ...optionalParams: any[]) => void; + dir?: (obj: any, options?: NodeJS.InspectOptions) => void; + dirxml?: (...data: any[]) => void; + error?: (message?: any, ...optionalParams: any[]) => void; + group?: (...label: any[]) => void; + groupCollapsed?: (label?: any[]) => void; + groupEnd?: () => void; + info?: (message?: any, ...optionalParams: any[]) => void; + log?: (message?: any, ...optionalParams: any[]) => void; + table?: (tabularData: any, properties?: ReadonlyArray) => void; + time?: (label?: string) => void; + timeEnd?: (label?: string) => void; + timeLog?: (label?: string, ...data: any[]) => void; + trace?: (message?: any, ...optionalParams: any[]) => void; + warn?: (message?: any, ...optionalParams: any[]) => void; +}; +export declare type ReplayLogger = Partial void>>; +export declare type LogParam = { + level: LogLevel; + trace: Array; + payload: Array; +}; export declare type fontCallback = (p: fontParam) => void; +export declare type logCallback = (p: LogParam) => void; export declare type viewportResizeDimention = { width: number; height: number; @@ -316,6 +357,11 @@ export declare type playerConfig = { strokeStyle?: string; }; unpackFn?: UnpackFn; + logConfig: LogReplayConfig; +}; +export declare type LogReplayConfig = { + level?: Array | undefined; + replayLogger: ReplayLogger | undefined; }; export declare type playerMetaData = { startTime: number; @@ -361,4 +407,14 @@ export declare type MaskInputFn = (text: string) => string; export declare type ElementState = { scroll?: [number, number]; }; +export declare type StringifyOptions = { + stringLengthLimit?: number; + numOfKeysLimit: number; +}; +export declare type LogRecordOptions = { + level?: Array | undefined; + lengthThreshold?: number; + stringifyOptions?: StringifyOptions; + logger?: Logger; +}; export {};