134 lines
No EOL
4.1 KiB
Markdown
134 lines
No EOL
4.1 KiB
Markdown
## this plugin is deprecated, all network tracking apis are moved into the main tracker codebase
|
|
______
|
|
|
|
# Fetch plugin for OpenReplay
|
|
|
|
This plugin allows you to capture `fetch` payloads and inspect them later on while replaying session recordings. This is very useful for understanding and fixing issues.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm i @openreplay/tracker-fetch
|
|
```
|
|
|
|
## Usage
|
|
|
|
Use the provided `fetch` method from the plugin instead of the one built-in.
|
|
|
|
### If your website is a Single Page Application (SPA)
|
|
|
|
```js
|
|
import tracker from '@openreplay/tracker';
|
|
import trackerFetch from '@openreplay/tracker-fetch';
|
|
|
|
const tracker = new OpenReplay({
|
|
projectKey: PROJECT_KEY
|
|
});
|
|
const fetch = tracker.use(trackerFetch(options)); // check list of available options below
|
|
|
|
// .start() returns a promise
|
|
tracker.start().then(sessionData => ... ).catch(e => ... )
|
|
|
|
fetch('https://myapi.com/').then(response => console.log(response.json()));
|
|
```
|
|
|
|
### If your web app is Server-Side-Rendered (SSR)
|
|
|
|
Follow the below example if your app is SSR. Ensure `tracker.start()` is called once the app is started (in `useEffect` or `componentDidMount`).
|
|
|
|
```js
|
|
import OpenReplay from '@openreplay/tracker/cjs';
|
|
import trackerFetch from '@openreplay/tracker-fetch/cjs';
|
|
|
|
const tracker = new OpenReplay({
|
|
projectKey: PROJECT_KEY
|
|
});
|
|
const fetch = tracker.use(trackerFetch(options)); // check list of available options below
|
|
|
|
//...
|
|
function MyApp() {
|
|
useEffect(() => { // use componentDidMount in case of React Class Component
|
|
// .start() returns a promise
|
|
tracker.start().then(sessionData => ... ).catch(e => ... )
|
|
|
|
fetch('https://myapi.com/').then(response => console.log(response.json()));
|
|
}, [])
|
|
//...
|
|
}
|
|
|
|
```
|
|
|
|
## Options
|
|
|
|
```js
|
|
trackerFetch({
|
|
overrideGlobal: boolean;
|
|
failuresOnly: boolean;
|
|
sessionTokenHeader: string;
|
|
ignoreHeaders: Array<string> | boolean;
|
|
sanitiser: (RequestResponseData) => RequestResponseData | null;
|
|
})
|
|
```
|
|
|
|
- `overrideGlobal`: Overrides the default `window.fetch`. Default: `false`.
|
|
- `failuresOnly`: Captures requests having 4xx-5xx HTTP status code. Default: `false`.
|
|
- `sessionTokenHeader`: In case you have enabled some of our backend [integrations](/integrations) (i.e. Sentry), you can use this option to specify the header name (i.e. 'X-OpenReplay-SessionToken'). This latter gets appended automatically to each fetch request to contain the OpenReplay sessionToken's value. Default: `undefined`.
|
|
- `ignoreHeaders`: Helps define a list of headers you don't wish to capture. Set its value to `false` to capture all of them (`true` if none). Default: `['Cookie', 'Set-Cookie', 'Authorization']` so sensitive headers won't be captured.
|
|
- `sanitiser`: Sanitise sensitive data from fetch request/response or ignore request comletely. You can redact fields on the request object by modifying then returning it from the function:
|
|
|
|
```typescript
|
|
interface RequestData {
|
|
body: BodyInit | null | undefined; // whatewer you've put in the init.body in fetch(url, init)
|
|
headers: Record<string, string>;
|
|
}
|
|
|
|
interface ResponseData {
|
|
body: string | Object | null; // Object if response is of JSON type
|
|
headers: Record<string, string>;
|
|
}
|
|
|
|
interface RequestResponseData {
|
|
readonly status: number;
|
|
readonly method: string;
|
|
url: string;
|
|
request: RequestData;
|
|
response: ResponseData;
|
|
}
|
|
|
|
sanitiser: (data: RequestResponseData) => { // sanitise the body or headers
|
|
if (data.url === "/auth") {
|
|
data.request.body = null
|
|
}
|
|
|
|
if (data.request.headers['x-auth-token']) { // can also use ignoreHeaders option instead
|
|
data.request.headers['x-auth-token'] = 'SANITISED';
|
|
}
|
|
|
|
// Sanitise response
|
|
if (data.status < 400 && data.response.body.token) {
|
|
data.response.body.token = "<TOKEN>"
|
|
}
|
|
|
|
return data
|
|
}
|
|
|
|
// OR
|
|
|
|
sanitiser: data => { // ignore requests that start with /secure
|
|
if (data.url.startsWith("/secure")) {
|
|
return null
|
|
}
|
|
return data
|
|
}
|
|
|
|
// OR
|
|
|
|
sanitiser: data => { // sanitise request url: replace all numbers
|
|
data.url = data.url.replace(/\d/g, "*")
|
|
return data
|
|
}
|
|
```
|
|
|
|
## Troubleshooting
|
|
|
|
Having trouble setting up this plugin? please connect to our [Discord](https://discord.openreplay.com) and get help from our community. |