Monitor Browser Performance and Events

Browser Agent lets you monitor web page load performance metrics and errors. You can pinpoint the performance degradation to the browser, network, or the application server.
apmdevops106
Browser Agent lets you monitor web page load performance metrics and errors. You can pinpoint the performance degradation to the browser, network, or the application server.
As an Application Owner, follow these high-level steps:
  1. Read and use this additional information that is specific to Browser Agent:
Monitor Application Performance with Browser Agent
You can monitor browser response time for your managed application and see your applications from perspectives as business services and their dependencies. A map is automatically generated from the performance and analysis of metrics, errors, and events.
Note:
Only Page Load metrics appear in the map. Metrics for structural frameworks such as AJAX do not appear in the map.
Follow these steps:
  1. In the left pane, click
    Experience View
    .
    The Experience View shows individual experience cards. Each card shows a summary. Red items indicate slow or failing transactions.
  2. Browse the cards and click the
    Notebook
    icon on a card of interest.
    The Analysis Notebook shows details about the experience. The Relationship Flow shows the transaction paths of the selected experiences. This map gives context for the event that occurred.
  3. (Optional) Select
    Type
    from the
    Perspective
    drop-down list.
  4. Analyze the map and identify the first component (the leftmost component) in a series of dependencies that indicates performance issues. This component might be the source of performance degradation in your application environment.
  5. Click a
    component
    of interest in the map.
    The Metrics tab shows the BlamePoint and W3C metrics.
  6. (Optional) On the
    Metrics
    tab, click a
    metric name
    of interest, for example: Page Hits Per Interval
    The Metrics Tree appears and shows the specific metric.
  7. Use this information to investigate performance problems.
Analyze Browser Agent Metrics
Applications that have slow performance can affect the end-user experience. You can view live data in the Metrics Tree to help analyze and solve performance problems. The tree view of agents, resources, and metrics refreshes every 15 seconds to show current metric data.
All Browser Agent metrics appear in the following path:
  • DxC Agent, Business Segment
    node. The metric path descriptions in the following sections show the
    DxC Agent
    paths.
Note:
All Browser Agent metric values are rounded down. Add link to Browser Agent Calculations section or add them individually in each subtopic below to the specific calculations.
Page Load Metrics
Browser Agent reports browser response times and events for web pages. When available, Browser Agent reports its browser response timings. Some of browsers have limitations:
  • For an initial page, there is no associated previous page unload.
  • If a page load waits for user input, this time is included in the Average Page Load Time (ms) metric.
The following table describes how Page Load metrics are calculated for browsers. The Metric Calculation column denotes the mathematical calculation that Browser Agent uses to obtain a particular metric. For example, Average Page Render Time (ms) is obtained by subtracting two event times from the browser: loadEventEnd and domComplete.
Metric
Description
Metric Calculation
Average Page Render Time (ms)
The time to render the content after the document object model (DOM) has been processed.
loadEventEnd time - domComplete time
Average Connection Establishment Time (ms)
The time for the browser to establish the TCP connection to the server.
connectEnd time - connectStart time
Average Domain Lookup Time (ms)
The time for the browser to complete the name service lookup for the domain of the current web page.
domainLookupEnd time - domainLookupStart time
Average DOM Processing Time (ms)
The time from navigation start to when the browser processes the document object model (DOM).
Note
: This time is not when all objects in the DOM are retrieved and loaded.
domComplete time - domLoading time
Average Page Load Time (ms)
The time from navigation start to when the browser loads all components and the page is complete.
loadEventEnd time - navigationStart time
Average Previous Page Unload Time (ms)
The time to unload the previously displayed page. If there is no page to unload (for example, when a browser session is started), no value is available.
unloadEventEnd time - unloadEventStart time
Average Time to First Byte (ms)
The time for the browser to receive the first byte of the response from the server or application caches.
responseStart time - requestStart time
Average Time to Last Byte (ms)
The time for the browser to receive the last byte of the response from the server or application caches.
responseEnd time - requestStart time
JavaScript Errors Per Interval
The number of JavaScript error occurrences on the monitored web page within a given interval.
Not applicable
Page Hits Per Interval
The number of occurrences the monitored web page was requested within a given interval.
Not applicable
Average Page Stall Time
The time the page request spent waiting before it could be dispatched.
(connectStart time - domainLookupEnd time) + (requestStart time - connectEnd time)
Browser Agent uses thresholds where browser metrics cannot be created and reported. Thresholds for page load, asynchronous, and JavaScript function metrics have certain default thresholds, which are configurable. The browser timings must meet the threshold limits for the metrics to be created.
Browser metrics might not be created in the Metrics Tree because they are not reported. In this case, the metrics do not appear in the Map. For example, if Average Time to First Byte (ms) is not displayed in the Metrics Tree, it does not appear in the Map.
Browser Agent reports browser response times and events for web pages. When available, Browser Agent uses the W3C Navigation Timing API to report its browser response timings. The W3C Navigation Timing API is an interface that modern browsers implement. Some of these browsers have limitations:
  • For an initial page, there is no associated previous page unload.
  • If a page load waits for user input, this time is included in the Average Page Load Time (ms) metric.
