OpenReplay

https://docs.openreplay.com/en/
Admin
OpenReplay is a session replay and product analytics platform that captures user interactions,...
Tokens:119,742
Snippets:1,530
Trust Score:8.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Verify OpenReplay Tracker Installation

Source: https://docs.openreplay.com/en/troubleshooting/session-recordings

Use the tracker's start callback to log a message on startup. This helps verify if the tracker is initializing correctly and provides the session ID.

```javascript
const tracker = new OpenReplay({
	projectKey: PROJECT_KEY,
});

tracker.start().then(({sessionID}) => console.log("OpenReplay tracker started with session: ", sessionID))
// OR you can use startCallback method
tracker.start({
	startCallback: ({ sessionID }) => console.log("OpenReplay tracker started with session: ", sessionID)
});
// for snippet, just add startCallback to initOpts
```

--------------------------------

### Start OpenReplay Tracker with Dynamic Import

Source: https://docs.openreplay.com/en/sdk/using-or/remix

This example demonstrates how to start the OpenReplay tracker using a dynamic import, which can help resolve module import issues in some Remix setups.

```typescript
import {v4 as uuidV4} from 'uuid'

function defaultGetUserId() {
    return uuidV4() 
}

type TrackerConfig = {
    projectKey: string,
    userIdEnabled?: boolean,
    getUserId?: () => string
}

export function startTracker(config: TrackerConfig) {
    let tracker = null;
    let Tracker = null
    let userId = "";
    
    (async () => {
				//dynamic import 
        Tracker  = (await import('@openreplay/tracker')).default 
        console.log("Starting tracker...")
        console.log("Custom configuration received: ", config)
        
        const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
        
        const trackerConfig: TrackerConfig = {
            projectKey: config?.projectKey
        }
        
        console.log("Tracker configuration")
        console.log(trackerConfig)
        tracker = new Tracker(trackerConfig);
        
        if(config?.userIdEnabled) {
            userId = getUserId()
            tracker.setUserID(userId)
        }
        
        
        tracker.start();
        
				
    })()
    
    return {
        tracker,
        userId
    }
}

```

--------------------------------

### start()

Source: https://docs.openreplay.com/en/ios-sdk/methods

Start recording a session.

```APIDOC
## start()

### Description
Start recording a session.

### Method
`start()`

### Parameters
This method does not have any parameters explicitly documented in the source.
```

--------------------------------

### start()

Source: https://docs.openreplay.com/en/sdk/methods

Start recording a session.

```APIDOC
## start()

### Description
Start recording a session.

### Method
```javascript
 tracker.start()
```
```

--------------------------------

### start()

Source: https://docs.openreplay.com/en/android-sdk/methods

Start recording a session.

```APIDOC
## start()

### Description
Start recording a session.

### Method
`start()`

### Parameters
This method does not explicitly list parameters in the source text.
```

--------------------------------

### Get Project Response

Source: https://docs.openreplay.com/en/api/projects

This is an example response for retrieving a specific project's details. It includes the project's ID, name, key, tenant ID, and platform.

```json
{
  "data": {
    "projectId": 42,
    "name": "MyFirstProject",
    "projectKey": "7ePSXFuQVidq9pqS6Xyn",
    "tenantId": 1,
    "platform": "web"
  }
}
```

--------------------------------

### coldStart()

Source: https://docs.openreplay.com/en/sdk/methods

Starts buffering messages with the possibility to call start() to enable session recording.

```APIDOC
## coldStart()

### Description
Starts buffering messages (refreshing buffer) with the possibility to call start() to enable session recording and send the buffer content.

### Method
```javascript
 tracker.coldStart()
```
```

--------------------------------

### Configure and Start OpenReplay Tracker in Svelte

Source: https://docs.openreplay.com/en/sdk/using-or/svelte

Import and configure the OpenReplay tracker within the `onMount` lifecycle hook to ensure it runs on the client side. This example shows both singleton and class-based approaches for tracker initialization.

```javascript
<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    if (process.browser) {
			// singleton approach
			const { tracker } = await import('@openreplay/tracker');
			tracker.configure({
				projectKey: "<your project key>", 
        ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
			});
			tracker.start();
			
			// or you can use a class based approach
      const Tracker = await import('@openreplay/tracker');
      const tracker = new Tracker({
	      projectKey: "", // pKey
	      ingestPoint: "ingestPoint",
      })
      
      tracker.start()
    }
  })
</script>
```

--------------------------------

### Install OpenReplay CLI and Initialize

Source: https://docs.openreplay.com/en/deployment/deploy-azure

Download and install the OpenReplay CLI, make it executable, and then initialize OpenReplay by providing the domain name it will run on.

```bash
sudo wget https://raw.githubusercontent.com/openreplay/openreplay/main/scripts/helmcharts/openreplay-cli -O /bin/openreplay 
sudo chmod +x /bin/openreplay
openreplay -i DOMAIN_NAME
```

--------------------------------

