# General Translation Integrations: Настройка записей
URL: https://generaltranslation.com/ru/docs/integrations/rrweb/guides/configuring-recordings.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Как настроить захват в gt-rrweb, локализованные оверлеи, элементы управления, автоматизацию и работу с бандлом.

Настройте, как пошаговые обзоры продукта записываются, локализуются на основе опубликованных каталогов и сохраняются.

Это руководство предполагает, что вы уже установили рекордер и включили хеши переводов, следуя разделу [Quickstart](/docs/integrations/rrweb/quickstart).

## Монтирование рекордера [#mount]

Смонтируйте [`GTRecorder`](/docs/integrations/rrweb/reference/recorder#gt-recorder) один раз внутри провайдера перевода. Элементы управления в других частях приложения используют [`useRecorder()`](/docs/integrations/rrweb/reference/recorder#use-recorder) для запуска и остановки той же сессии на уровне модуля.

```tsx title="src/RecordingTools.tsx"
'use client';

import { GTRecorder } from 'gt-rrweb';
import loadTranslations from './loadTranslations';

export default function RecordingTools() {
  return (
    <GTRecorder
      harvest={{
        loadTranslations,
        sourceLocale: 'en',
      }}
      onComplete={(bundle) => {
        // Сохраните или выгрузите готовый бандл.
        console.log(bundle);
      }}
    />
  );
}
```

Укажите `enabled={false}`, если рекордер не должен настраивать захват и отображать оверлей записи.

## Настройка области захвата и кадра захвата [#capture-region]

Рекордер захватывает весь документ. `contentSelector` задаёт область продукта, попадающую в кадр захвата при воспроизведении; по умолчанию — `main, [data-gt-content]`.

```tsx title="src/RecordingTools.tsx"
<GTRecorder contentSelector="main" frame="16:9" />
```

Выберите кадр захвата в зависимости от того, куда вы будете встраивать пошаговый обзор продукта:

* `frame="none"` оставляет разметку документа без изменений и воспроизводит весь записанный видимый участок.
* `frame="16:9"` использует встроенный презентационный кадр захвата.
* `frame={{ aspect: 4 / 3 }}` задаёт собственное соотношение ширины и высоты.

Используйте конечное положительное пользовательское соотношение. Ноль, отрицательные значения и `NaN` обрабатываются так же, как `none`.

<Callout type="warn">
  **Захват в кадр:** Выбранный элемент должен использовать `position: fixed` до
  начала записи. Помещение в кадр контента со static-позиционированием может
  вывести его за пределы видимой области. Используйте `frame="none"`, если приложение не может применить такую разметку.
</Callout>

## Настройка локализованного воспроизведения [#localized-replay]

`gt-rrweb` не создаёт переводы во время захвата. Сначала [опубликуйте переводы](/docs/cli/guides/generating-translations), а затем настройте рекордер так, чтобы он строил оверлеи локалей на основе этих каталогов.

### Загрузка опубликованных каталогов

Передайте загрузчик через проп `harvest`. Он принимает локаль и возвращает опубликованный каталог для этой локали.

```tsx title="src/RecordingTools.tsx"
<GTRecorder
  harvest={{
    loadTranslations,
    sourceLocale: 'en',
  }}
/>
```

Загрузчик может читать локальные файлы, обращаться к сети доставки контента (CDN) или использовать тот же источник, что и ваше приложение. Укажите в `sourceLocale` локаль, которая отображалась во время захвата. Если её не указать, при сборе считывается cookie-файл с именем, заданным в `localeCookieName` (если он настроен), а затем используется первая локаль, переданная в `start()`. Разрешённая исходная локаль должна совпадать с `locales[0]`; эта первая запись также встраивается в запись как её исходная локаль для воспроизведения.

### Выбор локалей

Сначала укажите локаль записи, а затем все целевые локали, каталоги которых нужно загрузить:

```tsx title="src/RecordButton.tsx"
const { start } = useRecorder();

await start({
  locales: ['en', 'es', 'fr', 'ja'],
});
```

Сбор выполняется только в том случае, если `locales` содержит не менее двух записей. Список, состоящий только из исходной локали, всё равно даёт корректную запись, но без локализованных оверлеев.

### Сопоставление переведённого контента

Включите [`_tagIds`](/docs/react/reference/config#tag-ids), чтобы контент, отрендеренный компонентом [`<T>`](/docs/react/reference/components/t), содержал хеш, по которому сопоставляется каждая запись каталога. Переменные и компоненты, отображающие значения, сохраняют значение, захваченное во время исходной записи.

Для простых строк, отрендеренных через `gt()` или [`useGT()`](/docs/react/reference/hooks/use-gt), требуется совместимая функция `hashMessage` из того же конвейера хеширования, что и каталог. Это продвинутая точка интеграции; `gt-rrweb` не экспортирует этот хешер, поэтому при обычной настройке следует полагаться на хеши [`<T>`](/docs/react/reference/components/t).

Содержимое остаётся в исходной локали, если перевод отсутствует, у plural или branch нет единственной отрисованной формы, структура узлов переведённого текста отличается либо интерполированная «голая» строка не совпадает по хешу с исходным шаблоном. Сбой загрузчика каталога изолирован в пределах этой локали, поэтому готовые оверлеи для других локалей остаются доступными. Более широкий сбой сбора не является критическим — в этом случае бандл остаётся только с исходным содержимым.

## Настройка элементов управления записью [#controls]

Встроенный оверлей отображается во время захвата и содержит элемент управления, который останавливает сессию. С помощью `labels` можно заменить в нём текст о записи и кнопки остановки.

```tsx title="src/RecordingTools.tsx"
<GTRecorder
  labels={{
    rec: 'Capturing walkthrough',
    stop: 'Finish recording',
  }}
/>
```

Формулировки в рантайме влияют только на внешний вид. Ваше приложение также может отрисовывать собственные элементы управления с помощью [`useRecorder()`](/docs/integrations/rrweb/reference/recorder#use-recorder).

## Предоставление элемента управления автоматизации [#automation]

Задайте `expose`, если end-to-end тест или скрипт браузерной автоматизации должен управлять захватом. Рекордер добавляет объект `window[name]` с методами `start` и `stop`.

```tsx title="src/RecordingTools.tsx"
<GTRecorder expose="gtRecorder" />
```

```js title="record.spec.js"
await page.evaluate(() => window.gtRecorder.start({ locales: ['en', 'es'] }));
// Пройдите нужный сценарий в продукте.
const bundle = await page.evaluate(() => window.gtRecorder.stop());
```

`expose` по умолчанию имеет значение `false`. Оставьте его отключённым, если браузерной автоматизации не нужен прямой доступ.

## Обработка готовых бандлов [#bundles]

Передайте `onComplete`, чтобы сохранять или загружать каждую успешную запись. Этот callback вызывается после сбора оверлеев локалей и получает тот же [`RecorderBundle`](/docs/integrations/rrweb/reference/recorder#recorder-bundle), который возвращает `stop()`.

Пакет не загружает и не сохраняет записи. Храните сериализуемый в JSON бандл вместе с ресурсами вашего приложения или в подконтрольном вам хранилище.

<Callout type="warn">
  Проверяйте каждый бандл перед публикацией. Значения полей форм маскируются, но поток событий по-прежнему содержит видимый текст страницы и состояние приложения на момент сессии.
</Callout>

## Next steps

- /docs/integrations/rrweb/guides/recording-walkthroughs
- /docs/integrations/rrweb/guides/replaying-recordings

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.