Partie 3 du laboratoire : Déboguer les erreurs dans votre application

laboratoire

Cette procédure fait partie d’un laboratoire qui vous apprend à dépanner votre application Web avec New Relic Browser.

Chaque procédure du laboratoire s'appuie sur la dernière, alors assurez-vous d'avoir terminé la dernière procédure, instrumentez votre application avec notre agent de navigateur, avant de commencer celle-ci.

Jusqu'à présent, votre application fonctionnait correctement. Les utilisateurs ont pu passer leurs commandes et ont été satisfaits de votre service. Mais maintenant que vous avez quelques informations détaillées dans votre application, vous remarquez qu'elle affiche quelques erreurs JavaScript.

Dans cette procédure, vous utilisez New Relic Browser pour découvrir la cause de ces erreurs et déboguer votre application en temps opportun.

Important

Pour voir vos données dans New Relic, vous devez activer pour cette procédure.

Si vous ne l’avez pas déjà fait, instrumentez votre application avec notre agent de navigateur.

Déboguer les erreurs du frontend

La mauvaise nouvelle est que vous avez confirmé qu'il y a des erreurs dans votre candidature. La bonne nouvelle est que vous avez récemment instrumenté votre application avec notre agent de navigateur ! Accédez à New Relic et connectez-vous à votre compte, si vous ne l'avez pas déjà fait.

Depuis la page d’accueil de New Relic, accédez à Browser et choisissez votre application Relicstaurants .

Ici, vous voyez toutes les données relatives à votre application de navigateur, y compris Page views with JavaScript errors, Core web vitals, User time on the site, Initial page load and route changes et autres.

Conseil

Vous ne voyez pas vos données ? Assurez-vous que vous avez activé monitoring des navigateurs et que votre générateur de charge est en cours d'exécution.

Avis Page views with javascript errors.

Ici, vous voyez des pics indiquant que votre application comporte des erreurs Javascript.

Cliquez sur Page views with javascript errors.

Cela vous amène à la page JS errors où vous voyez toutes les erreurs JS ainsi que l'instance d'erreur totale.

Cliquez sur l'erreur Cart cannot be empty pour plus de détails.

Ici, vous voyez errorMessage, INSTANCES, INTERACTIONS AFFECTED et d'autres détails liés à votre erreur.

Ensuite, accédez à l’onglet Error Instances .

Ici, vous voyez plus de détails liés à votre erreur particulière, notamment Event Log, Stack trace et autres.

Faites défiler la page Error Instances pour afficher le Stack trace.

Ici, vous voyez la trace d'appels de votre erreur.

En regardant les détails de l’erreur ci-dessus, vous connaissez maintenant l’erreur particulière affectant vos services. Cependant, la trace d'appels affichée ici est minifiée et il est difficile de comprendre ce qui cause cette erreur. Pour comprendre cela, nous devons télécharger la carte source pour minimiser l’erreur.

Erreur de téléchargement de la carte source pour déminifier le JS

Le JavaScript minifié génère généralement des traces d'appels difficiles à comprendre et inutiles sur la page d'erreurs du navigateur. Le téléchargement de cartes sources convertit ces erreurs en traces d'appels compréhensibles. Il fournit également une référence utile aux lignes de code et facilite le débogage. Vous pouvez télécharger votre carte source sur New Relic via UI, l'API ou le module npm.

Ici, nous utilisons UI de New Relic pour télécharger la carte source et déminifier l'erreur JS.

Depuis la page des erreurs JS, accédez à trace d'appels de l'erreur et développez-la.

Ici, vous voyez une option pour télécharger la carte source.

Cliquez sur find file.

image showing find file option to upload source map

Cela ouvre une fenêtre d'explorateur de fichiers pour vous permettre de télécharger la carte source à partir de votre stockage local. Recherchez et téléchargez votre carte source à partir du répertoire build/static/js de votre projet.

Conseil

Les fichiers de carte source ont une extension de fichier de .js.map. Relicstaurants est configuré pour générer des cartes sources et vous le trouverez sous le répertoire build/static/js . Si vous rencontrez des difficultés pour générer des cartes sources pour votre projet, suivez notre documentation pour savoir comment en générer une.

Une fois votre carte source téléchargée avec succès, vous voyez votre erreur non minifiée.

Ici, vous voyez le fichier particulier et la ligne de code qui génère cette erreur. Notez qu'à la ligne 119, le Cart cannot be empty! est associé à l'événement onClick dans le fichier components/layouts/app/app-conteneur/header/app-conteneur-header.js et déclenche également une alerte pour l'utilisateur. Regardons ce fichier de plus près !

