Burst UI

Overview

The HeadSpin Burst UI is our analytics interface for exploring your network and app data to find and fix issues with your app.

QUICK START

1

After you connect to a GEO with our mobile app, you'll receive an e-mail with a blue button link to view your session in the Burst UI.

2

While your session data loads, you'll see a message which says "Waiting for Data". It usually takes between 3-10 seconds for the data to be loaded.

3

The info card is in the upper left. The card has the geolocation, cellular type, session name and test description. Try clicking on the pencil icon to add a meaningful name and description to your session.

4

Below the info card and map, you will find the video and Session Bursts. Each Burst represents a concentration of Issue activity detected by the HeadSpin AI. The higher the Burst, the more these issues affected performance during your session. Scrub through the video and Bursts, compare poor user experiences with high levels of impact time.

5

Click on a large Burst, the issue activity in the Burst will turn into the Issue Curve.

6

On the Issue Curve, you will see dots along the curve. Each dot associated an issue, select a dot to find out more about the issue.

7

You can also access issues from the Issue Cards, below the Issue Curve. The cards are organized by Impact Time from the largest impact time to the smallest. Begin by inspecting the Issue Cards with the largest impact time. These issues are likely affecting the user experience of your app.

8

When you select an Issue, the Issue Details will appear on the left and the associated issue activity will appear on the right under the Issue Curve. On the Network Activity Timeline, the Impacted Host will appear at the top and areas with issues will be highlighted in yellow.

9

Hover over the highlighted Issue area. On the Network Activity Timeline the TCP, TLS, Wait, and Download messages will appear showing how much time it took to complete each event. Refer to the Issue Details for ways to fix this issue.

10

Click on a message in the Network Activity Timeline to open a dialog box containing more information about the network activity. Click on the Magnifying Glass Icon to show the Message Inspector.

11

The Message Inspector will appear from the bottom. Detailed information about each network message is organized in (3) tabs: Overview, Request Headers, and Response Headers. The Message Inspector is great for comparing network messages.

BURSTS

A Burst is a concentration of continuous issue activity. Bursts highlight areas where the most issues occur.

<p class="highlight-box">The length of a Burst is based on the duration of continuous issue activity. The height of a Burst is based on the Impact Time from Issues within a Burst.</p>

How to analyze Burst data:

1. Scrub your mouse across the Bursts. Identify which activities in the video correspond with which bursts of issue activity.

2. Hover over a Burst to see an estimate of how much impact time is attributed to issues in that time interval.

3. Click on the largest Burst. The Issue Curve will appear and show you the issues inside.

ISSUE CURVE

The Issue Curve shows the amount of impact time attributed to issues in a Burst. The highest regions on the curve are typically where you will find the most issues in your app.

How to use the Issue Curve:

1. Scrub your mouse across the Issue Curve. Look for regions of slow load times or poor user experience in the video that correspond with issues on the Issue Curve.

2. Hover over each Issue to see the type of issue and its estimated Impact Time.

3. Click on an Issue to see why it's a problem, what was responsible, and to find out what you can do to fix it.

ISSUE CARDS

Each Issue Card represents a problem detected in your session. Each card corresponds with dot(s) on the Issue Curve.

<p class="hightlight-box">The Issue Cards are organized from largest to smallest impact time. When analyzing issues, begin with the issues with the largest impact time.</p>

How to use the Issue Cards:

1. Begin with the first Issue Card, which has the largest impact time.

2. Click on the card to open the associated Activity Timeline and highlight the affected regions on the Issue Curve.

3. Inspect the Activity Timeline to learn more about the Issue. Network traffic with the affected host will be sorted to the top of the Network Activity Timeline. Below the affected host you'll find network activity with other hosts in the selected Burst.

ISSUE DETAILS

Issue Details and the Activity Timeline give you detailed information about what the problem is and how to fix the issue.

<p class="highlight-box">Note: Issues are created based on benchmarks for highly efficient apps. For some apps, these benchmarks might be too restrictive. In these cases, you will need to judge when issues might not apply for your use case.</p>

How to understand the Issue Details:

1. Once you have selected an issue, the Issue Details will appear on the left and the Activity Timeline on the right.

2. The Issue Details show: the issue type, the host name (if applicable), issue impact time, issue description, and how to fix the issue.

3. Compare the Issue details with the Activity Timeline to better understand why the issue is occuring and the best way to fix it.

NETWORK ACTIVITY TIMELINE

The Network Activity Timeline is a waterfall of all the network traffic within the Burst, organized by host.

<p class="highlight-box">Note: If an Issue is selected, the host with the Issue will be sorted to the top of the waterfall.</p>

Connection Block

A connection block represents a single TCP connection used to transmit one or more HTTP requests/responses.

<p class="highlight-box">Note: Hover over network activity to see connection blocks. Click on connection blocks to see details.</p>

Default Colors:

Detail Colors (on hover):

MESSAGE INSPECTOR

The Message Inspector is a area for finding detailed information about each connection block.

<p class="highlight-box">Note: The "Inspector" button on the right side of the footer bar opens and closes the palette. The buttons on the right side of the inspector can clear and close the palette.</p>

Overview:

The Overview tabs lists the destination IP address, timestamp of creation, duration of the connection, URL, size, and timing info for an HTTP request, as well as the status code, content type, and timing info.

Request Headers:

This tab is where you will find request meta data such as: host, user agent, proxy-connection, cache info, connection info, encoding info, compression info, and server info.

Response Headers:

This tab is where you will find response meta data such as: host, user agent, proxy-connection, cache info, connection info, encoding info, compression info, and server info.