We’re excited to announce that Application Insights will now automatically tell you about the performance of AJAX calls made by your web page apps. Many modern web apps load their basic structure, then use AJAX calls to load content. Failed or slow AJAX calls leave the users looking at empty web parts or stuck progress bars.
Diagnosing AJAX issues
How can you find out that you’ve got issues caused by AJAX calls? And how can you use the new features to help you fix them?
Open the browsers blade by clicking Settings, Browsers; or click through the browsers chart, Page View Duration, on the service overview blade.
The three charts: Dependency Calls, Dependency Failures and Dependency Duration, give a nice overview of how your AJAX calls are behaving. Drill into any of these charts to gather more insights.
Note: If you do not see these new charts select the Restore Defaults option.
In this case, the dependency is the AJAX server. We track AJAX calls from the browser in the same way that we track other dependencies in the server. If you open the Filters for these charts, you’ll see that we filter on device.type = “Browser.”
How can you use these charts?
Dependency Duration: Use the Dependency Duration chart to see how long responses are taking. You can decide what acceptable call durations would be for your application and compare that to the durations you see on the Dependency Duration chart.
An alternative approach would be to insert code to time how long it takes to complete a response to the user, then report it in trackMetric calls. But that would involve investing in some code, whereas you get the AJAX call durations without writing anything. Since AJAX calls are likely to be the longest and least reliable part of an operation, it’s usually enough to measure those alone. So although the exact way to monitor your app’s response time involves writing some app-specific code, this general method is much easier and almost as effective.
Dependency Calls: The Dependency Calls chart provides quick access to the number of calls made. Compare the Dependency Calls chart to Dependency Failures to gain an idea of your failure rate.
Dependency Failures: Depending on where the failure is, this typically indicates customer dissatisfaction. Anything with a response code of 400 or higher is counted as a failure. Filter the charts by URI to compare the total count of calls for that URI with the number of failures, to see how often it happens.
Under the Dependency charts there are a couple grids:
Average of Page view duration by Operation name: This grid provides the average amount of time your customer is waiting on a page to load. Drill into a specific operation name to gain more insights and discover what's slowing you down.
Total of Dependency calls by Dependency: This grid shows AJAX requests grouped by AJAX server name. Click through any chart for more detail. Some web apps just send AJAX calls to their home server, but others call on other servers. If your app is one of the latter, you’ll find it useful to look at this grid.
Slow page load
If your page makes AJAX calls synchronously while it’s loading, slow responses can be a cause of slow page loads.
On the Browsers page, there’s a grid showing Average of Page view duration by Operation Name. It shows page load times at a glance. If any page sticks out as slow to load, click through to see a blade specific to that page. Now you can see the same set of charts showing AJAX dependency calls, dependency failures, and duration but filtered just for this page name. You can drill even further into any single page view blade.
From this, you can easily determine whether the slow page loads are caused by the AJAX calls, or by something else.
Individual page load details blade
To help diagnose the problem, you can inspect individual instances of page loads. In addition to other details, there is now an added section: AJAX calls. This shows the AJAX calls made on this page, allowing you to see the calls, how long they took and how successful they were.
AJAX dependency blade
From the single page request details blade you can select a single AJAX call. Selecting a call will open a new dependency blade for this AJAX call. Here you can see specific properties for this AJAX call including full URL. Also on this blade in the Related Items section, you'll find a link to the Page View Blade that this AJAX call was made on. If you landed on an AJAX dependency blade via search, you may want to look into at the page view blade. Because AJAX dependencies are treated the same as other dependency types they are displayed similarly.
Depending on your application, collecting AJAX dependencies could result in a steep increase in your data collection rates. This increase could possibly cause your application to reach its quota sooner.
To see the breakdown of your data volume by data type go to settings and select Quota and Pricing.
You can click into charts to see more details for certain data types. AJAX collection began on December 23, 2015. If you notice a large spike in dependencies around that date, it was highly likely the AJAX collection caused it.
If you want to limit usage you have a few options:
// Default 500 - controls how many ajax calls will be monitored per page view. // Set to -1 to monitor all ajax calls on the page. maxAjaxCallsPerView: number;
3. Turn off AJAX auto collection: Learn how to Opt Out in the following section.
Please let us know…
The Application Insights team is committed to providing quality tools for developers. We would greatly appreciate any feedback or new feature recommendations.