### Install OpenReplay CLI and Initialize

Source: https://docs.openreplay.com/en/deployment/deploy-digitalocean

Download and install the OpenReplay CLI tool, make it executable, and then use it to initialize OpenReplay with your domain name.

```bash
sudo wget https://raw.githubusercontent.com/openreplay/openreplay/main/scripts/helmcharts/openreplay-cli -O /bin/openreplay
sudo chmod +x /bin/openreplay
openreplay -i DOMAIN_NAME
```

--------------------------------

### Install OpenReplay with Docker Compose

Source: https://docs.openreplay.com/en/deployment/deploy-docker

Execute this script to install OpenReplay. You need to provide the domain name where OpenReplay will be accessible. This script downloads and runs the Docker installation process.

```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/openreplay/openreplay/main/scripts/docker-compose/docker-install.sh)"
```

--------------------------------

### Install OpenReplay CLI and Deploy

Source: https://docs.openreplay.com/en/deployment/deploy-gcp

Installs the OpenReplay CLI tool and then uses it to deploy OpenReplay on your VM. Ensure your domain name is set correctly.

```bash
sudo wget https://raw.githubusercontent.com/openreplay/openreplay/main/scripts/helmcharts/openreplay-cli -O /bin/openreplay 

```

```bash
sudo chmod +x /bin/openreplay

```

```bash
openreplay -i DOMAIN_NAME

```

--------------------------------

### Install Postgres Client

Source: https://docs.openreplay.com/en/configuration/external-db

Installs the PostgreSQL client utility on the OpenReplay instance. This is necessary to connect to and manage the external database.

```bash
sudo apt install postgresql-client
```

--------------------------------

### Example Usage

Source: https://docs.openreplay.com/en/sdk/methods/resanitize

Examples demonstrating how to use the resanitize method.

```APIDOC
## Example

```javascript
// Obscure a section after the user opens sensitive content
const panel = document.getElementById('account-details')
panel.setAttribute('data-openreplay-obscured', '')

// Tell the tracker to re-apply sanitization to that subtree
tracker.resanitize(panel)
```

```javascript
// Re-scan the whole document after changing domSanitizer rules
tracker.resanitize()
```
```

--------------------------------

### Start Tracker

Source: https://docs.openreplay.com/en/android-sdk/methods/start

This method is used to start the tracker. By starting the tracker, the recording of the session starts.

```APIDOC
## start

### Description
Starts the tracker to begin session recording.

### Method Signature
```
OpenReplay.start(applicationContext: Context, projectKey: String, options: OROptions)
```

### Parameters
* `applicationContext` (Context) - Required - The application context.
* `projectKey` (String) - Required - Your OpenReplay project key.
* `options` (OROptions) - Optional - Initialization options for the tracker.

### Initialization Options
Available options for `OROptions`:
* `crashes` (Bool) - Enables crashlytics. Defaults to `true`.
* `analytics` (Bool) - Enabled analytics for views. Defaults to `true`.
* `performances` (Bool) - Enables performance listener. Defaults to `true`.
* `logs` (Bool) - Enables logs listener. Defaults to `true`.
* `screen` (Bool) - Enables screen recorder. Defaults to `true`.
* `wifiOnly` (Bool) - Forces tracker to start only if user has a wifi connection. Defaults to `true`.

Default for all options is `true`.
```

--------------------------------

### assist.start()

Source: https://docs.openreplay.com/en/plugins/assist

Starts or restarts the assist session. If the tracker is not active, assist will start once the tracker initializes.

```APIDOC
## assist.start()

### Description
(Re)starts assist. It is a no-op if the tracker itself is not active yet. In `Autostart.Continuation` mode, it persists a flag in `sessionStorage` so assist auto-continues across page reloads. An explicit `start()` also supersedes any `ignoreAnonymous` postponement.
```

--------------------------------

### Start Tracker with Basic Configuration

Source: https://docs.openreplay.com/en/android-sdk/methods/start

Starts the OpenReplay tracker using the application context, project key, and default initialization options. Ensure you have the necessary context and project key.

```kotlin
OpenReplay.start(applicationContext: Context, projectKey: String, options: OROptions)
```

--------------------------------

### Install OpenReplay Tracker

Source: https://docs.openreplay.com/en/sdk/using-or/remix

Install the OpenReplay tracker and uuid packages using npm.

```bash
$ npm install @openreplay/tracker
```

--------------------------------

### Install OpenReplay Tracker

Source: https://docs.openreplay.com/en/tutorials/vuex

Install the OpenReplay tracker package using either Yarn or npm.

```bash
yarn add @openreplay/tracker
```

```bash
npm install @openreplay/tracker
```

--------------------------------

### Start Method Signature

Source: https://docs.openreplay.com/en/sdk/methods/start

This is the signature for the start method, which can optionally accept start options.

```typescript
start(startOpts?: Partial<StartOptions>): Promise<StartPromiseReturn>
```

