JavaScript SDK ⁠-⁠ Инициализация SDK

Следующая строка установит трекер и SDK, позволяя вам использовать все функции трекера.

npm i @openreplay/tracker

При создании экземпляра трекера OpenReplay, вы можете предоставить несколько настроек конфигурации для настройки многих аспектов записи и процесса записи.

Вы должны установить опцию projectKey в конструкторе. Это значение можно получить в вашей панели управления OpenReplay в разделе ‘Настройки > Проекты’.

Если ваш сайт является Одностраничным приложением (SPA), используйте следующий код:

import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
});
tracker.start(); // возвращает промис с информацией о сессии (sessionID, sessionHash, userUUID)

В противном случае, если ваше веб-приложение Рендерится на сервере (SSR) (например, NextJS, NuxtJS), используйте следующий фрагмент кода. Убедитесь, что tracker.start() вызывается после запуска приложения (в useEffect или componentDidMount).

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY,
});
//...
function MyApp() {
useEffect(() => { // используйте componentDidMount в случае React Классового Компонента
tracker.start(); // возвращает промис с информацией о сессии (sessionID, sessionHash, userUUID)
}, [])
}

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY,
ingestPoint: "https://openreplay.mydomain.com/ingest", // при работе с самостоятельно размещаемой версией OpenReplay
capturePerformance: true,
__DISABLE_SECURE_MODE: true // для локального тестирования
});

Существует набор опций, которые вы можете передать конструктору. Только projectKey является обязательным.

