# General Translation Integrations: Grabación de walkthroughs
URL: https://generaltranslation.com/es/docs/integrations/rrweb/guides/recording-walkthroughs.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Cómo capturar un flujo de producto con gt-rrweb, revisar la sesión y guardar su bundle de grabación.

Graba una sola vez un flujo de producto repetible y guárdalo como un bundle que podrás revisar, publicar y reproducir.

Esta guía se centra en cómo llevar a cabo una sesión de captura útil. Completa primero el [Quickstart](/docs/integrations/rrweb/quickstart).

## Antes de empezar [#before-start]

Antes de grabar:

* [Configura el grabador](/docs/integrations/rrweb/guides/configuring-recordings) para la región del producto y el frame de reproducción que necesites.
* Abre el flujo en la configuración regional de origen y restablécelo a un estado inicial predecible.
* Decide qué locales publicados quieres incluir. (Consulta [Configurar la reproducción localizada](/docs/integrations/rrweb/guides/configuring-recordings#localized-replay)).

## Iniciar y detener la captura [#capture]

Llama a [`start()`](/docs/integrations/rrweb/reference/recorder#use-recorder) primero con la configuración regional de origen y, a continuación, con cada configuración regional de destino que quieras recopilar. El grabador mantiene su sesión en el estado del módulo, por lo que un cambio de ruta que vuelva a montar tus componentes no finaliza una grabación activa.

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

await start({ locales: ['en', 'de', 'ja'] });
const bundle = await stop();
```

`status` pasa de `preparing` a `recording`, vuelve a `preparing` mientras se recolectan las traducciones y termina en `idle`. Un fallo del cargador del catálogo afecta únicamente a esa configuración regional; un fallo más amplio en la recolección no es fatal, y `stop()` se resuelve igualmente con un bundle solo de origen.

Salir de la página aborta una sesión activa sin recolectar las traducciones ni llamar a `onComplete`. Detén la grabación antes de cualquier navegación que descargue la aplicación.

## Captura el flujo de producto [#product-flow]

Una vez que `start()` se resuelve, completa la demostración en el mismo orden en que debería verla el espectador. Los clics, la navegación, los cambios en el DOM, la posición del scroll y el contenido visible de la página pasan a formar parte del flujo de eventos.

Mantén la sesión enfocada:

* Comienza desde una página y un estado de la aplicación estables.
* Haz una pausa lo bastante larga para que el contenido asíncrono se renderice antes de interactuar con él.
* Termina cuando el espectador llegue a un estado de éxito claro.
* Evita exponer estados sensibles de la aplicación.

Los valores introducidos en los formularios se enmascaran y se omite la telemetría de movimiento del ratón. Revisa la grabación terminada antes de publicarla, ya que el resto del texto y del estado visibles permanecen en el flujo de eventos.

Agrega la clase `rr-block` de rrweb a los controles del operador o a cualquier otro elemento que no deba aparecer en la grabación:

```tsx
<div className="rr-block">
  <RecordingControls />
</div>
```

## Controlar las grabaciones desde la automatización [#automation]

Para automatizar una grabación con un script desde una prueba end-to-end, configura la opción `expose` del grabador. El manejador `window[name]` resultante proporciona las mismas funciones `start` y `stop`.

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

```js title="record.spec.js"
await page.evaluate(() => window.gtRecorder.start({ locales: ['en', 'es'] }));
// ... ejecuta el flujo
const bundle = await page.evaluate(() => window.gtRecorder.stop());
```

## Almacenar el bundle [#store-bundle]

Serializa el [`RecorderBundle`](/docs/integrations/rrweb/reference/recorder#recorder-bundle) devuelto como JSON y guárdalo junto con los recursos de tu aplicación o en tu propio almacenamiento. El package no sube las grabaciones a ningún sitio.

Puedes almacenar el bundle completo o únicamente `bundle.events`. Los metadatos de configuración regional y de overlay van incrustados en el flujo de eventos, de modo que el reproductor puede recuperar la reproducción localizada cuando una exportación que solo contiene eventos se envuelve después como `{ events }`.

<Callout type="warn">
  Revisa cada grabación antes de publicarla. Los valores de input se enmascaran, pero el flujo de eventos sigue conteniendo el texto visible de la página y el estado de la aplicación durante la sesión.
</Callout>

## Next steps

- /docs/integrations/rrweb/guides/configuring-recordings
- /docs/integrations/rrweb/guides/replaying-recordings

## Sitemap

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