--------------------------------

### Install React Native Tracker

Source: https://docs.openreplay.com/en/rn-sdk/init

Install the OpenReplay tracker using npm. This command installs the tracker and the SDK, enabling all tracker features.

```bash
npm i @openreplay/react-native
```

--------------------------------

### Initialize Cold Start with Options

Source: https://docs.openreplay.com/en/sdk/methods/cold-start

Use this method to begin buffering messages without starting the session. Customize recording options like userID, metadata, forceNew session, or sessionHash.

```javascript
import OpenReplay from '@openreplay/web';

const o = new OpenReplay({
  url: 'YOUR_COLLECTOR_URL',
  project_key: 'YOUR_PROJECT_KEY'
});

async function init() {
  await o.coldStart({
    userID: 'user-123',
    metadata: { plan: 'free' },
    forceNew: true,
    sessionHash: 'session-abc'
  });
}

init();
```

--------------------------------

### coldStart Method

Source: https://docs.openreplay.com/en/sdk/methods/cold-start

Begins buffering messages without starting the actual session. The buffer will keep the last 30 seconds of recorded events. You can activate the session by calling `start()` or via a conditional trigger.

```APIDOC
## coldStart

### Description
Begins buffering messages without starting the actual session. The buffer will keep the last 30 seconds of recorded events. You can activate the session by calling `start()` or via a conditional trigger.

### Signature
coldStart(startOpts?: Partial<StartOptions>, isConditional?: boolean): Promise<void>

### Parameters
With the `startOpts` you can customize different aspects of the recording:
  * `userID` (string): Used to manually set the `userID` to track it across sessions. This is a string value and it can be anything you want.
  * `metadata` (Record<string, string>): Manually set the metadata values. Check the Metadata section to learn more about this.
  * `forceNew` (boolean): Used to force a new session after page refresh. By default it’s set to `false`, so after a refresh the session is kept.
  * `sessionHash` (string): Used for sticky sessions. Useful if you have a multi-site application or if you have to redirect the user outside and then back into your site (like to a payment gateway).
  * `isConditional` (boolean): Decides if the tracker should wait for the trigger condition to be met before starting the session automatically.

> Note: Conditional recording is only supported in our Cloud and Enterprise Edition offerings.

### Return value
This method does not return any value.
```

--------------------------------

### Install OpenReplay Assist Plugin with npm

Source: https://docs.openreplay.com/en/tutorials/assist

Install the Assist plugin using npm. This is for projects using the package version of OpenReplay.

```bash
npm install @openreplay/tracker-assist
```

--------------------------------

### Install GraphQL Tracker

Source: https://docs.openreplay.com/en/plugins/graphql

Install the GraphQL tracker package using npm.

```bash
npm i @openreplay/tracker-graphql
```

--------------------------------

### Install MobX Plugin

Source: https://docs.openreplay.com/en/plugins/mobx

Install the MobX plugin using npm. This is the first step to integrating MobX tracking with OpenReplay.

```bash
npm i @openreplay/tracker-mobx
```

--------------------------------

### Install OpenReplay Tracker

Source: https://docs.openreplay.com/en/deployment/setup-or

Install the OpenReplay tracker package using npm. This is the first step for integrating OpenReplay into your application.

```bash
npm i @openreplay/tracker
```

--------------------------------

### Install Redux Plugin

Source: https://docs.openreplay.com/en/plugins/redux

Install the Redux plugin using npm.

```bash
npm i @openreplay/tracker-redux --save
```

--------------------------------

### Install VueX Plugin

Source: https://docs.openreplay.com/en/plugins/vuex

Install the VueX plugin using npm. This is the first step to integrating VueX state tracking with OpenReplay.

```bash
npm i @openreplay/tracker-vuex
```

--------------------------------

### start

Source: https://docs.openreplay.com/en/sdk/methods/start

Starts the tracker to begin session recording. It accepts an optional configuration object to customize recording aspects and returns a promise with session information or an error reason.

```APIDOC
## start

### Description
Starts the tracker to begin session recording. It accepts an optional configuration object to customize recording aspects and returns a promise with session information or an error reason.

### Method
start

### Parameters
#### Optional Parameters
- **userID** (string): Manually set the user ID to track it across sessions.
- **metadata** (Record<string, string>): Manually set metadata values.
- **forceNew** (boolean): Force a new session after page refresh. Defaults to `false`.
- **sessionToken** (string): Used in some integrations.
- **assistOnly** (boolean): Launches tracker in assist-only mode which will skip sending session data to backend (EE edition feature).
- **startCallback** ((result: StartPromiseReturn) => void): A callback triggered when the tracker starts or fails to start. Returns either success or failure information.

### Return value
Returns a promise with session info object or an error reason.

#### Success Response
- **sessionID** (string): A string value representing the ID of the started session.
- **sessionToken** (string): The token of the session.
- **userUUID** (string): A unique identifier for the user.

#### Failure Response
- **reason** (string): The reason for the failure.
- **success** (boolean): Always `false` in case of failure.
```

