# Configuración de una aplicación web para utilizar CloudWatch RUM Siga los pasos de estas secciones para configurar la aplicación web con el fin de comenzar a utilizar CloudWatch RUM para recopilar datos de rendimiento de sesiones de usuarios reales. **Topics** + [Autorización a la aplicación web para enviar datos a AWS](CloudWatch-RUM-get-started-authorization.md) + [Creación de un monitor de aplicaciones de CloudWatch RUM para una aplicación web](CloudWatch-RUM-get-started-create-app-monitor.md) + [Modificación del fragmento de código para configurar el cliente web de CloudWatch RUM (opcional)](CloudWatch-RUM-modify-snippet.md) + [Inserción del fragmento de código del monitor de aplicaciones de CloudWatch en la aplicación](CloudWatch-RUM-get-started-insert-code-snippet.md) + [Prueba de la configuración del monitor de aplicaciones de CloudWatch mediante la generación de eventos de usuario](CloudWatch-RUM-get-started-generate-data.md) # Autorización a la aplicación web para enviar datos a AWS Tiene cuatro opciones para configurar la autenticación de datos: + Use Amazon Cognito y permita que CloudWatch RUM cree un nuevo grupo de identidades de Amazon Cognito para la aplicación. Este método requiere el menor esfuerzo para configurarlo. El grupo de identidades contendrá una identidad sin autenticar. Esto permite que el cliente web de CloudWatch RUM envíe datos a CloudWatch RUM sin autenticar al usuario de la aplicación. El grupo de identidades de Amazon Cognito tiene un rol de IAM adjunto. La identidad sin autenticar de Amazon Cognito permite que el cliente web asuma el rol de IAM autorizado para enviar datos a CloudWatch RUM. + Use Amazon Cognito para la autenticación. Si usa esta opción, puede usar un grupo de identidades de Amazon Cognito existente o crear uno nuevo para usarlo con este monitor de aplicaciones. Si usa un grupo de identidades existente, también debe modificar el rol de IAM que se adjunta al grupo de identidades. Use esta opción para los grupos de identidades que admiten usuarios no autenticados. Solo puede utilizar grupos de identidades dentro de una misma región. + Utilice la autenticación de un proveedor de identidades existente que ya haya configurado. En este caso, debe obtener credenciales del proveedor de identidad y la aplicación debe reenviar estas credenciales al cliente web de RUM. Use esta opción para los grupos de identidades que solo admiten usuarios autenticados. + Utilice políticas basadas en recursos para administrar el acceso al monitor de aplicaciones. Esto incluye la capacidad de enviar solicitudes sin autenticar a CloudWatch RUM sin credenciales de AWS. Para obtener más información sobre las políticas basadas en recursos y RUM, consulte [Uso de políticas basadas en recursos con CloudWatch RUM](CloudWatch-RUM-resource-policies.md). En las siguientes secciones se detallan estas opciones. ## Uso del grupo de identidades de Amazon Cognito existente Si elige usar un grupo de identidades de Amazon Cognito existente, especifique el grupo de identidades cuando agregue la aplicación a CloudWatch RUM. El grupo debe ser compatible con el acceso a identidades sin autenticar. Solo puede utilizar grupos de identidades dentro de una misma región. También debe agregar los siguientes permisos a la política de IAM asociada al rol de IAM que está asociado a este grupo de identidades. ------ #### [ JSON ] **** ``` { "Version":"2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "rum:PutRumEvents" ], "Resource": "arn:aws:rum:us-east-1:123456789012:appmonitor/app monitor name" } ] } ``` ------ Entonces, Amazon Cognito enviará el token de seguridad necesario para permitir que la aplicación tenga acceso a CloudWatch RUM. ## Proveedor de terceros Si elige utilizar la autenticación privada de un proveedor externo, debe obtener las credenciales del proveedor de identidad y reenviarlas a AWS. La mejor forma de hacerlo es a través de un *proveedor de tokens de seguridad*. Puede utilizar cualquier proveedor de tokens de seguridad, incluido Amazon Cognito con AWS Security Token Service. Para obtener más información sobre AWS STS, consulte [Bienvenido a la referencia sobre las API de AWS Security Token Service](https://docs.aws.amazon.com/STS/latest/APIReference/welcome.html). Si desea utilizar Amazon Cognito como proveedor de tokens en este contexto, puede configurar Amazon Cognito para que funcione con un proveedor de autenticación. Para obtener más información, consulte [Introducción a los grupos de identidades de Amazon Cognito (identidades federadas)](https://docs.aws.amazon.com/cognito/latest/developerguide/getting-started-with-identity-pools.html). Después de configurar Amazon Cognito para que funcione con su proveedor de identidad, también debe hacer lo siguiente: + Cree un rol de IAM con los siguientes permisos. Su aplicación utilizará este rol para acceder a AWS. ------ #### [ JSON ] **** ``` { "Version":"2012-10-17", "Statement": [ { "Effect": "Allow", "Action": "rum:PutRumEvents", "Resource": "arn:aws:rum:us-east-2:123456789012:appmonitor/AppMonitorName" } ] } ``` ------ + Agregue lo siguiente a su aplicación para que envíe las credenciales de su proveedor a CloudWatch RUM. Inserte la línea para que se ejecute después de que un usuario haya iniciado sesión en la aplicación y la aplicación haya recibido las credenciales que se utilizarán para acceder a AWS. ``` cwr('setAwsCredentials', {/* Credentials or CredentialProvider */}); ``` Para obtener más información acerca de los proveedores de credenciales en JavaScript SDK de AWS, consulte [Configuración de credenciales en un navegador web](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/setting-credentials-browser.html) en la guía para desarrolladores v3 para JavaScript SDK, [Configuración de credenciales en un navegador web](https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/setting-credentials-browser.html) en la guía para desarrolladores v2 para JavaScript SDK y [@aws-sdk/credential-providers](https://www.npmjs.com/package/@aws-sdk/credential-providers). También puede utilizar el SDK para el cliente web de CloudWatch RUM para configurar los métodos de autenticación del cliente web. Para obtener más información sobre el SDK del cliente web, consulte.[CloudWatch RUM web client SDK](https://github.com/aws-observability/aws-rum-web) (SDK del cliente web de CloudWatch RUM). # Creación de un monitor de aplicaciones de CloudWatch RUM para una aplicación web Para empezar a utilizar CloudWatch RUM con su aplicación, cree un *spp monitor* (monitor de aplicaciones). Cuando se crea el monitor de aplicaciones, RUM genera un fragmento de código para que lo pegue en su aplicación. El fragmento extrae el código del cliente de RUM. El cliente de RUM captura datos de las sesiones de usuario de la aplicación y los envía a RUM. ## Creación de un monitor de aplicaciones para una plataforma web 1. Abra la consola de CloudWatch en [https://console.aws.amazon.com/cloudwatch/](https://console.aws.amazon.com/cloudwatch/). 1. En el panel de navegación, elija **Señales de aplicación**, **RUM**. 1. Elija **Add app monitor** (Agregar monitor de aplicaciones). 1. En **App monitor name** (Nombre del monitor de aplicaciones), ingrese un nombre que se utilizará para identificar este monitor de aplicaciones en la consola de CloudWatch RUM. 1. Seleccione **Web** como plataforma. 1. En **Lista de dominios de aplicación**, ingrese los nombres de dominio registrados en los que la aplicación tenga autoridad administrativa. También puede usar un carácter comodín `*` para habilitar cualquier subdominio o dominio de nivel superior (por ejemplo, \$1.amazon.com, amazon.\$1, \$1.amazon.\$1). 1. En **Configure RUM data collection** (Configuración de la recopilación de datos de RUM), especifique si desea que el monitor de aplicaciones recopile cada uno de los siguientes elementos: + **Telemetría de rendimiento**: recopila información sobre los tiempos de carga de la página y de carga de recursos. + **Errores JavaScript**: recopila información sobre los errores de JavaScript no controlados generados por su aplicación. Puede seleccionar **Desminificar los seguimientos de pila de errores de JavaScript** para depurar los errores de JavaScript no minificados. Para usar esta característica, cargue los archivos de sus mapas de origen en un bucket o una carpeta de Amazon S3 y proporcione el URI de Amazon S3. Una vez habilitado, RUM utilizará estos mapas de origen y añadirá el seguimiento de pila no minificado para enriquecer los eventos de error de JavaScript. Tenga en cuenta que, una vez habilitada, esta característica solo procesa eventos de error de JavaScript nuevos y no se puede utilizar en datos recopilados anteriormente. Para obtener más información, consulte [Habilitación de la desminificación de seguimientos de pila de errores de JavaScript](CloudWatch-RUM-JavaScriptStackTraceSourceMaps.md). + **Errores HTTP**: recopila información sobre los errores HTTP lanzados por la aplicación. La selección de estas opciones proporciona más información sobre la aplicación, pero también genera más eventos de CloudWatch RUM y, por lo tanto, incurre en más cargos. Si no selecciona ninguno de estos, el monitor de aplicaciones seguirá recopilando eventos de inicio de sesión e ID de página para que pueda ver cuántos usuarios están utilizando la aplicación, incluidos los desgloses por tipo y versión del sistema operativo, tipo y versión del navegador, tipo de dispositivo y ubicación. 1. Seleccione **Check this option to allow the CloudWatch RUM Web Client to set cookies** (Marque esta opción para permitir que el cliente web de CloudWatch RUM configure cookies) si desea poder recopilar ID de usuario e ID de sesión de sesiones de usuario de muestra. Los ID de usuario se generan de forma aleatoria mediante RUM. Para obtener más información, consulte [Cookies del cliente web de CloudWatch RUM (o tecnologías similares)](CloudWatch-RUM-privacy.md#CloudWatch-RUM-cookies). 1. En **Session samples** (Muestras de sesiones), ingrese el porcentaje de sesiones de usuario que se utilizarán para recopilar datos de RUM. El valor predeterminado es 100 %. Si reduce este número, obtendrá menos datos, pero reducirá los cargos. Para obtener más información sobre los precios de RUM, consulte [Precios de RUM](CloudWatch-RUM.md#RUMpricing). 1. Los datos del usuario final que recopila para CloudWatch RUM se conservan durante 30 días y, luego, se eliminan. Si desea conservar copias de eventos de RUM en CloudWatch Logs y configurar el tiempo durante el cual se retendrán estas copias, elija **Check this option to store your application telemetry data in your CloudWatch Logs account** (Marque esta opción para almacenar los datos de telemetría de aplicaciones en su cuenta de CloudWatch Logs) en **Data storage** (Almacenamiento de datos). El grupo de registros de CloudWatch Logs conserva los datos durante 30 días de forma predeterminada. Puede administrar su periodo de retención de registros en la consola de CloudWatch Logs. 1. (Opcional) Elija agregar una política basada en recursos al monitor de aplicaciones para controlar quién puede enviar solicitudes `PutRumEvents` al monitor de aplicaciones. Si elige **Crear política pública**, se asociará una política de recursos al monitor de aplicaciones que permitirá a cualquier persona enviar solicitudes `PutRumEvents` al monitor de aplicaciones. Para obtener más información sobre este método, consulte [Uso de políticas basadas en recursos con CloudWatch RUM](CloudWatch-RUM-resource-policies.md). 1. Si adjuntó una política basada en recursos en el paso anterior, no necesitará firmar las solicitudes a CloudWatch RUM con credenciales de AWS, y podrá omitir la configuración de la autorización. De lo contrario, en **Autorización**, especifique si desea utilizar un grupo de identidades de Amazon Cognito nuevo o existente, o utilizar otro proveedor de identidades. Crear un nuevo grupo de identidades es la opción más sencilla ya que no requiere ningún otro paso de configuración. Para obtener más información, consulte [Autorización a la aplicación web para enviar datos a AWS](CloudWatch-RUM-get-started-authorization.md). Para llevar a cabo la creación de un nuevo grupo de identidades de Amazon Cognito se necesitan permisos administrativos. Para obtener más información, consulte [Políticas de IAM para utilizar CloudWatch RUM](CloudWatch-RUM-permissions.md). 1. (Opcional) De forma predeterminada, cuando agrega el fragmento de código de RUM a la aplicación, el cliente web inyecta la etiqueta JavaScript para supervisar el uso en el código HTML de todas las páginas de la aplicación. Para cambiar esto, elija **Configure pages** (Configurar páginas) y luego, **Include only these pages** (Incluir solo estas páginas) o **Exclude these pages** (Excluir estas páginas). Luego, especifique las páginas que desea incluir o excluir. Para especificar las páginas que desea incluir o excluir, ingrese las URL completas. Para especificar páginas adicionales, elija **Add URL** (Agregar URL). 1. Para activar el rastreo AWS X-Ray de las sesiones de usuario que el monitor de aplicaciones ofrece como muestra, seleccione **Rastreo activo** y, luego, seleccione **Rastrear mi servicio con AWS X-Ray.** Si selecciona esta opción, el monitor de aplicaciones rastreará las solicitudes `XMLHttpRequest` y `fetch` realizadas durante las sesiones de usuario de muestra. A continuación, podrá ver los seguimientos y segmentos de estas sesiones del usuario en el panel de RUM y las páginas de detalles de seguimiento y del mapa de seguimiento de X-Ray. Estas sesiones del usuario también se mostrarán como páginas de cliente en [Application Signals](CloudWatch-Application-Monitoring-Sections.md) una vez que las haya habilitado para su aplicación. Al realizar cambios de configuración adicionales en el cliente web de CloudWatch RUM, puede agregar un encabezado de seguimiento de X-Ray a las solicitudes HTTP para habilitar el seguimiento de extremo a extremo de las sesiones de usuario hasta los servicios administrados de AWS. Para obtener más información, consulte [Habilitación del seguimiento integral de X-Ray](CloudWatch-RUM-modify-snippet.md#CloudWatch-RUM-xraytraceheader). 1. (Opcional) Para agregar etiquetas al monitor de aplicaciones, elija **Tags** (Etiquetas), **Add new tag** (Agregar nueva etiqueta). Luego, en **Key** (Clave), ingrese un nombre para la etiqueta. Puede agregar un valor opcional para la etiqueta en **Valor**. Para agregar otra etiqueta, vuelva a elegir **Add new tag** (Agregar nueva etiqueta). Para obtener más información, consulte [Tagging AWS Resources](https://docs.aws.amazon.com/general/latest/gr/aws_tagging.html) (Etiquetado de recursos de ). 1. Elija **Add app monitor** (Agregar monitor de aplicaciones). 1. En la sección **Sample code** (Código de muestra), puede copiar el fragmento de código a usar para agregar a la aplicación. Le recomendamos que elija **JavaScript** o **TypeScript** y utilice NPM para instalar el cliente web de CloudWatch RUM como módulo JavaScript. De forma alternativa, puede elegir **HTML** para utilizar una red de entrega de contenido (CDN) para instalar el cliente web de CloudWatch RUM. La desventaja de utilizar una CDN es que el cliente web suele estar bloqueado por bloqueadores de anuncios. 1. Elija **Copy** (Copiar) o **Download** (Descargar) y luego elija **Done** (Hecho). # Modificación del fragmento de código para configurar el cliente web de CloudWatch RUM (opcional) Puede modificar el fragmento de código antes de insertarlo en la aplicación, si desea activar o desactivar varias opciones. Para obtener más información, consulte la [documentación del cliente web de CloudWatch RUM](https://github.com/aws-observability/aws-rum-web/blob/main/docs/cdn_installation.md). Existen cuatro opciones de configuración que definitivamente debe tener en cuenta, como se detalla en estas secciones. ## Impedir la recopilación de URL de recursos que podrían contener información personal El cliente web de CloudWatch RUM está configurado de forma predeterminada para registrar las URL de los recursos que se descargan en la aplicación. Estos recursos incluyen archivos HTML, imágenes, archivos CSS, archivos JavaScript, entre otros. En algunas aplicaciones, las URL pueden contener información de identificación personal (PII, por sus siglas en inglés). Si este es el caso de la aplicación, le recomendamos ampliamente que desactive la recopilación de URL de recursos mediante el uso de `recordResourceUrl: false` en la configuración de fragmentos de código, antes de insertarlo en la aplicación. ## Registro manual de vistas de página El cliente web registra las vistas de página de forma predeterminada cuando se carga la página por primera vez y cuando se llama a la API del historial del navegador. El ID de página predeterminado es `window.location.pathname`. Sin embargo, en algunos casos, es posible que desee anular este comportamiento e instrumentar la aplicación para registrar las visitas a las páginas mediante programación. Si lo hace, podrá controlar el ID de la página y cuándo se registrará. Por ejemplo, pensemos en una aplicación web que tenga un URI con un identificador variable, como `/entity/123` o `/entity/456`. De forma predeterminada, CloudWatch RUM genera un evento de vista de página para cada URI con un ID de página distinto que coincida con el nombre de la ruta, pero es posible que desee agruparlos por el mismo ID de página. Para ello, desactive la automatización de las vistas de página del cliente web mediante la configuración de `disableAutoPageView` y utilice el comando `recordPageView` para establecer el ID de página deseado. Para obtener más información, consulte [Configuraciones específicas de la aplicación](https://github.com/aws-observability/aws-rum-web/blob/main/docs/configuration.md) en GitHub. **Ejemplo de script incrustado:** ``` cwr('recordPageView', { pageId: 'entityPageId' }); ``` **Ejemplo de módulo de JavaScript:** ``` awsRum.recordPageView({ pageId: 'entityPageId' }); ``` ## Habilitación del seguimiento integral de X-Ray Al momento de crear el monitor de aplicaciones, seleccione **Trace my service with AWS X-Ray**; se habilitará el seguimiento de las solicitudes `XMLHttpRequest` y `fetch` hechas durante las sesiones de usuario que el monitor de aplicaciones ofrece como muestra. A continuación, podrá ver los seguimientos de estas solicitudes de HTTP en el panel de CloudWatch RUM y las páginas de detalles de seguimiento y del mapa de seguimiento de X-Ray. Estos seguimientos del lado del cliente no están conectados a seguimientos posteriores del lado del servidor de forma predeterminada. Para conectar los seguimientos del lado del cliente a los seguimientos del lado del servidor y habilitar el seguimiento de extremo a extremo, establezca la opción `addXRayTraceIdHeader` como `true` (verdadero) en el cliente web. Esto ocasiona que el cliente web de CloudWatch RUM agregue un encabezado de seguimiento de X-Ray a las solicitudes HTTP. En el siguiente bloque de código, observará un ejemplo de adición de seguimientos del lado del cliente. Algunas opciones de configuración se omiten en este ejemplo para su legibilidad. ``` ``` **aviso** La configuración del cliente web de CloudWatch RUM para agregar un encabezado de seguimiento de X-Ray a las solicitudes HTTP puede ocasionar que el uso compartido de recursos de origen cruzado (CORS) falle o invalide la firma de la solicitud si la solicitud está firmada con SigV4. Para obtener más información, consulte la [documentación del cliente web de CloudWatch RUM](https://github.com/aws-observability/aws-rum-web/blob/main/docs/cdn_installation.md). Le recomendamos ampliamente que pruebe la aplicación antes de agregar un encabezado de seguimiento de X-Ray del lado del cliente en un entorno de producción. Para obtener más información, consulte la [documentación del cliente web de CloudWatch RUM](https://github.com/aws-observability/aws-rum-web/blob/main/docs/cdn_installation.md#http). ## Envío de solicitudes sin firmar a CloudWatch RUM De forma predeterminada, el cliente web de RUM firma todas las solicitudes enviadas a RUM. Si establece `signing:false` en la configuración del cliente, las solicitudes no se firmarán cuando se envíen a CloudWatch RUM. Los datos se incorporarán a RUM solo si existe una política pública basada en recursos asociada al monitor de aplicaciones. Para obtener más información, consulte [Uso de políticas basadas en recursos con CloudWatch RUM](CloudWatch-RUM-resource-policies.md). # Inserción del fragmento de código del monitor de aplicaciones de CloudWatch en la aplicación A continuación, insertará en la aplicación el fragmento de código que haya creado en la sección anterior. **aviso** El cliente web, descargado y configurado mediante el fragmento de código, utiliza cookies (o tecnologías similares) para recopilar datos del usuario final. Antes de insertar el fragmento de código, consulte [Filtrar por atributos de metadatos en la consolaProtección de datos y privacidad de datos con CloudWatch RUM](CloudWatch-RUM-privacy.md). Si no tiene el fragmento de código que se generó previamente, puede encontrarlo si sigue las instrucciones que se describen en [¿Cómo encuentro un fragmento de código que ya he generado?](CloudWatch-RUM-find-code-snippet.md). **Para insertar el fragmento de código de CloudWatch RUM en la aplicación** 1. Inserte el fragmento de código que haya copiado o descargado en la sección anterior dentro del elemento `` de la aplicación. Insértelo antes del elemento `` o cualquier otra etiqueta ` ``` 1. Si la aplicación es una aplicación web de varias páginas, debe repetir el paso 1 para cada página HTML que desee incluir en la recopilación de datos. # Prueba de la configuración del monitor de aplicaciones de CloudWatch mediante la generación de eventos de usuario Después de insertar el fragmento de código y se esté ejecutando la aplicación actualizada, puede probarlo al generar eventos de usuario de forma manual. Le recomendamos que realice las siguientes acciones. Esta prueba incurre en cargos estándar de CloudWatch RUM. + Navegue por las páginas de su aplicación web. + Cree varias sesiones de usuario, a través de distintos navegadores y dispositivos. + Realice solicitudes. + Ocasione errores de JavaScript. Después de generar algunos eventos, podrá verlos en el panel de CloudWatch RUM. Para obtener más información, consulte [Visualización del panel de CloudWatch RUM](CloudWatch-RUM-view-data.md). Los datos de las sesiones de usuario pueden tardar hasta 15 minutos en aparecer en el panel. Si no puede ver los datos 15 minutos después de haber generado eventos en la aplicación, consulte [Solución de problemas de CloudWatch RUM](CloudWatch-RUM-troubleshooting.md).