### 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/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. ``` -------------------------------- ### 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() ``` ``` -------------------------------- ### 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" } } ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 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 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 ``` -------------------------------- ### Install OpenReplay Assist with npm Source: https://docs.openreplay.com/en/plugins/assist Install the OpenReplay Assist package using npm. This is the first step before initializing the tracker. ```bash npm i @openreplay/tracker-assist ``` -------------------------------- ### 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 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) ``` -------------------------------- ### 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`. ``` -------------------------------- ### 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): Promise ``` -------------------------------- ### 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, isConditional?: boolean): Promise ### 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): 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 SDK via Cocoapods Source: https://docs.openreplay.com/en/ios-sdk/init Use this command to install the OpenReplay tracker and SDK using Cocoapods. ```bash pod 'OpenReplay', '~> 1.0.17' ``` -------------------------------- ### 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 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 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 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 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): 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. ``` -------------------------------- ### 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./ingest", projectKey: "", }) function App() { useEffect(()=> { t.use(jqueryTracker($)) t.start() async function doGet() { let resp = await $.get({ url: "http://localhost:3000" }) console.log(resp) } doGet() }, []) return (
logo

Edit src/App.js and save to reload.

Learn React
); } 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() }) ``` -------------------------------- ### 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) ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 Contents of this view are sanitized and invisible on the recording ) } ``` -------------------------------- ### 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" } ``` -------------------------------- ### 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. ``` -------------------------------- ### 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) }, []) } ``` -------------------------------- ### 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 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() } ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 } } ``` -------------------------------- ### 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 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)); } }); } } ``` -------------------------------- ### 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 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()) ``` -------------------------------- ### Initialize OpenReplay Tracker and Use Assist Plugin (SPA) Source: https://docs.openreplay.com/en/plugins/assist Configure the OpenReplay tracker with your project key and ingest point, then load the Assist plugin. This setup is 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(); ``` -------------------------------- ### 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); ``` -------------------------------- ### 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' ); }, []) ``` -------------------------------- ### 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 OpenReplay Tracker and Use Assist Plugin (SSR) Source: https://docs.openreplay.com/en/plugins/assist Configure the OpenReplay tracker and load the Assist plugin for Server-Side Rendered applications. Ensure `tracker.start()` is called in the browser environment, for example, within a `useEffect` hook. ```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 //... function MyApp() { useEffect(() => { // use componentDidMount in case of React Class Component tracker.start(); }, []) //... } ``` -------------------------------- ### 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(); ``` -------------------------------- ### 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(); ``` -------------------------------- ### 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 ``` -------------------------------- ### 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" } }); ``` -------------------------------- ### 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 = "" } 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 ``` -------------------------------- ### 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 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 ``` -------------------------------- ### Install NgRx Plugin Source: https://docs.openreplay.com/en/plugins/ngrx Install the NgRx plugin using npm. This command adds the necessary package to your project dependencies. ```bash npm i @openreplay/tracker-ngrx --save ``` -------------------------------- ### 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") }) // ... } } ``` -------------------------------- ### 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 ``` -------------------------------- ### Build and Push Backend Services Source: https://docs.openreplay.com/en/deployment/deploy-source Builds the backend components of OpenReplay and pushes them to a specified container registry. Ensure you are in the 'openreplay/backend' directory. Replace placeholders with your specific tag and username. ```bash cd openreplay/backend sudo IMAGE_TAG= PUSH_IMAGE=1 DOCKER_REPO=index.docker.io/ bash build.sh ``` -------------------------------- ### Build Frontend Docker Image Source: https://docs.openreplay.com/en/deployment/deploy-source Navigate to the frontend directory and execute the build script. Set IMAGE_TAG, PUSH_IMAGE, and DOCKER_REPO environment variables as needed. PUSH_IMAGE=1 will push the image to the repository. ```bash cd openreplay/frontend IMAGE_TAG= PUSH_IMAGE=1 DOCKER_REPO=myDockerHubID bash build.sh ``` -------------------------------- ### Start Promise Return Types Source: https://docs.openreplay.com/en/sdk/methods/start Defines the possible return types for the start method's promise, indicating success or failure. ```typescript // Successful start interface OnStartInfo { sessionID: string; sessionToken: string; userUUID: string; } const SuccessfulStart = (body: OnStartInfo): SuccessfulStart => ({ ...body, success: true, }); // Unsuccessful start const UnsuccessfulStart = (reason: string): UnsuccessfulStart => ({ reason, success: false, }); // Type for start promise return export type StartPromiseReturn = SuccessfulStart | UnsuccessfulStart; ``` -------------------------------- ### Initialize OpenReplay Tracker Source: https://docs.openreplay.com/en/tutorials/vuex This function configures and starts the OpenReplay tracker, optionally enabling user ID tracking and integrating plugins. It returns the tracker instance, user ID, and any plugin return values. ```javascript import Tracker from '@openreplay/tracker'; import {v4 as uuidV4} from 'uuid' function defaultGetUserId() { return uuidV4() } export function startTracker(config) { console.log("Starting tracker...") const getUserId = (config?.userIdEnabled && config?.getUserId) ? config.getUserId : defaultGetUserId let userId = null; const trackerConfig = { projectKey: config.projectKey } const tracker = new Tracker(trackerConfig); const pluginReturns = {} Object.keys(config?.plugins).forEach( pk => { pluginReturns[pk] = tracker.use(config?.plugins[pk]()) }) if(config?.userIdEnabled) { userId = getUserId() tracker.setUserID(userId) } console.log("tracker: user id: ", userId) tracker.start(); return { tracker, userId, ...pluginReturns } } ```