• projectKey: string ID проекта, который вы отслеживаете.
• sessionHash?: string Хеш первоначальной сессии. Это полезно, когда сессии переходят через разные поддомены вашего веб-приложения, но вы хотите объединить их в одну запись. Если продолжение сессии невозможно (она не существует или завершена), трекер автоматически начнет новую. Также возвращается при вызове stop(). Больше деталей здесь.
• ingestPoint?: string Ваш домен OpenReplay (например, https://openreplay.mydomain.com/ingest), на который трекер будет отправлять события. Это необязательно для пользователей OpenReplay Cloud. По умолчанию: https://api.openreplay.com/ingest (указывает на OpenReplay Cloud).
• revID?: string ID ревизии вашего веб-приложения. Полезно при поиске проблем, возникающих в конкретной версии релиза.
• resourceBaseHref?: string Относится к публично доступному домену, откуда активы (стили, шрифты и иконки) могут быть загружены OpenReplay. Поскольку они необходимы для корректного воспроизведения сессии, этот параметр полезен для обхода ограничений, связанных с размещением вашего сайта (и, следовательно, активов) в частном домене. Пример: https://mysitepublic.com/assets/.
• captureIFrames?: boolean Для захвата всех iFrames одного домена в вашем веб-приложении. Если вы хотите отслеживать конкретный iFrame, просто добавьте HTML-атрибут data-openreplay-capture к тегу <iframe>. По умолчанию: true.
• disableClickmaps?: boolean Для отключения карт кликов. По умолчанию: true.
• verbose?: boolean Для включения логирования. По умолчанию: false.
• autoResetOnWindowOpen?: boolean Включите эту опцию для сброса ID сессии при открытии новой вкладки из вашего приложения. Это перезаписывает метод window.open, чтобы избежать дублирования ID сессий из-за общего хранения сессий между вкладками браузера. По умолчанию: false.
• forceSingleTab: boolean Отключает возможности записи в нескольких вкладках. По умолчанию: false.
• disableStringDict: boolean Отключает логику словаря строк (для оптимизации хранения) в записях. По умолчанию: false.

• respectDoNotTrack?: boolean Не запускать трекер, если в браузере пользователя включен флаг “не отслеживать”. По умолчанию: false.
• obscureTextEmails?: boolean Затемняет электронные адреса в текстовых элементах. Электронные адреса будут преобразованы в случайную цепочку звездочек. По умолчанию: true.
• obscureTextNumbers?: boolean Затемняет числа в текстовых элементах. Числа будут преобразованы в случайную цепочку звездочек. По умолчанию: false.
• obscureInputEmails?: boolean Затемняет электронные адреса в полях ввода. Значения электронной почты будут преобразованы в случайную цепочку звездочек. По умолчанию: true.
• obscureInputNumbers?: boolean Затемняет числа в полях ввода. Значения чисел будут преобразованы в случайную цепочку звездочек. По умолчанию: false.
• obscureInputDates?: boolean Затемняет даты в полях ввода. Значения дат будут преобразованы в случайную цепочку звездочек. По умолчанию: false.
• defaultInputMode?: 0 | 1 | 2 Стандартный режим захвата значений ввода. Соответственно: явный, затемненный или игнорируемый. По умолчанию: 1 (затемненный).

Обратите внимание, что исключенные данные затемняются или подавляются перед отправкой на серверы OpenReplay. Изменения, внесенные в вышеупомянутые опции, не могут быть ретроактивными и будут применяться только к вновь собираемым данным. См. Санитизация Данных для получения дополнительной информации.

• consoleMethods?: Array<'log' | 'info' | 'warn' | 'error' 'debug' | 'assert'> | null Указывает список методов консоли для захвата. По умолчанию: ['log', 'info', 'warn', 'error', 'debug', 'assert']
• consoleThrottling?: number Максимальное количество захватываемых записей консоли в секунду. По умолчанию: 30.

• captureExceptions?: boolean Захват исключений JavaScript и трассировок стека. По умолчанию: true.

• captureResourceTimings?: boolean Записывает временные показатели ресурсов. По умолчанию: true.
• capturePageLoadTimings?: boolean Записывает временные показатели загрузки страницы. По умолчанию: true.
• capturePageRenderTimings?: boolean Рассчитывает метрики рендеринга страницы, такие как индекс скорости, визуально полное или время до интерактивности. Требует captureResourceTimings = true. По умолчанию: true.

• capturePerformance?: boolean Для захвата метрик производительности, таких как частота кадров, потребление ЦП и памяти. По умолчанию: true.

Опция network относится к захвату сетевых запросов и полезной нагрузки для fetch и XHR.

network?: {
failuresOnly: boolean;
sessionTokenHeader: string;
ignoreHeaders: Array<string> | boolean;
capturePayload: boolean; // убедитесь, что вы санировали данные перед включением
sanitizer: (RequestResponseData) => RequestResponseData | null;
captureInIframes: boolean;
axiosInstances: AxiosInstance[];
useProxy?: boolean;
tokenUrlMatcher?: (url: string) => boolean;
}

Смотрите Сетевые Опции для примеров и подробностей о том, как редактировать конфиденциальные данные.

Опция mouse относится к захвату селекторов для кликов для создания карт кликов.

mouse?:
{
disableClickmaps?: boolean
minSelectorDepth?: number
nthThreshold?: number
maxOptimiseTries?: number
}

• disableClickmaps?: boolean Полностью отключает вычисление селекторов. По умолчанию: false.
• minSelectorDepth?: number Минимальная длина оптимизированного селектора (по умолчанию 2). Пример: body > div > div > p => body > p
• nthThreshold?: number Количество попыток селектора перед переходом к селекторам nth-child. Это дорогостоящая операция и может привести к значительным накладным расходам, не устанавливайте выше 2000. По умолчанию: 1000.
• maxOptimiseTries?: number Количество попыток оптимизации и укорочения селектора. По умолчанию: 10 000.

• connAttemptCount?: number Максимальное количество попыток повторного подключения, когда HTTP-запросы трекера не могут достичь бэкенда. По умолчанию: 10.
• connAttemptGap?: number Продолжительность между каждой попыткой повторного подключения (выраженная в мс). По умолчанию: 8000.

• __DISABLE_SECURE_MODE?: boolean Для разрешения небезопасного соединения между трекером и бэкендом на сайтах без SSL. Это должно использоваться только в целях разработки. По умолчанию: false.