laboratoire
Cette procédure fait partie d'un laboratoire qui vous apprend à dépanner votre application Web avec New Relic .
Chaque procédure du laboratoire s'appuie sur la précédente, assurez-vous donc d'avoir terminé la dernière procédure, Configurer votre environnement de laboratoire, avant de commencer celle-ci.
Votre application React est désormais opérationnelle dans le navigateur. Vous souhaitez vous assurer que vos utilisateurs bénéficient toujours de la meilleure expérience sur votre site. Pour cela, vous avez besoin d'informations détaillées sur l'expérience de votre utilisateur, comme son temps de chargement de page.
Pour atteindre cet objectif, vous devez installer notre agent de navigateur.
Installer l'agent du navigateur
Accédez à New Relic et connectez-vous avec votre compte.
Sur le côté droit de la barre de navigation supérieure, cliquez sur Integrations & Agents.
Faites défiler jusqu’à Browser & mobile et sélectionnez Browser monitoring.
L'UI vous guidera tout au long de l'installation de notre agent de navigateur.
Sélectionnez Copy/paste JavaScript code comme méthode de déploiement.
Faites défiler jusqu'à Name your app. Nommez votre application Relicstaurants et cliquez sur Enable.
Ceci vous donne un snippet de code JavaScript pour permettre monitoring des navigateurs. Copiez-le dans votre presse-papiers.
Ouvrez votre application dans l’IDE de votre choix.
Dans le fichier public/index.html de votre application, collez le snippet JavaScript copié à l'intérieur 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>Votre application est désormais instrumentée avec notre agent de navigateur.
Redémarrez votre application
Maintenant que vous avez instrumenté votre application, il est temps de redémarrer votre serveur local.
$npm run build$npm run newstartRedémarrez également votre générateur de charge.
$python3 simulator.pyImportant
Assurez-vous que vous exécutez ces commandes dans les bonnes fenêtres de terminal. Si vous n'avez plus ces fenêtres, suivez les étapes de la procédure d'installation.
Visualisez vos données
Votre application envoie maintenant les données du navigateur à New Relic. Afficher ces données dans New Relic, sous Browser.
Accédez à New Relic et connectez-vous avec votre compte.
Dans la barre de navigation de gauche, accédez à Browser et sélectionnez Relicstaurants.
Ici, vous voyez Page views with JavaScript errors, Core web vitals, User time on the site, Initial page load and route changes et d'autres données de performances de votre application.
Vous avez instrumenté votre application pour envoyer des données de navigateur à New Relic à l'aide de notre agent de navigateur. Vous voyez également vos données de performances dans New Relic. Ensuite, vous utilisez ces données pour résoudre les erreurs d’interface de votre site.
laboratoire
Cette procédure fait partie d'un laboratoire qui vous apprend à dépanner votre application Web avec monitoring des navigateurs New Relic. Maintenant que vous avez instrumenté votre application avec notre agent de navigateur, déboguez les erreurs.