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/types.ts

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