--------------------------------

### Configure and Start Tracker (SPA - Manual Instance)

Source: https://docs.openreplay.com/en/deployment/setup-or

Initialize and start the OpenReplay tracker using a manual instance for Single Page Applications (SPAs). This method provides more control over the tracker instance. Replace PROJECT_KEY with your project key and specify the ingestPoint for self-hosted deployments.

```javascript
import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
  projectKey: PROJECT_KEY,
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

tracker.start();
```

--------------------------------

### Install Vuex Plugin with Yarn

Source: https://docs.openreplay.com/en/tutorials/vuex

Install the OpenReplay Vuex plugin using Yarn. This is the first step before importing it into your application.

```bash
yarn add @openreplay/tracker-vuex
```

--------------------------------

### Start OpenReplay Tracker in Remix

Source: https://docs.openreplay.com/en/sdk/using-or/remix

A sample module to start the OpenReplay tracker in a Remix application. It handles user ID generation and tracker configuration.

```typescript
import {v4 as uuidV4} from 'uuid'
import Tracker from '@openreplay/tracker'

function defaultGetUserId() {
    return uuidV4() 
}

type TrackerConfig = {
    projectKey: string,
    userIdEnabled?: boolean,
    getUserId?: () => string
}

export function startTracker(config: TrackerConfig) {
    let tracker = null;
    let userId = "";
   
    console.log("Starting tracker...")
    console.log("Custom configuration received: ", config)
        
    const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId
        
    const trackerConfig: TrackerConfig = {
        projectKey: config?.projectKey
    }
        
    console.log("Tracker configuration")
    console.log(trackerConfig)
    tracker = new Tracker(trackerConfig);
        
    if(config?.userIdEnabled) {
        userId = getUserId()
        tracker.setUserID(userId)
    }
     
    tracker.start();
      
    return {
        tracker,
        userId
    }
}

```

--------------------------------

### Configure and Start Tracker (Singleton)

Source: https://docs.openreplay.com/en/sdk/using-or/gatsby

Use this snippet to configure the tracker with your project key and ingest point, then start it within a Gatsby component using useEffect. Recommended for most use cases.

```javascript
import { tracker } from '@openreplay/tracker'

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});

const Index = ({data, location }) => {

	React.useEffect(() => {
		tracker.start();
	}, [])

	 //the rest of your code here...
}
```

--------------------------------

### Install or Upgrade Databases and OpenReplay

Source: https://docs.openreplay.com/en/deployment/deploy-kubernetes

These Helm commands install or upgrade the PostgreSQL database and OpenReplay services. Ensure `vars.yaml` is configured correctly before running these commands. The `--wait` flag ensures the command waits until all resources are in a ready state.

```bash
cd openreplay/scripts/helmcharts
helm upgrade --install databases ./databases -n db --create-namespace --wait -f ./vars.yaml --atomic
helm upgrade --install openreplay ./openreplay -n app --create-namespace --wait -f ./vars.yaml --atomic
```

--------------------------------

### Integrate jQuery Plugin with OpenReplay Tracker in React

Source: https://docs.openreplay.com/en/tutorials/build-plugins

Instantiate the OpenReplay tracker, use a custom plugin (e.g., jQuery tracker), and start the tracker. This example shows how to track a jQuery GET request within a React component's useEffect hook.

```javascript
import logo from './logo.svg';
import './App.css';
import tracker from 'openreplay-tracker'
import jqueryTracker from 'tracker-jquery'
import { useEffect } from 'react';
import $ from 'jquery'

const t = new tracker({
  __DISABLE_SECURE_MODE: true, //only if you're testing locally
  ingestPoint: "openreplay.<your custom domain>/ingest",
  projectKey: "<your project key>",
})

function App() {
  useEffect(()=> {
    t.use(jqueryTracker($))
    t.start()
    async function doGet() {
      let resp = await $.get({
        url: "http://localhost:3000"
      })
      console.log(resp)
    }

    doGet()
  }, [])
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```

--------------------------------

### Sanitizer Function Example 2

Source: https://docs.openreplay.com/en/sdk/network-options

Example of a sanitizer function to ignore payloads for specific URLs. This function sets both the request and response bodies to null for any URL starting with '/secure'.

```typescript
sanitizer: data => {
  if (data.url.startsWith("/secure")) {
    data.request.body = null;
    data.response.body = null;
  }
  return data
}
```

--------------------------------

### Configure and Start Tracker (SSR)

Source: https://docs.openreplay.com/en/deployment/setup-or

Initialize and start the OpenReplay tracker for Server-Side-Rendered (SSR) applications like NextJS or NuxtJS. Ensure the tracker runs in the browser environment and `tracker.start()` is called after the app is served to the client, for example, within `useEffect` or `componentDidMount`.

```javascript
import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
      projectKey: PROJECT_KEY
});
//...
function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start();
  }, []);
}
```

