[network-plugin] Feat: Capture network events

docs/recipes/network.md

@@ -0,0 +1,97 @@
+# network recorder and replayer
+
+Starting from v2.0.0, we add the plugin to record network output.
+This feature aims to provide developers with more information about the bug scene. There are some options for recording and replaying network output.
+
+### Enable recording network
+
+You can enable using default option like this:
+
+```js
+rrweb.record({
+  emit: function emit(event) {
+    events.push(event);
+  },
+  // to use default record option
+  plugins: [rrweb.getRecordNetworkPlugin()],
+});
+```
+
+You can also customize the behavior of logger like this:
+
+```js
+rrweb.record({
+  emit: function emit(event) {
+    fetch('https://api.my-server.com/events', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        events: [event],
+      }),
+    });
+  },
+  // customized record options
+  plugins: [
+    rrweb.getRecordConsolePlugin({
+      initiatorTypes: ['fetch', 'xmlhttprequest'],
+      // block recording event for request to upload events to server
+      ignoreRequestFn: (request) => {
+        if (request.url === 'https://api.my-server.com/events') {
+          return true;
+        }
+        return false;
+      },
+      recordHeaders: true,
+      recordBody: true,
+      recordInitialRequests: false,
+    }),
+  ],
+});
+```
+
+**alert**: If you are uploading events to a server, you should always use `ignoreRequestFn` to block recording events for these requests or else you will cause a nasty loop.
+
+All options are described below:
+| key | default | description |
+| ---------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| initiatorTypes | `['fetch','xmlhttprequest','img',...]` | Default value contains names of all [initiator types](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/initiatorType). You can override it by setting the types you need. |
+| ignoreRequestFn | `() => false` | Block recording events for specific requests |
+| recordHeaders | `false` | Record the request & response headers for `fetch` and `xmlhttprequest` requests |
+| recordBody | `false` | Record the request & response bodies for `fetch` and `xmlhttprequest` requests |
+| recordInitialRequests | `false` | Record an event for all requests prior to rrweb.record() being called |
+
+## replay network
+
+It is up to you to decide how to best replay your network events using the `onNetworkData` callback.
+
+```js
+const replayer = new rrweb.Replayer(events, {
+  plugins: [
+    rrweb.getReplayNetworkPlugin({
+      onNetworkData: ({ requests }) => {
+        for (const request of requests) {
+          const url = request.url;
+          const method = request.method;
+          const status = request.status;
+          console.log(`${method} ${url} ${status}`);
+        }
+      },
+    }),
+  ],
+});
+replayer.play();
+```
+
+Description of replay option is as follows:
+
+| key           | default     | description                                                                                |
+| ------------- | ----------- | ------------------------------------------------------------------------------------------ |
+| onNetworkData | `undefined` | You could use this interface to replay the network requests in a simulated browser console |
+
+## technical implementation
+
+This implementation records [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) by patching their object & methods. We record document navigation using [`PerformanceNavigationTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming) and we use [`PerformanceResourceTiming`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming) for recording everything else (script, img, link etc.) via [`PerformanceObserver`](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver) API.
+
+For more information please see [[network-plugin] Feat: Capture network events #1105](https://github.com/rrweb-io/rrweb/pull/1105) PR.

packages/rrweb/src/entries/all.ts

@@ -2,3 +2,5 @@ export * from '../index';
 export * from '../packer';
 export * from '../plugins/console/record';
 export * from '../plugins/console/replay';
+export * from '../plugins/network/record';
+export * from '../plugins/network/replay';

packages/rrweb/src/plugins/console/record/index.ts

@@ -1,22 +1,7 @@
 import type { listenerHandler, RecordPlugin, IWindow } from '@rrweb/types';
 import { patch } from '../../../utils';
-import { ErrorStackParser, StackFrame } from './error-stack-parser';
-import { stringify } from './stringify';
-
-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;
-  /**
-   * limit number of depth in an object
-   * if an object is too deep, toString process may cause browser OOM
-   */
-  depthOfLimit: number;
-};
+import { ErrorStackParser, StackFrame } from '../../utils/error-stack-parser';
+import { stringify, StringifyOptions } from '../../utils/stringify';
 
 type LogRecordOptions = {
   level?: LogLevel[];