ラボパート 3: アプリケーションのエラーをデバッグする

ラボ

この手順は、New Relic ブラウザーを使用して Web アプリをトラブルシューティングする方法を説明するラボの一部です。

ラボの各手順は前回の手順に基づいているため、この手順を開始する前に、最後の手順で あるブラウザエージェントを使用してアプリケーションをインストルメント化するを完了していることを確認してください。

これまで、アプリケーションは正常に動作していました。ユーザーは注文を行うことができ、サービスに満足しました。しかし、アプリケーションでいくつかの洞察を得たので、いくつかの JavaScript エラーが表示されていることに気付きました。

この手順では、New Relic ブラウザーを使用してこれらのエラーの原因を突き止め、アプリケーションをタイムリーにデバッグします。

重要

New Relic でデータを表示するには、以下を有効にする必要があります。この手順のために。

まだ行っていない場合は、ブラウザエージェントを使用してアプリをインストルメント化します。

フロントエンドエラーをデバッグする

悪いニュースは、アプリケーションにいくつかのエラーがあることを確認したことです。良いニュースは、最近、アプリケーションに当社のブラウザーエージェントを組み込んだことです。アカウントにまだサインインしていない場合は、New Relic に移動してサインインします。

New Relic ホームページから Browser に移動し、 Relicstaurants アプリケーションを選択します。

ここには、ブラウザアプリケーションに関連するすべてのデータが表示されます。これには、 JavaScript エラーのあるページビュー、 主要なウェブバイタル、 サイトでのユーザー時間、 最初のページの読み込みとルートの変更などがあります。

ヒント

データが表示されませんか?ブラウザーの監視が有効になっており、Load Generator が実行されていることを確認してください。

JavaScript エラーのあるページビューに注意してください。

ここでは、アプリケーションに Javascript エラーがあることを示すスパイクが表示されます。

Page views with javascript errors[JavaScript エラーのあるページビュー]をクリックします。

これにより、 JS errors[JS エラー] ページが表示され、すべての JS エラーと合計エラーインスタンスが表示されます。

詳細については、Cart cannot be empty[カートを空にすることはできません] エラーをクリックしてください。

ここには、 errorMessage、 INSTANCES、 INTERACTIONS AFFECTED 、およびエラーに関連するその他の詳細が表示されます。

次に、 Error Instances[エラーインスタンス] タブに移動します。

ここには、 イベントログ、 スタックトレースなど、特定のエラーに関連する詳細が表示されます。

Error Instances[エラーインスタンス] ページを下にスクロールして、 Stack trace[スタックトレース]を表示します。

ここに、エラーのスタックトレースが表示されます。

上記のエラーの詳細を見ると、サービスに影響を与える特定のエラーがわかります。ただし、ここに示すスタックトレースは縮小されているため、このエラーの原因を理解するのは困難です。これを理解するには、ソースマップをアップロードしてエラーの縮小を解除する必要があります。

ソースマップをアップロードして JS エラーを非縮小化する

縮小された JavaScript は、ほとんどの場合、ブラウザーのエラーページにわかりにくく、役に立たないスタックトレースが表示されます。ソースマップをアップロードすると、これらのエラーがわかりやすいスタックトレースに変換されます。また、コード行への便利なリファレンスを提供し、デバッグを容易にします。UI、API、または npm モジュールを介してソースマップを New Relic にアップロードできます。

ここでは、New Relic UI を使用してソースマップをアップロードし、JS エラーを縮小解除します。

JS エラーページから、エラーのスタックトレースに移動し、展開します。

ここに、ソースマップをアップロードするオプションが表示されます。

find file[ファイルを検索]をクリックします。

これにより、ローカルストレージからソースマップをアップロードするためのファイルエクスプローラーウィンドウが開きます。プロジェクトの build/static/js ディレクトリからソースマップを見つけてアップロードします。

ヒント

ソースマップファイルのファイル拡張子は.js.mapです。Relicstaurants はソースマップを生成するように設定されており、 build/static/jsディレクトリにあります。プロジェクトのソースマップの生成に問題がある場合は、ドキュメントに従ってソースマップを生成する方法を学習してください。

ソースマップが正常にアップロードされると、縮小されていないエラーが表示されます。

ここに、このエラーを生成している特定のファイルとコード行が表示されます。119 行目で、Cart cannot be empty! は components/layouts/app/app-container/header/app-container-header.js ファイルの onClick イベントに関連付けられていることに注意してください。ユーザーへのアラートのトリガー。このファイルを詳しく見てみましょう。

選択した IDE でアプリケーションを開き、 src/components/layouts/app/app-container/header/app-container-header.js ファイルに移動します。表示されたコードを詳しく見てください。

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

ここで、エラー Cart cannot be empty!に注意してくださいユーザーが空のカートで誤ってチェックアウトしようとした場合にのみ発生します。この関数は、カートが空の状態ではチェックアウトに進むことができないことをエンドユーザーに警告するようにコーディングされています。このエラーがサービスに影響しないことがわかりました。ただし、この特殊なケースを処理してエラーを回避するためのより良い方法があります。

アプリケーションを実行している端末で Ctrl+C を押して、サービスの提供を停止します。 src/components/layouts/app/app-container/header/app-container-header.js を 次のように更新します。

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

ここでは、カートが空である場合にエラーの代わりにメッセージ Nothing in cart を表示するようにファイルを変更しました。エンドユーザーがカートにアイテムを入れるまで、 PAY ボタンは無効のままです。

アプリケーションを再起動します

アプリケーションを修正したので、ローカルサーバーを再起動します。

bash

$npm run build
$npm run newstart

Load Generator も再起動します。

bash

$python3 simulator.py

重要

これらのコマンドを正しいターミナルウィンドウで実行していることを確認してください。これらのウィンドウが表示されなくなった場合は、セットアップ手順の手順に従ってください。

Load Generator が New Relic へのデータ送信を開始すると、アプリケーションが JavaScript エラーを報告しなくなったことに注意してください。

概要

要約すると、アプリケーションでエラーを確認し、New Relic ブラウザーを使用して次のことを行いました。

エラー率を確認する
アプリケーションの JS エラーを分析する
エラーインスタンスを理解する
ソースマップをアップロードして JS エラーをデバッグする

ラボ

この手順は、New Relic ブラウザーを使用して Web アプリのトラブルシューティングを行う方法を説明するラボの一部です。次に、アプリケーションのフロントエンドの遅さをデバッグしてみてください。

この機械翻訳は参考用に提供されます。

ラボ パート 3: アプリケーションのエラーをデバッグする

ラボ

重要

フロントエンドエラーをデバッグする.css-21sua1{background:none;border:none;width:0;padding:0;}

ヒント

ソース マップをアップロードして JS エラーを非縮小化する

ヒント

アプリケーションを再起動します

重要

概要

ラボ

ラボパート 3: アプリケーションのエラーをデバッグする

フロントエンドエラーをデバッグする

ソースマップをアップロードして JS エラーを非縮小化する