--------------------------------

### Initialize OpenReplay Tracker in Svelte Component

Source: https://docs.openreplay.com/en/sdk/using-or/svelte

Get the tracker instance from Svelte's context and start it within the onMount callback to ensure browser execution.

```javascript
import {key} from "../../context/tracker"
  
let {getTracker} = getContext(key)
onMount( () => {
	let tracker = getTracker()
	tracker.start()
})
```

--------------------------------

### Get OpenReplay Deployment Status

Source: https://docs.openreplay.com/en/cli

Use this command to check the current status of deployed OpenReplay services. This is useful for diagnosing issues or verifying a running installation.

```bash
openreplay -s 
```

--------------------------------

### Start Session with Default Options

Source: https://docs.openreplay.com/en/rn-sdk/methods/start

Import the SDK and call `startSession` to begin recording with all features enabled by default. No options are needed for default behavior.

```javascript
import OR from '@openreplay/react-native'

OR.tracker.startSession(options)
```

--------------------------------

### Elasticsearch API Key Creation Result

Source: https://docs.openreplay.com/en/integrations/elastic

This is an example of the response received after successfully creating an Elasticsearch API key. The 'id' and 'api_key' values are crucial for the integration setup.

```json
{
  "id": "eQWAIG0Bo0VqB8HXFH9-",
  "name": "openreplay-api-key",
  "api_key": "dZ5ycVRJTU-5UW_RYfi1_w"
}
```

--------------------------------

### Initialize Assist in SPA

Source: https://docs.openreplay.com/en/plugins/assist

Configure and start the tracker with the Assist plugin for Single Page Applications.

```javascript
import trackerAssist from '@openreplay/tracker-assist';
import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});
tracker.use(trackerAssist(options)); // check the list of available options below

tracker.start();
```

--------------------------------

### Handle Agent Connection

Source: https://docs.openreplay.com/en/plugins/assist

Fires when a live session starts and optionally returns a cleanup function for disconnection.

```javascript
onAgentConnect = ({ email, name, query }) => {
  console.log("Live session started")
  const onAgentDisconnect =  () => console.log("Live session stopped")
  return onAgentDisconnect
}
```

--------------------------------

### Initialize Tracker for SSR Applications

Source: https://docs.openreplay.com/en/sdk/constructor

Initializes the tracker for Server-Side Rendered applications using the CommonJS module. `tracker.start()` should be called after the app has started, for example, within `useEffect` or `componentDidMount`.

```javascript
import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
      projectKey: PROJECT_KEY,
      ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});
//...
function MyApp() {
  useEffect(() => { // use componentDidMount in case of React Class Component
    tracker.start(); // returns a promise with session info (sessionID, sessionHash, userUUID)
  }, [])
}
```

--------------------------------

### OpenReplay.shared.start

Source: https://docs.openreplay.com/en/ios-sdk/init

Initializes the OpenReplay tracker with a project key and configuration options.

```APIDOC
## OpenReplay.shared.start(projectKey:options:)

### Description
Starts the OpenReplay tracker. The projectKey is required and can be found in the OpenReplay dashboard.

### Parameters
- **projectKey** (String) - Required - The unique identifier for your project.
- **options** (Options) - Required - Configuration options including crashes, analytics, performances, logs, screen, wifiOnly, and isBlur.
```

--------------------------------

### Initialize and control Assist

Source: https://docs.openreplay.com/en/plugins/assist

Use the tracker instance to initialize the assist plugin and toggle its state using start and stop methods.

```javascript
const assist = tracker.use(trackerAssist(options));

assist.stop();
assist.start();
```

--------------------------------

### Get Session Token (Deprecated)

Source: https://docs.openreplay.com/en/sdk/methods/get-session-token

This method is deprecated. Use the sessionHash parameter of the `start` method instead. It returns the session's hash token, which can be a string, null, or undefined.

```javascript
getSessionToken(): string | null | undefined
```

--------------------------------

### Initialize SDK with Enhanced Components and Metadata

Source: https://docs.openreplay.com/en/rn-sdk/init

This example demonstrates initializing the OpenReplay SDK with enhanced components for tracking user interactions and setting metadata. It includes tracking touch interactions, input changes, and sanitizing view content. Ensure environment variables for the project key and ingest URL are correctly set.

```javascript
// App.tsx
import Openreplay from '@openreplay/react-native';

function App() {
	const start = () => {
	    Openreplay.tracker.startSession(
	      process.env.REACT_APP_KEY!,
	      {},
	      process.env.REACT_APP_INGEST
	    );
	    Openreplay.tracker.setMetadata('key', 'value');
	    Openreplay.tracker.setUserID('user-id');
	    Openreplay.patchNetwork(global, () => false, {});
	};
	
	React.useEffect(() => start(), []);
	
	return (
		// this top-level view is required to track touch interactions
		<Openreplay.ORTouchTrackingView style={styles.container}> 
		      <View style={styles.container}>
		         <Openreplay.ORTrackedInput
		          style={styles.input}
		          onChangeText={onChangeNumber}
		          value={number}
		          placeholder="Trackable input"
		          numberOfLines={1}
		        />

		        <Openreplay.ORSanitizedView style={styles.sanitizedView}>
		          <Text>Contents of this view are sanitized and invisible on the recording</Text>
		        </Openreplay.ORSanitizedView>
		      </View>
		</Openreplay.ORTouchTrackingView>
	)
}
```

