---
title: View SPA data in Browser UI
source: https://docs.newrelic.com/docs/browser/single-page-app-monitoring/use-spa-data/view-spa-data-browser-ui
---

If you have opted in to [SPA (single-page app) monitoring](https://docs.newrelic.com/docs/browser/single-page-app-monitoring/get-started/welcome-single-page-app-monitoring), the browser **Page views** page will include data on SPA route changes and initial page loads.

![spa_overview.png](https://docs.newrelic.com/images/browser_screenshot-full_spa-pageviews.webp "spa_overview.png")

**[one.newrelic.com > All capabilities](https://one.newrelic.com/all-capabilities) > Browser > (select an app) > Page views**: When you [opt in to SPA monitoring](https://docs.newrelic.com/docs/browser/single-page-app-monitoring/get-started/add-apps-single-page-app-monitoring), the browser **Page views** page will display SPA data like route changes and associated asynchronous browser activity.

## Single-page app (SPA) data [#app-views]

To view SPA data: Go to **[one.newrelic.com > All capabilities](https://one.newrelic.com/all-capabilities) > Browser > (select an app) > Page views**.

Initial page loads and route changes are [automatically grouped](https://docs.newrelic.com/docs/browser/new-relic-browser/configuration/group-browser-metrics-urls#hierarchy) by browser interaction name. You can adjust this with your [allow list settings for segments](https://docs.newrelic.com/docs/browser/new-relic-browser/installation-configuration/url-whitelists-grouping-browser-metrics).

If you set custom route names with the [SPA API](https://docs.newrelic.com/docs/browser/new-relic-browser/browser-agent-spa-api), the custom route names will be displayed. You can change how the page loads and route changes are grouped by using the [**Group page by**](https://docs.newrelic.com/docs/browser/single-page-app-monitoring/use-spa-data/view-spa-data-new-relic-browser#group-facet) dropdown.

By default, the list of page loads and route changes displays the most time consuming views at the top of the list. You can also sort by average response time, median response time, and throughput per minute by using the **Sort by** dropdown.

To search for specific views by [grouped URL](https://docs.newrelic.com/docs/browser/new-relic-browser/configuration/group-browser-metrics-urls#hierarchy), type in the search bar below the **Sort by** dropdown. For example, to find URLs that represent your checkout page, search for `checkout`.

The charts on the initial **Page view** page display:

-   The five views with the slowest average response times
-   The five views with the highest throughput

To change the range of time being examined, use the [time picker](https://docs.newrelic.com/docs/query-your-data/explore-query-data/dashboards/manage-your-dashboard/#dash-time-picker) near the top of the page. (If you choose a time range more than eight days in the past, some filtering and grouping functionality won't be available.)

## Filter SPA views

![spa_filter.png](https://docs.newrelic.com/images/browser_screenshot-full_spa-filters.webp "spa_filter.png")

**[one.newrelic.com > All capabilities](https://one.newrelic.com/all-capabilities) > Browser > (select an app) > Page views > Filter**: Use the **Filter** to filter for route changes, initial page loads, and other attributes like location and browser type.

To view only initial page loads or only route changes, use the **Filter** dropdown. For example, to view only route changes, select **Filter > Route change**.

The filter also gives you the ability to filter by other attributes of page loads and route changes, such as app name, geographical location of the browser, and browser type. For example, to see only page loads and route changes that occurred on browsers in the city of Portland, Oregon, select **Filter > City > Portland**.

## Group SPA views [#group-facet]

You can use the **Group page by** dropdown to group the list of page views by any attribute. For example, if you want to compare the average response times by browser type, select **Group page by > userAgent**.

The combination of filtering and grouping lets you quickly find very specific data. For example, to compare how a specific URL is loading on different browsers:

1.  From the **Filter** dropdown, select **targetURL**, then select the URL you want to study.
2.  From the **Group page by** dropdown, select **userAgent**.

## SPA view details [#details]

![spa_details.png](https://docs.newrelic.com/images/browser_screenshot-full_pageview-details.webp "spa_details.png")

**[one.newrelic.com > All capabilities](https://one.newrelic.com/all-capabilities) > Browser > (select an app) > Page views > (select a view)**: Select a view from the list to see assorted details and breakdowns.

Select an individual page load or route change to see details. Selecting either will provide a breakdown of where time was spent for a [browser interaction](https://docs.newrelic.com/docs/browser/single-page-app-monitoring/understand-spa-data-structure#browser-interactions), and display that data over a time series matching the window selected in the [time picker](https://docs.newrelic.com/docs/query-your-data/explore-query-data/dashboards/manage-your-dashboard/#dash-time-picker).

Every route change view can theoretically also be an initial page load. (For example, when a route change URL is sent to someone else and they load it, that will now be considered an initial page load to New Relic.) This is why the SPA view details page has charts for both initial page loads and route changes. This allows you to compare how a view performs as an initial page load to how its performance as a route change.

There are three chart display options, selectable with the icons to the right of the **Avg initial page load time** chart title. The default display is the [color-coded stacked area chart](https://docs.newrelic.com/docs/apm/new-relic-apm/ui-functions/standard-dashboard-features). You can also switch to a [Histogram display](https://docs.newrelic.com/docs/apm/applications-menu/features/histograms-viewing-data-distribution) or a [percentile line graph](https://docs.newrelic.com/docs/apm/applications-menu/features/percentiles-comparing-ranked-data).

Also on the details page is a **Throughput** chart that combines initial page loads and route changes. The chart displays the 5 pages with the highest throughput, which are listed beneath the chart, and consolidates all other pages into **Other**.

Here are details on the specific performance data displayed for both page loads and route changes:

**Initial page load performance details**

For initial page loads, the performance details include the average backend time, frontend time, and the window onload event:

-   **Backend time** includes network, web app time, and request queuing.
-   **Frontend time** includes DOM processing, page rendering, and the time to complete all XHRs.
-   A horizontal red line shows when the window load event is fired. This corresponds to the traditional page load timing measured by the browser agent without SPA monitoring enabled. With SPA monitoring it is common to have a window load event before the **frontend time** is complete. (For more about how SPA page load timing differs from traditional page load timing, see [Understand SPA data collection](https://docs.newrelic.com/docs/browser/single-page-app-monitoring/use-spa-data/understand-spa-data-collection#page-load-timing-diff).)

**Route change performance details**

For route changes, the performance chart displays JS duration and waiting time.

-   **JS Duration** is the sum of all JavaScript execution time during the interaction, which is synchronous by definition.
-   The remaining time is called **Waiting time** and is derived by subtracting JS duration from the total duration.
-   For SPA v2.1+, JS duration only

The **Historical performance** and **Breakdown** details are similar for both page loads and route changes:

| Detail tab      | Comments                                                                                                                                                                                                                                                                                                          |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Historical data | The **Historical performance** tab displays throughput (views per minute) and [response time](https://docs.newrelic.com/docs/accounts-partnerships/education/getting-started-new-relic/glossary#response-time) charted against the same time period yesterday and last week.                                      |
| Breakdowns      | The **Breakdowns** tab lists the various components individually timed as part of an [interaction](https://docs.newrelic.com/docs/browser/single-page-app-monitoring/understand-spa-data-structure#browser-interactions). XHRs that _started_ within the span of a `BrowserInteraction` is timed and listed here. |