When a business transaction is not started for the top-level page, the metrics appear at:
  • Business Segment | <Page_URL_HOST>/<Page_URL_PORT> | <Page_URL_Path>
When a business transaction is started for the top-level page, the metrics appear at:
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser
Note:
When errors occur, Browser Agent increments the Page Errors Per Interval metric under the page metric path. This metric reflects the total number of JavaScript and AJAX errors on the page.
Soft Page Load Metrics
Single Page Applications make a single page request to retrieve all content for that page at initial page load. Then, the applications can dynamically obtain resources from the server and update the user interface as a result of user interactions. Many Single Page Applications use the HTML5 History APIs and URI location hash properties to indicate logical user navigation on the same single web page. This type of logical user navigation that triggers route change without full page reload is referred to as soft page navigation. Browser Agent monitors the load time of soft pages and reports the Average Page Load Time (ms) metric. Browser Agent also monitors the number of occurrences in which the monitored soft page was visited within a given interval. Browser Agent reports this number as the Page Hits Per Interval metric. This information provides a more comprehensive insight into end-user experience of Single Page Applications.
The following metrics are available for Single Page Applications and soft page navigation. These metric calculations use the variables:
  • TSPE = Time when soft navigation (route change without page load) starts
  • TSPS = Time when soft page finishes loading
Metric
Description
Metric Calculation
Average Page Load Time (ms)
The average time from when soft navigation (route change without page load) occurs to when the soft page finishes loading.
TSPE - TSPS
Page Hits Per Interval
The number of occurrences that the monitored soft page was visited within a given interval.
Not applicable
When a soft page navigation occurs, its Average Page Load Time (ms) and Page Hits Per Interval metrics show under the Soft Page Hash node of the top-level page:
  • Business Segment | <Page_URL_HOST>/<Page_URL_PORT> | <Page_URL_Path> | <Page_Path> | <Soft_Page_Hash>
When a business transaction is started for the top-level page, the soft page metrics appear at:
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser | <Soft Page_Hash>
AJAX Metrics
For web applications, Browser Agent can provide browser response timings for dynamic web pages in structural frameworks such as AJAX (Asynchronous JavaScript and XML).
Browser Agent does not support:
  • Nested AJAX callbacks
  • Synchronous AJAX requests
  • Callback functions such as
    XMLHttpRequest.onerror
    and
    XMLHttpRequest.ontimeout
    . (Callback execution times are supported for
    XMLHttpRequest.onreadystatechange
    and
    XMLHttpRequest.onload
    .)
    Icon
    Note:
    For more information about support, see the Product Compatibility Matrix.
The following metrics are available for frameworks using AJAX. These metric calculations use the variables:
  • TSE = Time when the AJAX send call terminates
  • TFB = Time when the browser receives the First Byte of the server response
  • TLB = Time when the browser receives the Last Byte of the server response
  • TCS = Time when the AJAX callback execution begins
  • TCE = Time when the AJAX callback execution ends