Ouvrez l'application dans l'IDE de votre choix et accédez au fichier src/components/layouts/app/app-conteneur/header/app-conteneur-header.js . Regardez de plus près le code affiché.

import { Button, Drawer, Table } from 'antd';
import Text from 'antd/lib/typography/Text';
import { orderList } from 'atoms/order-list.atom';
import { useState } from 'react';
import { Link } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import { Logo, StyledHeader } from './app-header-styled';
import Navi from './navi-items';
import { useNavigate } from 'react-router';

const Header = () => {
  const [isSidebarVisible, setIsSidebarVisible] = useState(false);
  const [orderListState, setOrderList] = useRecoilState(orderList);
  const navigate = useNavigate();

  const onClose = () => {
    setIsSidebarVisible(false);
  };
  const handleSidebarOpen = () => {
    setIsSidebarVisible(true);
  };

  const itemQuantity = (list) => {
    let totalItemQuantity = 0;
    list.forEach((item) => (totalItemQuantity += item.count));

    return totalItemQuantity;
  };

  const handleDeleteItem = (clickedRow) => {
    const reducedData = orderListState.filter((item) =>
      item.name === clickedRow.name ? false : true
    );
    setOrderList(reducedData);
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Count',
      dataIndex: 'count',
      key: 'count',
    },
    {
      title: 'Price',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: 'Delete',
      render: (clickedRow) => (
        <Button onClick={() => handleDeleteItem(clickedRow)}>-</Button>
      ),
    },
  ];

  return (
    <StyledHeader>
      <Link to="/">
        <Logo>
          <div>Relicstaurants</div>
          <p>by New Relic</p>
        </Logo>
      </Link>
      <Navi
        sidebarVisible={handleSidebarOpen}
        orderListLength={itemQuantity(orderListState)}
      />
      <Drawer
        size="large"
        title="Cart"
        placement="right"
        onClose={onClose}
        visible={isSidebarVisible}
      >
        <Table
          dataSource={orderListState}
          columns={columns}
          pagination={false}
          summary={(pageData) => {
            let totalPrice = 0;

            pageData.forEach(
              ({ price, count }) => (totalPrice += price * count)
            );

            return (
              <>
                <Table.Summary.Row>
                  <Table.Summary.Cell colSpan={2}>Total</Table.Summary.Cell>
                  <Table.Summary.Cell>
                    <Text type="danger">{totalPrice.toFixed(2)}</Text>
                  </Table.Summary.Cell>
                </Table.Summary.Row>
                <Table.Summary.Row>
                  <Table.Summary.Cell colSpan={3}>
                    <Button
                      disabled={totalPrice > 0 ? false : true}
                      primary
                      onClick={() => {
                        setOrderList([]);
                        setIsSidebarVisible(false);
                      }}
                    >
                      Clear Cart
                    </Button>
                  </Table.Summary.Cell>
                  <Table.Summary.Cell>
                    <Button 
                      id="pay" 
                      primary 
                      onClick={() => { 
                        if (!(totalPrice > 0)) { 
                          var err = new Error('Cart cannot be empty!'); 
                          newrelic.noticeError(err);  
                          alert(err) 
                          navigate('/') 
                          setIsSidebarVisible(false); 
                        } else { 
                        navigate(`/payment`, { state: totalPrice }); 
                        setIsSidebarVisible(false); 
                        } 
                      }} 
                    > 
                      PAY 
                    </Button> 
                  </Table.Summary.Cell>
                </Table.Summary.Row>
              </>
            );
          }}
        />
      </Drawer>
    </StyledHeader>
  );
};

export default Header;

src/components/layouts/app/app-container/header/app-container-header.js

Ici, notez que l’erreur Cart cannot be empty! se produit uniquement lorsque l’utilisateur essaie accidentellement de payer avec un panier vide. La fonction est codée pour alerter l'utilisateur final qu'il ne peut pas procéder au paiement avec un panier vide. Vous savez maintenant que cette erreur n'affectera pas vos services. Cependant, il existe de meilleures façons de gérer ce cas particulier et d’éviter l’erreur.

Appuyez sur Ctrl+C dans le terminal qui exécute votre application pour arrêter de la diffuser. Mettez à jour le fichier src/components/layouts/app/app-conteneur/header/app-conteneur-header.js comme suit.

import { Button, Drawer, Table } from 'antd';
import Text from 'antd/lib/typography/Text';
import { orderList } from 'atoms/order-list.atom';
import { Message } from 'components/common';
import { useState } from 'react';
import { Link } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import { Logo, StyledHeader } from './app-header-styled';
import Navi from './navi-items';
import { useNavigate } from 'react-router';

