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

ラボ

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

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

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

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

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

Step 1 of 6

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

Step 2 of 6

上部のナビゲーションバーの右側にある Add data[データの追加]をクリックします。

Step 3 of 6

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

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

Step 4 of 6

展開方法として Copy/paste JavaScript code[JavaScript コードをコピー/貼り付け] を選択します。

Step 5 of 6

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

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

Step 6 of 6

選択した 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 に送信するようになりました。 Browserの下の New Relic でこのデータを表示します。

Step 1 of 2

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

Step 2 of 2

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

ここでは、 Page views with JavaScript errors[JavaScript エラーのあるページビュー]、 Core web vitals[主要なウェブバイタル]、 User time on the site[サイトでのユーザー時間]、 Initial page load and route changes[最初のページの読み込みとルートの変更]、アプリからのその他のパフォーマンスデータが表示されます。

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

ラボ

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

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

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

ラボ

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

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

重要

自分のデータを見る

ラボ

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

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