update console recipes

docs/recipes/console.md

@@ -1,10 +1,12 @@
 # console recorder and replayer
 
-Starting with a later version of v0.9.11, we add the ability to record and play back console output. 
+Starting from v1.0.0, we add the plugin to record and play back console output.
 This feature aims to provide developers with more information about the bug scene. There are some options for recording and replaying console output.
 
 ### Enable recording console
+
 You can enable the logger using default option like this:
+
 ```js
 rrweb.record({
   emit: emit(event) {
@@ -13,14 +15,15 @@ rrweb.record({
     defaultLog(event);
   },
   // to use default record option
-  recordLog: true,
+  plugins: [rrweb.getRecordConsolePlugin()],
 });
 ```
 
 **alert**: You shouldn't call console.log(warn, error .etc) in the emit function or you would get the error: `Uncaught RangeError: Maximum call stack size exceeded`.
-You should call console.log.\_\_rrweb_original__() instead.
+You should call console.log.\_\_rrweb_original\_\_() instead.
 
 You can also customize the behavior of logger like this:
+
 ```js
 rrweb.record({
   emit: emit(event) {
@@ -29,7 +32,7 @@ rrweb.record({
     defaultLog(event);
   },
   // customized options
-  recordLog: {
+  plugins: [rrweb.getRecordConsolePlugin({
     level: ["info", "log", "warn", "error"],
     lengthThreshold: 10000,
     stringifyOptions: {
@@ -37,9 +40,10 @@ rrweb.record({
       numOfKeysLimit: 100,
     },
     logger: window.console,
-  },
+  })],
 });
 ```
+
 All recordLog options are described below:
 | key | default | description |
 | ---------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -49,13 +53,16 @@ All recordLog options are described below:
 | logger | window.console | the console object we would record.You can set a console object from another execution environment where you would like to record. |
 
 ## replay console
+
 If recorded events include data of console log type, we will automatically play them.
 
 ```js
 const replayer = new rrweb.Replayer(events, {
-  logConfig: {
-    level: ["info", "log", "warn", "error"]
-  },
+  plugins: [
+    rrweb.getReplayConsolePlugin({
+      level: ['info', 'log', 'warn', 'error'],
+    }),
+  ],
 });
 replayer.play();
 ```

docs/recipes/console.zh_CN.md

@@ -1,9 +1,11 @@
 # console 录制和播放
 
-从v0.9.11的下一个版本开始，我们增加了录制和播放控制台输出的功能。这个功能旨在为开发者提供更多的bug信息。对这项功能我们还提供了一些设置选项。
+从 v1.0.0 版本开始，我们以插件的形式增加了录制和播放控制台输出的功能。这个功能旨在为开发者提供更多的 bug 信息。对这项功能我们还提供了一些设置选项。
 
 ### 开启录制 console 功能
+
 可以通过如下代码使用默认的配置选项
+
 ```js
 rrweb.record({
   emit: emit(event) {
@@ -12,14 +14,15 @@ rrweb.record({
     defaultLog(event);
   },
   // 使用默认的配置选项
-  recordLog: true,
+  plugins: [rrweb.getRecordConsolePlugin()],
 });
 ```
 
 **警告**: 在 emit 函数中你不应该直接调用 console.log 等函数，否则将会得到报错：`Uncaught RangeError: Maximum call stack size exceeded`。
-你应该调用console.log.\_\_rrweb_original__()来避免错误。
+你应该调用 console.log.\_\_rrweb_original\_\_()来避免错误。
 
 你也可以定制录制 console 的选项
+
 ```js
 rrweb.record({
   emit: emit(event) {
@@ -28,7 +31,7 @@ rrweb.record({
     defaultLog(event);
   },
   // 定制的选项
-  recordLog: {
+  plugins: [rrweb.getRecordConsolePlugin({
     level: ["info", "log", "warn", "error"],
     lengthThreshold: 10000,
     stringifyOptions: {
@@ -36,9 +39,10 @@ rrweb.record({
       numOfKeysLimit: 100,
     },
     logger: window.console,
-  },
+  })],
 });
 ```
+
 如下是配置选项的详细说明：
 | key | 默认值 | 功能 |
 | ---------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -48,19 +52,23 @@ rrweb.record({
 | logger | window.console | 要录制的 console 对象，你也可以传入一个想要录制的其他 js 执行环境的 console 对象。 |
 
 ## 播放 console 数据
+
 如果 replayer 传入的 events 中包含了 console 类型的数据，我们将自动播放这些数据。
 
 ```js
 const replayer = new rrweb.Replayer(events, {
-  logConfig: {
-    level: ["info", "log", "warn", "error"]
-  },
+  plugins: [
+    rrweb.getReplayConsolePlugin({
+      level: ['info', 'log', 'warn', 'error'],
+    }),
+  ],
 });
 replayer.play();
 ```
+
 如下是对 replay 选项的描述：
 
 | key          | 默认值                                                                 | 功能                                                                                                        |
-| ------------ | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| ------------ | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
 | level        | ['log','warn','error',...]                                             | 与 recordLog 设置选项的含义相同，你可以只播放想要的 console 函数类型                                        |
 | replayLogger | 一个基于 console 的对接口[ReplayLogger](../../src/types.ts#L417)的实现 | 你也可以通过传入一个`ReplayLogger`接口的自己的实现，用 html 模拟一个浏览器控制台，来播放录制的 console 数据 |