Metric
Description
Metric Calculation
Average Callback Execution Time (ms)
The average time for the
XMLHttpRequest.onreadystatechange
or
XMLHttpRequest.onload
call-back functions to process the server response.
TCE - TCS
Invocation Count per Interval
The total number of times the AJAX request was made in a given interval.
Not applicable
Average Time to First Byte (ms)
The average time from the moment the AJAX request is issued for an HTTP resource until the reception of the first byte of the server response.
TFB - TSE
Average Resource Load Time (ms)
The average time from the moment the AJAX request is issued for an HTTP resource until the AJAX callback (the function responsible for receiving and processing the server data) completes.
TCE - TSE
Average Response Download Time (ms)
The average time between the reception of the first byte and the last byte of the server response.
TLB - TFB
Note:
For AJAX calls, Average Response Download Time (ms) and Average Callback Execution Time (ms) metrics are reported independently. These metrics might not be reported due to limitations of certain AJAX frameworks, in particular, for AJAX calls through jQuery 1.x.
  • Browser Agent might not report Average Callback Execution Time (ms) for the initial AJAX call.
  • Browser Agent might not report Average Response Download Time (ms) and Average Time to First Byte (ms).
An AJAX call can occur on the top-level page or on the soft page. The AJAX metrics are categorized into asynchronous (Async) and synchronous (Sync) requests:
Synchronous AJAX Metrics
When a business transaction is not started for the top-level page, the AJAX metrics appear under the Resources node of the page.
  • Business Segment | <HOST/PORT> | <Page_Path> | Resources | AJAX Call | Sync | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
  • Business Segment | <HOST/PORT> | <Page_Path> | <Soft_Page_Hash> | Resources | AJAX Call | Sync | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
When a business transaction is started for the top-level page, the AJAX metrics appear at:
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser | Resources | AJAX Call | Sync | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser | <Soft_Page_Hash> | Resources | AJAX Call | Sync | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
When a business transaction is started for the AJAX call, it takes priority over the business transaction that is started for the top-level page. The AJAX metrics appear at:
  • Business Segment | <Business_Service_AJAX> | <Business_Transaction_AJAX> | <Business_Transaction_Component_AJAX> | Browser | Resources | AJAX Call | Sync | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
Asynchronous AJAX Metrics
When a business transaction is not started for the top-level page, the AJAX metrics appear under the Resources node of the page.
  • Business Segment | <HOST/PORT> | <Page_Path> | Resources | AJAX Call | Async | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
  • Business Segment | <HOST/PORT> | <Page_Path> | <Soft_Page_Hash> | Resources | AJAX Call | Async | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
When a business transaction is started for the top-level page, the AJAX metrics appear at:
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser | Resources | AJAX Call | Async | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser | <Soft_Page_Hash> | Resources | AJAX Call | Async | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
When a business transaction is started for the AJAX call, it takes priority over the business transaction that is started for the top-level page. The AJAX metrics appear at:
  • Business Segment | <Business_Service_AJAX> | <Business_Transaction_AJAX> | <Business_Transaction_Component_AJAX> | Browser | Resources | AJAX Call | Async | <AJAX_URL_HOST>/<AJAX_URL_PORT> | <AJAX_URL_Path>
Note:
When an AJAX call has an error, Browser Agent increments the Resource Errors Per Interval metric under the AJAX metric path.
Web Resource Metrics
Browser Agent reports web resource metrics for all resources on the page such as image, CSS, and JavaScript. Web pages are built from content that is not displayable from the initial download of the page itself. This content can be in the form of images, sound, or other media. For example, a web application can use content delivery services to host images and also include embedded advertisements. These supporting items that the page references and downloads are named resources. As an analyst, you must understand if poor performance of an application is due to the application or to the web resources, which might be provided from a third party.
Web Resource Metrics for all other resources on the page appear under the Resources, HTML node of the page:
  • Business Segment | <Page_URL_HOST>/<Page_URL_PORT> | <Page_URL_Path> | <Page_Path> | Resources | HTML | <Resource_URL_HOST>/<Resource_URL_PORT> | <Resource_URL_Path>
  • Business Segment | <Page_URL_HOST>/<Page_URL_PORT> | <Page_URL_Path> | <Soft_Page_Hash> | Resources | HTML | <Resource_URL_HOST>/<Resource_URL_PORT> | <Resource_URL_Path>
