Introduction to browser monitoring

Your end-user experience depends on your entire technology stack. You need to quickly understand what's causing a customer complaint or issue.

• Did the problem come from your infrastructure, your application, or the browsers that ultimately render it?
• Is it the result of a problematic internet provider, a problem in your own data center with failing CPU or memory, or something else?
• How can you monitor and improve your core web vital (CWV) scores so you can prioritize where to focus the customer experience with your website?

With browser monitoring in New Relic, you can see, query, visualize, and set up alerts with actionable data about your end users' experience with your app. And if you're already monitoring your app with APM, you can use the APM agent to add browser monitoring for you.

Core web vitals

Real user monitoring (RUM) gives insights into actual page performance, but you also need to look into your users' perceptions of your site's performance. Pages can load content in many different ways, and users control when they interact with that content.

The browser monitoring Summary page shows important core web vital scores for:

• Largest contentful paint (LCP): how quickly your page content loads
• First input delay (FID): how quickly the browser can respond to user input
• Cumulative layout shift (CLS): how unstable is the content being loaded

You can also use the PageViewTiming event for a more real-time delivery mechanism that does not have dependencies on any other event.

More than Real User Monitoring (RUM)

Browser monitoring in New Relic provides a real user monitoring (RUM) solution that measures speed and performance as your end users navigate to your site from different web browsers, devices, operating systems, and networks.

But browser monitoring goes far beyond the initial page load.

Measure full page life cycle data

Measure full page life cycle data in the browser monitoring UI to get:

• Detailed performance data by page view popularity and user satisfaction scores (Apdex)
• Perceived performance data that measures how quickly your async or dynamic visuals and interactive page content display
• JavaScript error analytics, source maps, stack traces, and line-of-code visibility, to show you the end-user steps leading up to an error itself
• Session performance with a detailed timeline and heat map of the load and interaction events during a webpage's full life cycle
• AJAX requests indicating problems with timing, end points, and specific locations in the webpage
• Hash-based route changes, initial page loads, and activity during browser interactions for apps with single-page application (SPA) architectures

You can also customize and extend your browser and SPA monitoring via API.

Correlate front-end and back-end problems

Instrument any type of data you need, such as metrics, events, logs, and traces, so you can:

• Focus on specific geographical locations or specific types of end-user activity.
• Monitor or block specific domains.
• Compare real user browser interactions and synthetic monitoring trends with comparative charting.
• Isolate latency across a full transaction, from browser activity to time spent in network to back-end activity, with distributed tracing.
• Determine whether problems are related to specific types of browsers, platforms (mobile, desktop, etc.), or browser versions.

These tools (and more!) help your teams optimize your end users' page load experience, eliminate bugs, and troubleshoot faster across your full stack.

Get started with browser monitoring

Follow these basic steps, and you'll quickly be up and running in New Relic with browser monitoring!

1. If you haven't already, sign up for a New Relic account.
2. Install the browser agent.
3. Go to one.newrelic.com and select your browser app.
4. View the core web vitals and other summary data from your browser monitoring Summary page, then drill down into page load timing details and other UI data.