openreplay/networkProxy
Delirium e66423dcf4
Spot network refactoring (#2617)
* start refactoring network

* separate network module, refactor spot network capture

Signed-off-by: nick-delirium <nikita@openreplay.com>

* some console refactoring, display network results in ui

* detect gql error param

* fix proxy ignore file, fix network tracking, fix tab tracking

* some code quality improvements...

* handle graphql in network lib (.2 ver), update tracker to use last version of lib

* remove debug logs, change request type to gql (if its gql!) in lib, display gql in ui

---------

Signed-off-by: nick-delirium <nikita@openreplay.com>
2024-09-30 09:47:27 +02:00
..
src Spot network refactoring (#2617) 2024-09-30 09:47:27 +02:00
.gitignore Spot network refactoring (#2617) 2024-09-30 09:47:27 +02:00
LICENSE Spot network refactoring (#2617) 2024-09-30 09:47:27 +02:00
package-lock.json Spot network refactoring (#2617) 2024-09-30 09:47:27 +02:00
package.json Spot network refactoring (#2617) 2024-09-30 09:47:27 +02:00
README.md Spot network refactoring (#2617) 2024-09-30 09:47:27 +02:00
tsconfig.json Spot network refactoring (#2617) 2024-09-30 09:47:27 +02:00

this tiny library helps us (OpenReplay folks) to create proxy objects for fetch, XHR and beacons for proper request tracking in @openreplay/tracker and Spot extension.

example usage:

import createNetworkProxy from '@openreplay/network-proxy';

const context = this;
const ignoreHeaders = ['Authorization'];
const tokenUrlMatcher = /\/auth\/token/;
function setSessionTokenHeader(setRequestHeader: (name: string, value: string) => void) {
  const header = 'X-Session-Token
  const sessionToken = getToken() // for exmaple, => `session #123123`;
  if (sessionToken) {
    setRequestHeader(header, sessionToken)
  }
}
function sanitize(reqResInfo) {
  if (reqResInfo.request) {
    delete reqResInfo.request.body
  }
  return reqResInfo
}

const onMsg = (networkReq) => console.log(networkReq)
const isIgnoredUrl = (url) => url.includes('google.com')

// Gets current tracker requests url and returns boolean. If present,
// sessionTokenHeader will only be applied when this function returns true.
// Default: undefined
const tokenUrlMatcher = (url) => url.includes('google.com');

// this will observe global network requests
createNetworkProxy(
  context,
  options.ignoreHeaders,
  setSessionTokenHeader,
  sanitize,
  (message) => app.send(message),
  (url) => app.isServiceURL(url),
  options.tokenUrlMatcher,
)

// to stop it, you can save this.fetch/other apis before appliying the proxy
// and then restore them