diff --git a/src/pages/en/installation/canvas.mdx b/src/pages/en/installation/canvas.mdx index d020fe71..dfba17aa 100644 --- a/src/pages/en/installation/canvas.mdx +++ b/src/pages/en/installation/canvas.mdx @@ -6,6 +6,8 @@ metaDescription: "How to record canvas and WebGL elements in session replay." OpenReplay can record the content of `` elements with support for WebGL. +> Note: if you're using WebGL context, make sure you're adding `{ preserveDrawingBuffer: true }` to .getContext options to prevent blank frames, since extracting image data from canvas usually relies on drawing layer that's omitted by default. + ## Enable Canvas Recording To enable canvas recording, simply run `openreplay -e` then add the below block to update the `http` service. diff --git a/src/pages/en/rn-sdk/modules.mdx b/src/pages/en/rn-sdk/modules.mdx index b39884e2..f8c0f5c7 100644 --- a/src/pages/en/rn-sdk/modules.mdx +++ b/src/pages/en/rn-sdk/modules.mdx @@ -28,7 +28,7 @@ interface IORTrackerConnector { - [setMetadata()](/rn-sdk/set-metadata): Set a metadata field and save it as part of the recording. - [event()](/rn-sdk/event): Send custom events to be recorded as part of your replays with this method. - [setUserID()](/rn-sdk/set-user-id): Identify your users with this method. - +- [patchNetwork()](/rn-sdk/patch-network): Patch fetch or/and XMLHttpRequest to record network requests. ## Components - [ORTouchTrackingView](/rn-sdk/touch): View used to track touch events. diff --git a/src/pages/en/rn-sdk/patch-network.mdx b/src/pages/en/rn-sdk/patch-network.mdx new file mode 100644 index 00000000..d7256a2f --- /dev/null +++ b/src/pages/en/rn-sdk/patch-network.mdx @@ -0,0 +1,34 @@ +--- +title: "React Native SDK - patchNetwork method" +metaTitle: "React Native SDK - patchNetwork method" +metaDescription: "Details about the patchNetwork method from OpenReplay's React Native SDK" +--- + +This method patches XHR and Fetch apis to intercept network requests. + +## Signature + +```js +import OR from '@openreplay/react-native' + +OR.tracker.patchNetwork( + global, + (url) => url.includes('openreplaydomain'), + { mode: 'fetch' } +) +``` + +## Parameters + +- `context: globalThis`: current context of the app (to get fetch/xhr from) +- `isServiceURL: (url: string) => boolean`: function that checks if current request should be tracked (false) or skipped (true) +- `options: Partial`: options object + +## Options + +- `ignoreHeaders: Array | boolean`: headers to ignore (default: `['cookie', 'set-cookie', 'authorization']`) +- `capturePayload: boolean`: whether to capture request payload (default: `false`) +- `sanitizer: data: RequestResponseData) => RequestResponseData`: function that sanitizes request/response (default: `undefined`) +- `mode: 'fetch' | 'xhr' | 'all'`: which api to patch (default: `'fetch'`) + +> Note: React-Native fetch are using XHR under the hood (at the moment of writing), so using "all" can lead to duplicated requests in the recording diff --git a/src/pages/en/sdk/constructor.mdx b/src/pages/en/sdk/constructor.mdx index 442a5a11..7ec94840 100644 --- a/src/pages/en/sdk/constructor.mdx +++ b/src/pages/en/sdk/constructor.mdx @@ -84,7 +84,7 @@ There are a set of options you can pass to the constructor. Only `projectKey` is - `disableClickmaps?: boolean` For disabling click maps. Default: `true`. - `verbose?: boolean` For enabling logs. Default: `false`. - `autoResetOnWindowOpen?: boolean` Enable this option to reset the sessionID when opening a new tab from your application. This overwrites the `window.open` method to avoid duplicate sessionIDs due to shared session storage between browser tabs. Default: `false`. -- `forceSingleTab: boolean` Disables multi-tab recording capabilities. Default: `false`. +- `forceSingleTab: boolean` Disables the multi-tab recording capability which stitches user sessions, conducted across multiple tabs, into a single replay. Instead, by enabling this option, sessions captured in different browser tabs will be recorded in separate recordings. Default: `false`. - `disableStringDict: boolean` Disables the string dictionary logic (for optimizing storage) in recordings. Default: `false`. ### Privacy