• /
  • EnglishEspañol日本語한국어Português
  • Inicia sesiónComenzar ahora

Te ofrecemos esta traducción automática para facilitar la lectura.

En caso de que haya discrepancias entre la versión en inglés y la versión traducida, se entiende que prevalece la versión en inglés. Visita esta página para obtener más información.

Crea una propuesta

Parte 2 del laboratorio: instrumenta tu aplicación

laboratorio

Este procedimiento es parte de un laboratorio que le enseña cómo solucionar problemas de su aplicación web con New Relic .

Cada procedimiento del laboratorio se basa en el anterior, así que asegúrese de haber completado el último procedimiento, Configurar su entorno de laboratorio, antes de comenzar este.

Su aplicación React ahora está funcionando en el browser. Quiere asegurarse de que su usuario siempre tenga la mejor experiencia en su sitio. Para eso, necesita información valiosa sobre su experiencia del usuario, como su tiempo de carga de la página.

Para lograr este objetivo, necesita instalar nuestro agente del navegador.

Instalar agente del navegador

En el lado derecho de la barra de navegación superior, haga clic en Add data.

Screenshot of the Add data button in the UI

Desplácese hacia abajo hasta Browser & mobile y seleccione Browser monitoring.

Arrow pointing to new relic browser

La UI lo guiará a través de la instalación de nuestro agente del navegador.

Seleccione Copy/paste JavaScript code para su método de implementación.

Select deployment method

Desplácese hacia abajo hasta Name your app. Asigne a su aplicación el nombre Relicstaurants y haga clic en Enable.

Enable browser agent for your app

Esto le proporciona un fragmento de código JavaScript para habilitar el monitoreo del navegador. Cópialo en tu portapapeles.

javascript code snippet to enable browser agent

Abra su aplicación en el IDE de su elección.

En el archivo public/index.html de su aplicación, pegue el fragmento de JavaScript copiado dentro de <head>.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap"
rel="stylesheet"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Relicstaurants</title>
<!--Replace these lines with your
browser monitoring code snippet -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
public/index.html

Su aplicación ahora está instrumentada con nuestro agente del navegador.

Reinicia tu aplicación

Ahora que ha instrumentado su aplicación, es hora de reiniciar su servidor local.

bash
$
npm run build
$
npm run newstart

Reinicie también su generador de carga.

bash
$
python3 simulator.py

Importante

Asegúrese de ejecutar estos comandos en las ventanas de terminal correctas. Si ya no tienes esas ventanas, sigue los pasos del procedimiento de configuración.

Ver tus datos

Su aplicación ahora envía datos del navegador a New Relic. Vea estos datos en New Relic, en Browser.

Navegue hasta New Relic e inicie sesión con su cuenta.

En la barra de navegación de la izquierda, navegue hasta Browser y seleccione Relicstaurants.

view relicstaruants

Aquí verá Page views with JavaScript errors, Core web vitals, User time on the site, Initial page load and route changes y otros datos de rendimiento de su aplicación.

view relicstaruants browser app

Ha instrumentado su aplicación para enviar datos del navegador a New Relic utilizando nuestro agente del navegador. También ves tus datos de rendimiento en New Relic. A continuación, utiliza estos datos para solucionar errores de front-end en su sitio.

laboratorio

Este procedimiento es parte de una práctica de laboratorio que le enseña cómo solucionar problemas de su aplicación web con el monitoreo de navegador New Relic. Ahora que ha instrumentado su aplicación con nuestro agente del navegador, depure errores.

Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.