--------------------------------

### Configure Live View confirmation

Source: https://docs.openreplay.com/en/plugins/assist

Use the trackerAssist plugin to require user permission before starting a live session.

```javascript
tracker.use(trackerAssist({
  requestConfirm: true,
  sessionConfirm: { text: 'A support agent would like to view your screen. Allow?' },
  onSessionConfirmApprove: ({ email, name, query }) => console.log("Session viewing approved"),
  onSessionConfirmDeny: ({ email, name, query }) => console.log("Session viewing denied"),
}));
```

--------------------------------

### Handle Remote Control Start

Source: https://docs.openreplay.com/en/plugins/assist

Fires when a remote control session begins and optionally returns a cleanup function for when permissions are revoked.

```javascript
onRemoteControlStart: () => {
  console.log("Remote control started")
  const onControlEnd = () => console.log("Remote control ended")
  return onControlEnd
}
```

--------------------------------

### Handle Call Start

Source: https://docs.openreplay.com/en/plugins/assist

Fires when a WebRTC call begins and optionally returns a cleanup function for call termination.

```javascript
onCallStart: () => {
  console.log("Call started")
  const onCallEnd = () => console.log("Call ended")
  return onCallEnd
}
```

--------------------------------

### Add OpenReplay Tracker to Vue SPA

Source: https://docs.openreplay.com/en/sdk/using-or/vue

Add this code to your main setup script in a Vue.js SPA to initialize and start the OpenReplay tracker. Ensure you replace placeholders with your actual project key and ingest point if self-hosting.

```javascript
<script setup>
// note that you can manually import Tracker class if you want to handle the instance manually
import { tracker } from '@openreplay/tracker'
//... your code here
tracker.configure({
  projectKey: "<your project key>",
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

tracker.start();
//... more code here
</script>
```

--------------------------------

### startSession

Source: https://docs.openreplay.com/en/rn-sdk/methods

Starts the recording session. Requires a project key and optionally accepts configuration options and a project URL.

```APIDOC
## startSession

### Description
Starts the recording session.

### Method Signature
`startSession(projectKey: string, optionsDict: Options, projectUrl?: string): void`

### Parameters
- **projectKey** (string) - Required - The unique key for your project.
- **optionsDict** (Options) - Required - Configuration options for the session.
- **projectUrl** (string) - Optional - The URL of the OpenReplay project.
```

--------------------------------

### Angular Service for OpenReplay Tracker Setup

Source: https://docs.openreplay.com/en/sdk/using-or/angular

Set up the OpenReplay tracker within an Angular service, ensuring it runs outside of Angular's Zone.js hooks. This example includes initializing the tracker with a project key and ingest point, and using the tracker-assist plugin.

```typescript
import { Injectable, NgZone } from '@angular/core';
import Tracker from '@openreplay/tracker';
import trackerAssist from '@openreplay/tracker-assist';

@Injectable({
  providedIn: 'root',
})
export class OpenReplayService {
  public tracker?: Tracker | null;

  constructor(private zone: NgZone) {
    this.zone.runOutsideAngular(() => {
      this.tracker = new Tracker({
        projectKey: 'abc123',
        ingestPoint: 'https://someurl/',
      });

      this.tracker.use(
        trackerAssist({
          confirmText: `You have an incoming call from <Company> Support. Do you want to answer?`,
        })
      );
    });
  }

  public async start() {
    this.zone.runOutsideAngular(() => {
      if (this.tracker) {
        return this.tracker.start();
      } else {
        return {
          sessionID: null,
          sessionToken: null,
          userUUID: null,
        };
      }
    });
  }

  public setUserData(user: { id: string }): void {
    this.zone.runOutsideAngular(() => {
      if (this.tracker && user.id) {
        this.tracker.setUserID(String(user.id));
      }
    });
  }
}

```

--------------------------------

### Initialize and Start Tracker with Plugins

Source: https://docs.openreplay.com/en/tutorials/graphql

Initializes the OpenReplay tracker with a project key and configures it with provided plugins. It returns an object containing the results from each plugin's initialization, which may be used later.

```javascript
import { tracker } from '@openreplay/tracker';

export function init({
    plugins
}) {

    tracker.configure({
        projectKey: process.env.OPENREPLAY_PROJECT_KEY
    });

    
    let pluginResults = {}
    if(plugins) {
        Object.keys(plugins).forEach( pk => {
            pluginResults[pk] = tracker.use(plugins[pk]())
        })
    }
    return pluginResults
}

export function start() {
    return tracker.start()
}
```

