chore: fixes pr comments

Author: crutch12

docs/recipes/network.md

@@ -42,12 +42,12 @@ rrweb.record({
   plugins: [
     getRecordNetworkPlugin({
       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;
+      // transform recording event for request to block or mask
+      transformRequestFn: (request)  => {
+        if (request.url.contains("rrweb-collector-api.com")) return; // skip request
+        delete request.requestHeaders["Authorization"]; // remove sensetive data
+        request.responseBody = maskTextFn(request.responseBody);
+        return request;
       },
       recordHeaders: true,
       recordBody: true,
@@ -57,17 +57,17 @@ rrweb.record({
 });
 ```
 
-**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.
+**alert**: If you are uploading events to a server, you should always use `transformRequestFn` to transform/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 |
+| 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. |
+| transformRequestFn | `(request) => request` | Transform recording event for request to block (skip) or mask/transofrm request (e.g. to hide sensetive data)                                                                                       |
+| 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
 

packages/plugins/rrweb-plugin-network-record/src/index.ts

@@ -38,7 +38,7 @@ export type InitiatorType =
 
 type NetworkRecordOptions = {
   initiatorTypes?: InitiatorType[];
-  ignoreRequestFn?: (data: NetworkRequest) => boolean;
+  maskRequestFn?: (request: NetworkRequest) => NetworkRequest | undefined;
   recordHeaders?: boolean | { request: boolean; response: boolean };
   recordBody?:
     | boolean
@@ -71,7 +71,7 @@ const defaultNetworkOptions: NetworkRecordOptions = {
     'video',
     'xmlhttprequest',
   ],
-  ignoreRequestFn: () => false,
+  maskRequestFn: (request) => request,
   recordHeaders: false,
   recordBody: false,
   recordInitialRequests: false,
@@ -89,17 +89,18 @@ type Body =
   | ReadableStream<Uint8Array>
   | null;
 
-type NetworkRequest = {
-  url: string;
+type NetworkRequest = Omit<PerformanceEntry, 'toJSON'> & {
   method?: string;
-  initiatorType: InitiatorType;
+  initiatorType?: InitiatorType;
   status?: number;
-  startTime: number;
-  endTime: number;
+  startTime?: number;
+  endTime?: number;
   requestHeaders?: Headers;
   requestBody?: Body;
   responseHeaders?: Headers;
   responseBody?: Body;
+  // was this captured before fetch/xhr could have been wrapped
+  isInitial?: boolean;
 };
 
 export type NetworkData = {
@@ -141,8 +142,10 @@ function initPerformanceObserver(
       );
     cb({
       requests: initialPerformanceEntries.map((entry) => ({
-        url: entry.name,
         initiatorType: entry.initiatorType as InitiatorType,
+        duration: entry.duration,
+        entryType: entry.entryType,
+        name: entry.name,
         status: 'responseStatus' in entry ? entry.responseStatus : undefined,
         startTime: Math.round(entry.startTime),
         endTime: Math.round(entry.responseEnd),
@@ -165,11 +168,13 @@ function initPerformanceObserver(
       );
     cb({
       requests: performanceEntries.map((entry) => ({
-        url: entry.name,
         initiatorType: entry.initiatorType as InitiatorType,
         status: 'responseStatus' in entry ? entry.responseStatus : undefined,
         startTime: Math.round(entry.startTime),
         endTime: Math.round(entry.responseEnd),
+        duration: entry.duration,
+        entryType: entry.entryType,
+        name: entry.name,
       })),
     });
   });
@@ -216,9 +221,9 @@ async function getRequestPerformanceEntry(
   after?: number,
   before?: number,
   attempt = 0,
-): Promise<PerformanceResourceTiming> {
+): Promise<PerformanceResourceTiming | null> {
   if (attempt > 10) {
-    throw new Error('Cannot find performance entry');
+    return null;
   }
   const urlPerformanceEntries = win.performance.getEntriesByName(
     url,
@@ -340,10 +345,13 @@ function initXhrObserver(
             before,
           )
             .then((entry) => {
+              if (!entry) return;
               const request: NetworkRequest = {
-                url: entry.name,
                 method: req.method,
                 initiatorType: entry.initiatorType as InitiatorType,
+                duration: entry.duration,
+                entryType: entry.entryType,
+                name: entry.name,
                 status: xhr.status,
                 startTime: Math.round(entry.startTime),
                 endTime: Math.round(entry.responseEnd),
@@ -438,10 +446,13 @@ function initFetchObserver(
       } finally {
         getRequestPerformanceEntry(win, 'fetch', req.url, after, before)
           .then((entry) => {
+            if (!entry) return;
             const request: NetworkRequest = {
-              url: entry.name,
               method: req.method,
               initiatorType: entry.initiatorType as InitiatorType,
+              duration: entry.duration,
+              entryType: entry.entryType,
+              name: entry.name,
               status: res?.status,
               startTime: Math.round(entry.startTime),
               endTime: Math.round(entry.responseEnd),
@@ -480,9 +491,10 @@ function initNetworkObserver(
   ) as Required<NetworkRecordOptions>;
 
   const cb: networkCallback = (data) => {
-    const requests = data.requests.filter(
-      (request) => !networkOptions.ignoreRequestFn(request),
-    );
+    const requests = data.requests
+      .map((request) => networkOptions.maskRequestFn(request))
+      .filter(Boolean) as NetworkRequest[];
+
     if (requests.length > 0 || data.isInitial) {
       callback({ ...data, requests });
     }