xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enable rrweb to record and replay log messages in console (#424)

Browse Source 
* 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
This commit is contained in:
Lucky Feng
2020-11-29 18:12:03 +08:00
committed by GitHub
parent e3beeb445a
commit 4e7146e72b
13 changed files with 1289 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/record/index.ts
View File

@@ -14,6 +14,7 @@ import {
recordOptions,
IncrementalSource,
listenerHandler,
LogRecordOptions,
} from '../types';
function wrapEvent(e: event): eventWithTime {
@@ -46,6 +47,7 @@ function record<T = eventWithTime>(
mousemoveWait,
recordCanvas = false,
collectFonts = false,
recordLog = false,
} = options;
// runtime checks for user options
if (!emit) {
@@ -98,6 +100,37 @@ function record<T = eventWithTime>(
: _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<T = eventWithTime>(
},
}),
),
logCb: (p) =>
wrappedEmit(
wrapEvent({
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Log,
...p,
},
}),
),
blockClass,
blockSelector,
ignoreClass,
@@ -322,6 +365,7 @@ function record<T = eventWithTime>(
recordCanvas,
collectFonts,
slimDOMOptions,
logOptions,
},
hooks,
),

110
src/record/observer.ts
View File

@@ -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<string> = [];
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<string> {
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<mutationCallBack>) => {
if (hooks.mutation) {
@@ -572,6 +672,12 @@ function mergeHooks(o: observerParam, hooks: hooksParam) {
}
fontCb(...p);
};
o.logCb = (...p: Arguments<logCallback>) => {
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();
};
}

126
src/record/stringify.ts Normal file
View File

@@ -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;
}
}

85
src/replay/index.ts
View File

@@ -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,

1
src/replay/machine.ts
View File

@@ -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) {

100
src/types.ts
View File

@@ -52,6 +52,11 @@ export type metaEvent = {
};
};
export type logEvent = {
type: EventType.IncrementalSnapshot;
data: incrementalData;
};
export type customEvent<T = unknown> = {
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<T> = {
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<string>) => 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<Record<LogLevel, (data: logData) => void>>;
export type LogParam = {
level: LogLevel;
trace: Array<string>;
payload: Array<string>;
};
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<LogLevel> | 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<LogLevel> | undefined;
lengthThreshold?: number;
stringifyOptions?: StringifyOptions;
logger?: Logger;
};