The Network view allows you to see and analyze the network requests that make up each individual page load within a single user's session. You can use this view to investigate the causes of slow pages and identify performance bugs.
When we talk about "requests" in the context of the Network view, we mean the line-by-line calls for the files that build a web page or send information from the browser to another system. Any given web page in your visitor's session may make requests for:
or to send data back-and-forth between databases or APIs (systems that allow your website to share data with third-party tools).
If you've never checked out the Network view in your own browser before, you should try it!
In common web browsers like Google Chrome or Firefox, you can "right-click" and then click "Inspect" or "Inspect Element" to open the developer tools in your browser.
Then, in Developer Tools, navigate to "Network" and re-load the page. When you do, you should see all of the requests that make up the page load into view on a timeline. This is the network view, commonly referred to as a waterfall chart, and it's helpful for understanding how fast a website loads.
Here's a quick look at the Network view in a Google Chrome browser.
Opening the Network view in FullStory is similar to opening the Network view in common web browsers.
From any session, click Dev Tools > Network to open the Network view for an individual page within a single session.
In FullStory, a single customer's session may include navigations to multiple pages, but the Network tab and the waterfall chart relate to a single URL—not the whole session.
When the Network view is open, blue page icons will display on the timeline, to indicate events where the customer opened a new page. For sessions with multiple pages, use the blue (-) icon to collapse the waterfall chart for a page and the blue (+) icon to open a waterfall chart for a page.
Pages in the Network view will correspond with "Visited Page" navigation events shown in the Event stream.
The Network view shows each request for the page on a timeline that looks like a waterfall chart. Each rectangular bar represents the time for a request to complete.
When bars are stacked (aligned on the left-hand-side) this means that the requests started at the same time. It's common for the browser to have multiple open connections to receive requests in batches, so you may see that you waterfall chart looks like a set of stairs as you scroll down the view.
When bars are long (from left to right) this means that the request took longer, relatively, than the other requests in view in terms of time to complete, measured in milliseconds. Note: in FullStory's Network tab view, the timeline adjusts as you scroll down, so a long bar that you see early in your list of requests may not be as nefarious as it seems. Refer to the timeline for more context.
In FullStory, when a bar for a request shows up red, this indicates an error where the request failed. Refer to the Status column or click this request to gather more information about what went wrong.
It's important to note that failed network requests won’t be captured until the FullStory script has loaded, and even after the script has loaded, we can only identify failed XHRs (not other request types).
In the Network view, you'll find the following information for each request:
Looking for something in particular? You can use the Type tabs to filter requests...
...or start typing in the Filter text area to narrow your search by text included in the Name.
Once you've identified an interesting request (whether it looks slow or failing), you can click on the line of the request in the Network view to open the Network Request details panel.
In this panel, you can see even more information about the request, including:
With the details from the Network Request view, you'll have everything you need to investigate a slowly loading request or work with an engineer to debug further.
The FullStory team awaits your every question.Contact Us