Debug errors in your application

lab

This procedure is part of a lab that teaches you how to troubleshoot your web app with New Relic browser.

Each procedure in the lab builds upon the last, so make sure you've completed the last procedure, Instrument your application with our browser agent, before starting this one.

Until now, your application was working without any errors. Users were able to place their orders and were satisfied with your service. But it's time to deploy an update to your app.

Change to the scenario-1 directory and set up your environment.

bash
$
cd scenario-1
$
npm install
$
npm run build

Uh oh! You look on social media and see some confused customers:

A Twitter thread showing some users can't place an order

What's wrong with your application? Is it the overnight update causing the issue? Use New Relic browser to find out.

Important

In order to see your data in New Relic, you need to enable browser monitoring for this procedure.

Open the application in the IDE of your choice. In public/index.html file of your app, paste the browser monitoring code snippet, that you copied in the last procedure, inside the <head>.

Reproduce the issue

You've been notified by your users that they can't place an order on your site. Before you start debugging your code, reproduce the issue for yourself.

Step 1 of 6

From the root directory of the scenario, build and run your application.

bash
$
npm run build
$
npm run newstart

This opens your Reliqstaurants application in your browser.

Reliqstaurants homepage

The new outlook of Reliqstaurants looks cool.

In another terminal window, navigate to the root directory of your application, and run the load generator.

bash
$
cd browser-pro-lab-material/scenario-1/simulator
$
python3 simulator.py

The load generator helps you generate some traffic against your app so you don't have to.

Step 2 of 6

Enter your delivery address, and search for restaurants.

nearby restaurant list

Step 3 of 6

Choose a restaurant.

choose a restaurant

Step 4 of 6

Select an item or two and click on cart.

select food

Step 5 of 6

Click PAY.

checkout

Oops! your payment page is completely blank. No wonder your users haven't been able to place orders.

Broken payment page

Step 6 of 6

Observe the console in your browser's developer tools.

image showing errors in console

The console shows a bunch of errors indicating that something is wrong with your application.

Debug frontend errors

The bad news is that you've confirmed there's an error in your application. The good news is that you recently instrumented your application with our browser agent! Go to New Relic and sign into your account, if you haven't already.

Step 1 of 8

From the New Relic homepage, go to Browser.

Arrow showing navigation to browser

Step 2 of 8

Choose your Reliqstaurants application.

select Reliqstaurants app

Step 3 of 8

Here, you see all the data related to your browser application including Core web vitals, Initial page load and route change, User-centric page load times and others.

image showing Reliqstaurants summary

Tip

Not seeing your data? Make sure you enabled browser monitoring and your load generator is running.

Step 4 of 8

Scroll down to Page views with javascript errors.

image showing page views with javascript errors

Here, you see that Javascript error rate is going as high as 100%.

Step 5 of 8

Navigate to JS errors in left navigation bar.

Arrow pointing to JS errors tab

Here, you see all the JS errors along with Total error instances.

image showing JS errors

Step 6 of 8

Click on the top most error for details.

image showing error details

Here, you see errorMessage, INSTANCES, INTERACTIONS AFFECTED and other details related to your error.

Scroll down the page to see where this error is occuring.

image showing the error uri

You now know that this error is occuring on /payment URI and indeed is the one affecting your service.

Step 7 of 8

Scroll up and navigate to Error Instances tab and expand Event Log.

image showing error instances

The Event Log shows that the error Cannot read properties of undefined (reading 'toFixed') is occuring when user visits the payment page.

Step 8 of 8

Scroll down on the Error Instances page to view the Stack trace.

image showing stack trace

Here, you see the stack trace of your error.

Looking at the error details above, you now know the error affecting your services. However, the stack trace shown here is minified and it's hard to understand what's causing this error. To understand that, we need to upload the source map to un-minify the error.

Upload source map to un-minify JS error

Minified JavaScript mostly results in hard-to-understand, useless stak traces on browser's errors page. Uploading source maps converts these errors to understandable stack traces. It also provides a useful reference to code lines and makes it easier to debug. You can upload your soucre map to New Relic via UI, API or npm module.

Here, we use New Relic UI to upload source map and un-minify the JS error.

Step 1 of 5

From JS errors page, navigate to Stack trace of the error and expand it.

image showing expanded stack trace

Here, you see an option to upload source map.

Step 2 of 5

Click on find file.

image showing find file option to upload source map

This opens a file explorer window for you to upload source map from your local storage. Find and upload your source map from build/static/js directory of your project.

Tip

Source map files have a file extension of .js.map. Reliqstraurant is set to generate source maps and you find it under build/static/js directory. If you're having trouble generating source maps for your project, follow our documentation to learn how to generate one.

Step 3 of 5

Once your source map is uploaded successfully, you see your error un-minified.

image showing unminified stack trace

This shows that in your payment.js file, orderTotal.toFixed(2) is generating error and affecting your services. Let's take a closer look at this file!

Step 4 of 5

Click on Show 10 more lines above.

arrow pointing to show 10 more lines of code

Step 5 of 5

Take a closer look at the shown code.

image showing application code

There's the problem! The orderTotal variable was never assigned a value. Instead, another variable totalPrice was declared and used to calculate the total price for the order. Since orderTotal is no longer valid, calling this variable generates the error. Now that you know, you can fix the variable call in your payment service.

Summary

To recap, you observed an error in your application and used New Relic browser to:

  1. Review the error percentage
  2. Analyze the JS errors in your application
  3. Understand the error instance
  4. Debug the JS error by uploading source map

lab

This procedure is part of a lab that teaches you how to troubleshoot your web app with New Relic browser. Next, try to debug frontend slowness in your application.