--------------------------------

### Propagate openReplaySession.id in Frontend API Requests (JavaScript)

Source: https://docs.openreplay.com/en/integrations/elastic

Include the `openReplaySession.id` in frontend API requests to link user sessions with backend events. Ensure the tracker is started and the session ID is retrieved before making the request. This example uses `fetch` and assumes a single-page application.

```javascript
import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});

tracker.start().then(() => {
  const sessionId = tracker.getSessionID();

  const headers = {
    'Content-Type': 'application/json',
  };

  if (sessionId) {
    headers['openReplaySession.id'] = sessionId;
  }

  fetch('https://www.your-backend.com/api/endpoint', {
    method: 'GET', // or 'POST', 'PUT', etc.
    headers,
    // ...other options
  })
    .then(response => {
      // Handle response
    })
    .catch(error => {
      // Handle error
    });
});
```

--------------------------------

### Start Tracker in main.js

Source: https://docs.openreplay.com/en/tutorials/vuex

Import and call the `startTracker` function in your `main.js` file, passing the project key obtained from environment variables.

```javascript
import {startTracker} from './tracker/index'

let {vuexTracker} = startTracker({
    projectKey: process.env.VUE_APP_OPENREPLAY_PROJECT_KEY,
})
```

--------------------------------

### Start Tracker Utility Function

Source: https://docs.openreplay.com/en/tutorials/pinia

The `startTracker` function initializes the OpenReplay tracker with provided configuration, including plugins. It returns the tracker instance and any plugin-specific return values.

```javascript
export function startTracker(config) {
    console.log("Starting tracker...")

    console.log("Project key used: ", config.projectKey)
    const trackerConfig = {
        projectKey: config.projectKey,
         //ingestPoint: config.ingestPoint,
        __DISABLE_SECURE_MODE: true
    }

    const tracker = new Tracker(trackerConfig);

    const pluginReturns = {}
    config?.plugins.forEach( p => {
        console.log("Using plugin...", p.name)
        pluginReturns[p.name] = tracker.use(p.fn())
    })
 
    tracker.start();
    return {
        tracker,
        ...pluginReturns
    }
}
```

--------------------------------

### Start the OpenReplay Tracker

Source: https://docs.openreplay.com/en/ios-sdk/methods/start

Call this method to begin session recording. You must provide your project key and can optionally configure tracking features like crashlytics, analytics, and performance monitoring.

```swift
ORTracker.shared.start(projectKey: "YOUR_PROJECT_KEY", options: OROptions())
```

--------------------------------

### Identify User on Tracker Start (NPM)

Source: https://docs.openreplay.com/en/session-replay/identify-user

Inject the userID and associated metadata when starting the tracker. This is the primary method if the user is known at the start of the session.

```javascript
tracker.configure({
  projectKey: PROJECT_KEY
});

tracker.start({
  userID: "john@doe.com",
  metadata: {
    balance: "10M",
    plan: "free"
  }
});
```

--------------------------------

### Initialize OpenReplay Tracker

Source: https://docs.openreplay.com/en/sdk/constructor

Instantiate the OpenReplay tracker with essential configuration. Ensure to replace `PROJECT_KEY` with your actual project key. The `ingestPoint` is required for self-hosted instances.

```javascript
import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
      projectKey: PROJECT_KEY,
      ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
      capturePerformance: true,
      __DISABLE_SECURE_MODE: true // for local testing
});
```

--------------------------------

### Download and Install OpenReplay CLI

Source: https://docs.openreplay.com/en/deployment/upgrade

Download the latest OpenReplay CLI script and make it executable. Ensure the CLI's path is added to your system's PATH environment variable.

```bash
# Download the latest CLI
sudo wget https://raw.githubusercontent.com/openreplay/openreplay/main/scripts/helmcharts/openreplay-cli -O /bin/openreplay 
sudo chmod +x /bin/openreplay
export PATH=/var/lib/openreplay:$PATH
```

--------------------------------

### Initialize Tracker with Metadata (JavaScript Snippet)

Source: https://docs.openreplay.com/en/session-replay/metadata

Include metadata when starting the tracker using the JavaScript snippet by modifying the `startOpts` variable. Ensure `yourMetadata` is defined before this.

```javascript
var initOpts = {
  projectKey: "project_key",
  defaultInputMode: 2,
  obscureTextNumbers: false,
  obscureTextEmails: true,
};
const yourMetadata = { yourKey: 'yourValue' };
var startOpts = { userID: "", metadata: yourMetadata };
(function(A,s,a,y,e,r){
  r=window.OpenReplay=[e,r,y,[s-1, e]];
  s=document.createElement('script');s.src=A;s.async=!a;
  ... 
})("//static.openreplay.com/latest/openreplay.js",1,0,initOpts,startOpts);
```

--------------------------------

### Install Redux Dependencies

