aab4c553cb
* docs: revamp installation docs for esm and umd Document recommended install paths across the main guides and package READMEs for rrweb, @rrweb/all, @rrweb/record, @rrweb/replay, and rrweb-player. Clarify three usage modes: bundler/npm, browser no-build with import maps and +esm, and legacy UMD fallback. * Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Apply formatting changes * Apply suggestion from @eoghanmurray Co-authored-by: Eoghan Murray <eoghan@getthere.ie> * Apply formatting changes * docs(all): streamline README usage section Move the guide link next to the import example and remove the duplicated Usage section to keep docs concise and easier to scan. * docs(readme): update gzip size badges in zh-cn readme * docs(plugins): update readme imports to scoped esm packages Replace `rrweb` default imports and `rrweb.Replayer` usage with `@rrweb/record` `record` and `@rrweb/replay` `Replayer` in plugin usage examples. Also update canvas WebRTC plugin imports to scoped `@rrweb/*` package names to keep docs aligned with current package structure. * docs: update docs to prefer scoped esm packages replace `rrweb` default import examples with `@rrweb/record` and `@rrweb/replay` across recipes and guides in en/zh-CN. clarify package selection for new integrations, add `@rrweb/all` convenience guidance, and refresh CDN/style import snippets for ESM and legacy UMD compatibility. --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
92 lines
4.7 KiB
Markdown
92 lines
4.7 KiB
Markdown
# console recorder and replayer
|
|
|
|
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
|
|
import { record } from '@rrweb/record';
|
|
import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
|
|
|
|
record({
|
|
emit: function emit(event) {
|
|
// you should use console.log in this way to avoid errors.
|
|
const defaultLog = console.log['__rrweb_original__']
|
|
? console.log['__rrweb_original__']
|
|
: console.log;
|
|
defaultLog(event);
|
|
},
|
|
// to use default record option
|
|
plugins: [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 can also customize the behavior of logger like this:
|
|
|
|
```js
|
|
import { record } from '@rrweb/record';
|
|
import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
|
|
|
|
record({
|
|
emit: function emit(event) {
|
|
// you should use console.log in this way to avoid errors.
|
|
const defaultLog = console.log['__rrweb_original__']
|
|
? console.log['__rrweb_original__']
|
|
: console.log;
|
|
defaultLog(event);
|
|
},
|
|
// customized options
|
|
plugins: [
|
|
getRecordConsolePlugin({
|
|
level: ['info', 'log', 'warn', 'error'],
|
|
lengthThreshold: 10000,
|
|
stringifyOptions: {
|
|
stringLengthLimit: 1000,
|
|
numOfKeysLimit: 100,
|
|
depthOfLimit: 1,
|
|
},
|
|
logger: window.console,
|
|
}),
|
|
],
|
|
});
|
|
```
|
|
|
|
All options are described below:
|
|
| key | default | description |
|
|
| ---------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| level | ['log','warn','error',...] | Default value contains names of all console functions. You can override it by setting console levels you need. |
|
|
| lengthThreshold | 1000 | Maximum number of records of console output. |
|
|
| stringifyOptions | { stringLengthLimit: undefined, numOfKeysLimit: 50, depthOfLimit: 4 } | If console output includes js objects, we need to stringify them. `stringLengthLimit` limits the string length of single value. `numOfKeysLimit` limits the number of keys in an object. `depthOfLimit` limits the depth of object. If an object contains more keys than this limit, we would only save object's name. You can reduce the size of events by setting these options. |
|
|
| 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
|
|
import { Replayer } from '@rrweb/replay';
|
|
import { getReplayConsolePlugin } from '@rrweb/rrweb-plugin-console-replay';
|
|
|
|
const replayer = new Replayer(events, {
|
|
plugins: [
|
|
getReplayConsolePlugin({
|
|
level: ['info', 'log', 'warn', 'error'],
|
|
}),
|
|
],
|
|
});
|
|
replayer.play();
|
|
```
|
|
|
|
Description of replay option is as follows:
|
|
|
|
| key | default | description |
|
|
| ------------ | --------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| level | ['log','warn','error',...] | You can set this option to play levels of log you need. |
|
|
| replayLogger | a console based object that implements the interface [ReplayLogger](../../packages/rrweb/src/plugins/console/replay/index.ts#L13) | You can also set a replay logger to replay the log messages in a simulated browser console by implementing the interface `ReplayLogger` |
|