# General Translation Integrations: Configurar grabaciones URL: https://generaltranslation.com/es/docs/integrations/rrweb/guides/configuring-recordings.mdx Docs index: https://generaltranslation.com/llms.txt Description: Cómo configurar la captura de gt-rrweb, las capas localizadas, los controles, la automatización y el manejo del bundle. Configura cómo se capturan, se localizan a partir de tus catálogos publicados y se almacenan los recorridos del producto. En esta guía se da por hecho que ya instalaste el grabador y habilitaste los translation hashes en el [Quickstart](/docs/integrations/rrweb/quickstart). ## Monta el grabador [#mount] Monta [`GTRecorder`](/docs/integrations/rrweb/reference/recorder#gt-recorder) una sola vez dentro de tu proveedor de traducción. Los controles que estén en otras partes de la aplicación usan [`useRecorder()`](/docs/integrations/rrweb/reference/recorder#use-recorder) para iniciar y detener esa misma sesión a nivel de módulo. ```tsx title="src/RecordingTools.tsx" 'use client'; import { GTRecorder } from 'gt-rrweb'; import loadTranslations from './loadTranslations'; export default function RecordingTools() { return ( { // Guarda o sube el bundle finalizado. console.log(bundle); }} /> ); } ``` Establece `enabled={false}` cuando el grabador no deba configurar la captura ni renderizar su capa de grabación. ## Definir la región y el frame de captura [#capture-region] El grabador captura todo el documento. `contentSelector` identifica la región del producto que se enmarca durante la reproducción y, de forma predeterminada, es `main, [data-gt-content]`. ```tsx title="src/RecordingTools.tsx" ``` Elige un frame según el lugar donde vayas a incrustar el recorrido del producto: * `frame="none"` deja el diseño del documento sin cambios y reproduce por completo el viewport grabado. * `frame="16:9"` usa el frame de presentación integrado. * `frame={{ aspect: 4 / 3 }}` usa una relación de aspecto personalizada. Usa una relación personalizada finita y positiva. El cero, los valores negativos y `NaN` se comportan como `none`. **Captura con frame:** El elemento seleccionado debe usar `position: fixed` antes de grabar. Enmarcar contenido con posicionamiento estático puede desplazarlo fuera del viewport. Usa `frame="none"` cuando la aplicación no pueda aplicar ese diseño. ## Configurar la reproducción localizada [#localized-replay] `gt-rrweb` no genera traducciones durante la captura. Primero [publica tus traducciones](/docs/cli/guides/generating-translations) y luego configura el grabador para crear las capas de configuración regional a partir de esos catálogos. ### Cargar catálogos publicados Pasa un loader a través de la prop `harvest`. Recibe una configuración regional y devuelve el catálogo publicado de esa configuración regional. ```tsx title="src/RecordingTools.tsx" ``` El loader puede leer archivos locales, obtenerlos de una red de distribución de contenidos (CDN) o usar la misma fuente que tu aplicación. Asigna a `sourceLocale` la configuración regional visible durante la captura. Si lo omites, la recolección lee la cookie indicada por `localeCookieName`, cuando está configurada, y después recurre a la primera configuración regional pasada a `start()`. La configuración regional de origen resuelta debe ser igual a `locales[0]`; esa primera entrada también se incrusta como configuración regional de origen de la grabación para la reproducción. ### Elegir configuraciones regionales Pasa primero la configuración regional grabada, seguida de todas las configuraciones regionales de destino cuyo catálogo deba cargarse: ```tsx title="src/RecordButton.tsx" const { start } = useRecorder(); await start({ locales: ['en', 'es', 'fr', 'ja'], }); ``` La recolección solo se ejecuta cuando `locales` contiene al menos dos entradas. Una lista con solo el idioma de origen igualmente genera una grabación válida, pero sin capas de texto localizado. ### Hacer coincidir el contenido traducido Habilita [`_tagIds`](/docs/react/reference/config#tag-ids) para que el contenido renderizado por [``](/docs/react/reference/components/t) incluya el hash que se usa para hacer coincidir cada entrada del catálogo. Las variables y los componentes que renderizan valores conservan el valor capturado durante la grabación de origen. Las cadenas simples renderizadas por `gt()` o [`useGT()`](/docs/react/reference/hooks/use-gt) requieren una función `hashMessage` compatible del mismo flujo de hashing que el catálogo. Este es un punto de integración avanzado; `gt-rrweb` no exporta ese hasher, por lo que una configuración ordinaria debería basarse en los hashes de [``](/docs/react/reference/components/t). El contenido permanece en la configuración regional de origen cuando falta una traducción, cuando un plural o una branch no tiene una única forma renderizada, cuando el texto traducido tiene una estructura de nodos distinta o cuando una string simple interpolada no coincide con el hash de su source template. Un fallo del catálogo-loader queda aislado en esa configuración regional, por lo que las capas completadas para otras configuraciones regionales siguen disponibles. Un fallo más amplio de recolección no es grave y deja el bundle solo con el contenido de origen. ## Personalizar los controles de grabación [#controls] La capa integrada aparece durante la captura e incluye el control que detiene la sesión. Usa `labels` para reemplazar sus textos de grabación y de detención. ```tsx title="src/RecordingTools.tsx" ``` El texto en Runtime es solo visual. Tu aplicación también puede renderizar sus propios controles con [`useRecorder()`](/docs/integrations/rrweb/reference/recorder#use-recorder). ## Exponer controles a la automatización [#automation] Define `expose` cuando una prueba end-to-end o un script de automatización del navegador necesite controlar la captura. El grabador añade un identificador `window[name]` con `start` y `stop`. ```tsx title="src/RecordingTools.tsx" ``` ```js title="record.spec.js" await page.evaluate(() => window.gtRecorder.start({ locales: ['en', 'es'] })); // Recorre el flujo del producto. const bundle = await page.evaluate(() => window.gtRecorder.stop()); ``` El valor predeterminado de `expose` es `false`. Déjalo desactivado cuando la automatización del navegador no necesite acceso directo. ## Gestionar bundles completados [#bundles] Pasa `onComplete` para guardar o subir cada grabación exitosa. El callback se ejecuta una vez recolectados los overlays de configuración regional y recibe el mismo [`RecorderBundle`](/docs/integrations/rrweb/reference/recorder#recorder-bundle) que devuelve `stop()`. El package no sube ni conserva las grabaciones. Almacena el bundle serializable en JSON junto con los recursos de tu aplicación o en un almacenamiento que controles. Revisa cada bundle antes de publicarlo. Los valores introducidos en los formularios se enmascaran, pero el flujo de eventos sigue conteniendo texto visible de la página y el estado de la aplicación durante la sesión. ## 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.