ラボパート 2: アプリケーションを計測する

ラボ

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

ラボの各手順は前回の手順に基づいているため、この手順を開始する前に、最後の手順であるラボ環境のセットアップを完了していることを確認してください。

React アプリが起動し、ブラウザーで実行されるようになりました。ユーザーがサイトで常に最高のエクスペリエンスを得られるようにする必要があります。そのためには、ページの読み込み時間など、ユーザーのエクスペリエンスに関する洞察が必要です。

この目標を達成するには、ブラウザエージェントをインストールする必要があります。

ブラウザエージェントをインストールする

New Relicに移動し、自分のアカウントでサインインします。

上部ナビゲーションバーの右側にあるIntegrations & Agentsをクリックします。

Screenshot of the Integrations & Agents button in the UI

Browser & mobile まで下にスクロールし、 Browser monitoringを選択します。

UI は、ブラウザエージェントのインストールをガイドします。

デプロイメント方法としてCopy/paste JavaScript codeを選択します。

Name your appまで下にスクロールします。アプリにRelicstaurantsという名前を付け、 Enableをクリックします。

これにより、ブラウザーの監視を有効にする JavaScript コードスニペットが提供されます。クリップボードにコピーします。

javascript code snippet to enable browser agent

選択した IDE でアプリを開きます。

アプリの public/index.html ファイルで、コピーした JavaScript スニペットを <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

これで、アプリケーションはブラウザーエージェントでインストルメント化されました。

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

アプリケーションのインストルメント化が完了したので、ローカルサーバーを再起動します。

bash

$npm run build
$npm run newstart

Load Generator も再起動します。

bash

$python3 simulator.py

重要

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

自分のデータを見る

あなたのアプリは現在、ブラウザデータを New Relic に送信しています。 New Relic のBrowserの下にこのデータを表示します。

New Relic に移動し、自分のアカウントでサインインします。

左側のナビゲーションバーからBrowserに移動し、 Relicstaurantsを選択します。

ここには、アプリからのPage views with JavaScript errors 、 Core web vitals 、 User time on the site 、 Initial page load and route changes 、およびその他のパフォーマンスデータが表示されます。

ブラウザーエージェントを使用して New Relic にブラウザーデータを送信するようにアプリケーションをインストルメント化しました。New Relic にもパフォーマンスデータが表示されます。次に、このデータを使用して、サイトのフロントエンドエラーをトラブルシューティングします。

ラボ

この手順は、New Relic ブラウザ監視を使用して Web アプリのトラブルシューティングを行う方法を学ぶラボの一部です。アプリケーションにブラウザエージェントを組み込んだので、エラーをデバッグします。

この機械翻訳は、参考として提供されています。

ラボ パート 2: アプリケーションを計測する

ラボ

ブラウザ エージェントをインストールする.css-21sua1{background:none;border:none;width:0;padding:0;}

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

重要

自分のデータを見る

ラボ

ラボパート 2: アプリケーションを計測する

ブラウザエージェントをインストールする