Source: https://docs.openreplay.com/en/tutorials/redux

Installs necessary packages for Redux management in a Next.js project.

```bash
npm i next-redux-wrapper redux react-redux redux-thunk redux-devtools-extension
```

--------------------------------

### Initialize SDK Session

Source: https://docs.openreplay.com/en/rn-sdk/init

Add this code to your root file to start an OpenReplay session. Ensure you set the 'projectKey' and provide an options object, or an empty object if none are needed. The ingest URL can be customized if you are not using the default SaaS plan.

```javascript
import Openreplay from '@openreplay/react-native';

// ...
useEffect(() => {
	Openreplay.tracker.startSession(
		'yourProjectKey',
		options, // explained below, set {} if empty
		'https://local.openreplay.instance/ingest' // if you're using our Serverless/SaaS plan then 'https://api.openreplay.com/ingest'
	);
}, [])
```

--------------------------------

### Initialize Cold Start Conditionally

Source: https://docs.openreplay.com/en/sdk/methods/cold-start

Initiate buffering messages without starting the session, and set the tracker to wait for a trigger condition before automatically starting the session. Conditional recording is only supported in Cloud and Enterprise Editions.

```javascript
import OpenReplay from '@openreplay/web';

const o = new OpenReplay({
  url: 'YOUR_COLLECTOR_URL',
  project_key: 'YOUR_PROJECT_KEY'
});

async function init() {
  await o.coldStart(undefined, true);
}

init();
```

--------------------------------

### Start Tracker with Metadata (NPM)

Source: https://docs.openreplay.com/en/session-replay/metadata

Inject metadata when initializing the tracker. This is useful for providing initial user information.

```javascript
tracker.start({
  userID: "john@doe.com",
  metadata: {
    balance: "10M",
    plan: "free"
  }
});
```

--------------------------------

### Install Docker

Source: https://docs.openreplay.com/en/deployment/deploy-source

Installs Docker on Debian-based systems and grants the current user access to the Docker socket.

```bash
sudo apt update
sudo apt install docker.io -y
user=`whoami`
sudo chown $user /var/run/docker.sock
```

--------------------------------

### Sanitizer Function Example 1

Source: https://docs.openreplay.com/en/sdk/network-options

Example of a sanitizer function to modify request/response data. This specific example sanitizes the request body for '/auth' requests, masks an auth token in headers, and redacts a token from JSON response bodies for successful requests.

```typescript
sanitizer: (data: RequestResponseData) => {
  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';
  }

  // Sanitize response
  if (data.status < 400 && data.response.body.token) {
    data.response.body.token = "<TOKEN>"
  }

  return data
}
```

--------------------------------

### Display CLI Help

Source: https://docs.openreplay.com/en/deployment/openreplay-admin

Run the CLI with the -h option to display all available commands and their usage.

```bash
openreplay -h
```

--------------------------------

### Install Profiler Plugin

Source: https://docs.openreplay.com/en/plugins/profiler

Install the profiler plugin using npm. This command adds the necessary package to your project dependencies.

```bash
npm i @openreplay/tracker-profiler
```

--------------------------------

### Initialize Tracker and MobX Plugin

Source: https://docs.openreplay.com/en/plugins/mobx

Initialize the OpenReplay tracker and load the MobX plugin. Use the returned observer to track MobX observables. Ensure your project key is correctly set.

```javascript
import { observable, observe } from 'mobx';
import Tracker from '@openreplay/tracker';
import trackerMobX from '@openreplay/tracker-mobx';

const tracker = new Tracker({
  projectKey: YOUR_PROJECT_KEY,
});

// this instance can be exported and used for multiple stores
const mobxObserver = tracker.use(trackerMobX({ ...options }));

const myArray = observable(['foo', 'bar', 42]);

observe(myArray, mobxObserver)

myArray.push("Hello world"); // This mutation will be tracked
```

--------------------------------

### Configure OpenReplay Tracker

Source: https://docs.openreplay.com/en/sdk/using-or/remix

Configure the OpenReplay tracker with your project key and ingestion point. This is the recommended way to use the tracker as a singleton instance.

```javascript
import { tracker } from '@openreplay/tracker'

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});

```

--------------------------------

### Initialize OpenReplay Tracker in MainActivity

Source: https://docs.openreplay.com/en/android-sdk/init

Add this code to your MainActivity.kt file to initialize the OpenReplay tracker. Set the serverURL if not using the SaaS version and provide your project key.

```kotlin
// MainActivity.kt
import com.openreplay.tracker.OpenReplay

//...

class MainActivity : AppCompatActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		// not required if you're using our SaaS version
		OpenReplay.serverURL = "https://your.instance.com/ingest"
		// check out our SDK docs to see available options
		OpenReplay.start(
			applicationContext,
			"projectkey",
			OpenReplay.Options.defaults(),
			onStarted = {
				println("OpenReplay Started")
			})

		// ...
	}
}
```
Tokens:
Raw