When a business transaction is started for the page, the Web Resource metrics appear at:
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser | Resources | HTML | <Resource_URL_HOST>/<Resource_URL_PORT> | <Resource_URL_Path>
  • Business Segment | <Business_Service> | <Business_Transaction> | <Business_Transaction_Component> | Browser | <Soft_Page_Hash> | Resources | HTML | <Resource_URL_HOST>/<Resource_URL_PORT> | <Resource_URL_Path>
Follow these steps:
  1. In the left pane, click
    Metrics
    .
    The Metrics Tree lists metrics and other information in a tree format. The high-level nodes immediately under domain nodes represent agents that are installed on individual application server hosts or the equivalent. A node is where specific metric information is gathered and displayed in the agent-centric tree view. When you expand a node, you can view and search more detailed metric information.
  2. Expand
    DxC Agent, Business Segment
    node.
    The tree view of agents, resources, and metrics refreshes every 15 seconds to show current metric data.
  3. View browser metrics by navigating the nodes.
  4. (Optional) Share the URL with your colleagues so they can see the same view of the particular metric in the tree.
Analyze Errors
Web applications use JavaScript for actions such as:
  • Accepting user information
  • Providing transitional effects
  • Rendering and even presenting complex data
A nonfunctional section of a web page likely attributes to a JavaScript or an AJAX error. Browser Agent JavaScript and AJAX error monitoring provides visibility into those erroneous situations.
JavaScript Errors
JavaScript error handling can be local with try-and-catch blocks, and global with event handlers. Browser Agent uses a global error handler to capture all uncaught JavaScript errors in the current browser window. Browser Agent can:
  • Report the number of JavaScript errors in the Page Errors Per Interval metric. This metric appears under the page metric path in the appropriate business transaction or URL context.
  • Collect information about native and custom JavaScript errors within the browser window, such as line and column number, timestamp, and stack trace of the error.
  • Generate error snapshots per error with error details.
AJAX Errors
AJAX status codes might indicate a problem with your AJAX endpoints. Browser Agent reports all AJAX calls that have the following response HTTP status codes as AJAX errors:
  • 4XX Client error
  • 5XX Server error
Browser Agent also captures information about an error response to help you understand problems for each of your AJAX calls. Browser Agent can:
  • Report the total number of AJAX errors on the page in Page Errors Per Interval metric. This metric appears under the page metric path in the appropriate business transaction or URL context.
  • Report Resource Error Per Interval under the AJAX metric path in the appropriate business transaction or URL context.
  • Capture information about an error response:
    • Response status code, for example: 404
    • Response status text, for example: Not Found
    • Any custom error messages from jQuery, for example, a JSON parser error message and stack trace
Analyze Errors from the Error Snapshot
Browser Agent creates an individual JavaScript or AJAX error snapshot per error. Each error that occurs on a monitored web page within an interval contains the following information:
  • Browser name
  • Browser version
  • Web page URL within which the error occurred
  • Error description as reported by the browser
  • Error line number as reported by the browser
  • Error column number as reported by the browser
  • Source file name as reported by the browser
View the error snapshot to see more information about the error including the call path and the parameters. Every 15 seconds, an individual error snapshot shows the JavaScript or AJAX errors that occurred in that interval.
Follow these steps:
  1. Click the
    Business Transactions
    tab.
    A summary list shows traces that correspond to the component. The segments show the duration times. The segments are color-coded to indicate any problem that is associated with a transaction, for example, red indicates an error.
  2. Click a transaction trace of interest.
    Individual transaction components appear in a graphical stack (wedding cake).
  3. Click a red business segment of interest, for example, for a JavaScript error:
    Business Segment | <Page_Path> or <business transaction>/jserrors/error_SyntaxError.jsp (0 ms)
  4. View
    Component Details
    and view the error details.
    Note:
    Not all browsers can provide a stack trace. For example, Internet Explorer 10, Microsoft Edge, and Safari 9.x do not provide stack traces.
  5. Identify the components that appear to cause the problem, and then follow the issue resolution process for your organization.