const Header = () => {
  const [isSidebarVisible, setIsSidebarVisible] = useState(false);
  const [orderListState, setOrderList] = useRecoilState(orderList);
  const navigate = useNavigate();

  const onClose = () => {
    setIsSidebarVisible(false);
  };
  const handleSidebarOpen = () => {
    setIsSidebarVisible(true);
  };

  const itemQuantity = (list) => {
    let totalItemQuantity = 0;
    list.forEach((item) => (totalItemQuantity += item.count));

    return totalItemQuantity;
  };

  const handleDeleteItem = (clickedRow) => {
    const reducedData = orderListState.filter((item) =>
      item.name === clickedRow.name ? false : true
    );
    setOrderList(reducedData);
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Count',
      dataIndex: 'count',
      key: 'count',
    },
    {
      title: 'Price',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: 'Delete',
      render: (clickedRow) => (
        <Button onClick={() => handleDeleteItem(clickedRow)}>-</Button>
      ),
    },
  ];

  return (
    <StyledHeader>
      <Link to="/">
        <Logo>
          <div>Relicstaurants</div>
          <p>by New Relic</p>
        </Logo>
      </Link>
      <Navi
        sidebarVisible={handleSidebarOpen}
        orderListLength={itemQuantity(orderListState)}
      />
      <Drawer
        size="large"
        title="Cart"
        placement="right"
        onClose={onClose}
        visible={isSidebarVisible}
      >
        {orderListState.length > 0 ? (
          <Table
            dataSource={orderListState}
            columns={columns}
            pagination={false}
            summary={(pageData) => {
              let totalPrice = 0;

              pageData.forEach(
                ({ price, count }) => (totalPrice += price * count)
              );

              return (
                <>
                  <Table.Summary.Row>
                    <Table.Summary.Cell colSpan={2}>Total</Table.Summary.Cell>
                    <Table.Summary.Cell>
                      <Text type="danger">{totalPrice.toFixed(2)}</Text>
                    </Table.Summary.Cell>
                  </Table.Summary.Row>
                  <Table.Summary.Row>
                    <Table.Summary.Cell colSpan={3}>
                      <Button
                        disabled={totalPrice > 0 ? false : true}
                        primary
                        onClick={() => {
                          setOrderList([]);
                          setIsSidebarVisible(false);
                        }}
                      >
                        Clear Cart
                      </Button>
                    </Table.Summary.Cell>
                    <Table.Summary.Cell>
                      <Button
                        id="pay"
                        disabled={totalPrice > 0 ? false : true}
                        primary
                        onClick={() => {
                          navigate(`/payment`, { state: totalPrice });
                          setIsSidebarVisible(false);
                        }}
                      >
                        PAY
                      </Button>
                    </Table.Summary.Cell>
                  </Table.Summary.Row>
                </>
              );
            }}
          />
        ) : (
          <Message>Nothing in cart</Message>
        )}
      </Drawer>
    </StyledHeader>
  );
};

export default Header;

src/components/layouts/app/app-container/header/app-container-header.js

Ici, vous avez modifié le fichier pour afficher un message Nothing in cart au lieu d'une erreur lorsque le panier est vide. Le bouton PAY reste désactivé jusqu'à ce que l'utilisateur final ait des articles dans son panier.

Redémarrez votre application

Maintenant que vous avez corrigé votre application, il est temps de redémarrer votre serveur local.

bash

$npm run build
$npm run newstart

Redémarrez également votre générateur de charge.

bash

$python3 simulator.py

Important

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.

Une fois que le générateur de charge commence à envoyer des données à New Relic, notez que l'application ne signale plus d'erreurs JavaScript.

Résumé

Pour récapituler, vous avez observé une erreur dans votre application et utilisé le navigateur New Relic pour :

Vérifiez le pourcentage d'erreur
Analysez les erreurs JS dans votre application
Comprendre l'instance d'erreur
Déboguer l'erreur JS en téléchargeant la carte source

laboratoire

Cette procédure fait partie d’un laboratoire qui vous apprend à dépanner votre application Web avec New Relic Browser. Ensuite, essayez de déboguer la lenteur du frontend dans votre application.

Cette traduction automatique est fournie pour votre commodité.

Partie 3 du laboratoire : Déboguer les erreurs dans votre application

laboratoire

Important

Déboguer les erreurs du frontend.css-21sua1{background:none;border:none;width:0;padding:0;}

Conseil

Erreur de téléchargement de la carte source pour déminifier le JS

Conseil

Redémarrez votre application

Important

Résumé

laboratoire

Déboguer les erreurs du frontend