ラボ
この手順は、New Relic ブラウザーを使用して Web アプリをトラブルシューティングする方法を説明するラボの一部です。 ラボの概要をまだ確認していない場合は、確認してください。
ラボを適切に実行する前に、React アプリケーションをスピンアップする必要があります。ここで、あなたは:
- React アプリケーションをスピンアップする
- シンプルなロード ジェネレーターを使用してアプリにトラフィックを送信する
ターミナル ウィンドウを開き、ラボ リポジトリのクローンを作成します。
$git clone https://github.com/newrelic-experimental/relicstaurants.gitアプリケーションのルート ディレクトリに移動し、lab ディレクトリに切り替えます。
$cd relicstaurants$git switch browser-pro-lab-material次に、依存関係をインストールし、アプリケーションを実行します。
$npm install$npm run build$npm run newstartこれにより、ブラウザで Relicstaurants アプリケーションが開きます。
配達先住所を入力し、レストランを検索して開始します。
ここに、食べ物を注文できるレストランのリストが表示されます。
レストランを選択します。
1 つまたは 2 つの商品を選択し、カートをクリックします。
PAYをクリックします。
次の偽造カード情報を入力し、 Finish paymentをクリックして注文してください。
ご注文は正常に行われました。
次に、シミュレーターを使用して、アプリケーションへのトラフィックを増やします。
別のターミナル ウィンドウで、アプリケーションのルート ディレクトリに移動し、ロード ジェネレーターを実行します。
$# Navigate to the root directiory of your simulator$cd relicstaurants/simulator$# Switch to lab branch$git switch browser-pro-lab-material$# Install the simulator's dependencies$pip3 install -r requirements.txt$# Run the simulator$python3 simulator.py====== WebDriver manager ======Current google-chrome version is 99.0.4844Get LATEST chromedriver version for 99.0.4844 google-chrome重要
この Load Generator は、コンピュータに Google Chrome がインストールされていることを前提としています。別のブラウザを使用している場合は、この手順をスキップして手動でトラフィックを生成するか、 Google Chrome をインストールしてください。
アプリケーションの実行方法がわかったので、次はインストルメント化を行います。アプリケーションとシミュレータを実行しているターミナル ウィンドウで、 <CTRL-C> を押してそれらをシャットダウンします。アプリをシャットダウンすると、コードを更新して監視ツールを導入できるようになります。
ラボ
この手順は、New Relic ブラウザーを使用して Web アプリをトラブルシューティングする方法を説明するラボの一部です。環境をセットアップしたので、 ブラウザ エージェントを使用してアプリケーションを計測します。