Missing route changes with SPA agent

Problem

You are using the Pro + SPA agent, but you are not seeing all of the route change browser interactions you expect.

We are aware that this can be frustrating. Our ongoing goal is to improve SPA feature functionality, making it simpler and more reliable, starting with the methods we use to detect and capture route changes.

Solution

Short term solutions

To make sure all route changes are captured, you can use our SPA interaction() API. Using the interaction API will categorize the BrowserInteraction event (in the category attribute) as custom rather than a route change if no route change is in fact detected.

If your framework is exposing events that represent router activity, you can use custom instrumentation in these events. Here is an example using our API with the Angular router:

router.events.subscribe((event: Event) => {
  if (event instanceof NavigationStart) {
    let i = newrelic.interaction();
    i.setName(event.url);
    i.save();
  }
});

In this example, the router object is an instance of the Angular router (from the @angular/router module). The setName call sets the name attribute of the BrowserInteraction event to the new URL, and the save call ensures that the interaction is captured. You will need to adapt this for the needs of your own application’s framework.

If your framework does not provide routing events, then you can add this code in the event handler of the original interaction event such as click):

myButton.addEventListener('click', function() {
  let i = newrelic.interaction();
  i.setName('new URL');
  i.save();
});

Recommendation: If you do not have access to router events nor the interaction event handler, implement this as soon as possible in code that you know is the result of a user interaction.

An alternative to using the SPA API is to capture routes as PageAction events. PageAction events can be used to capture any custom data. We recommend this option as a fallback in case using the SPA interaction API does not work as expected, or to completely separate the custom instrumentation from built-in BrowserInteraction events.

Both of these solutions can ensure these events are captured, either as a BrowserInteraction event or as a PageAction event. However, they will not address recording the correct duration and related AJAX calls.

Support

If this solution does not resolve your issue, please file a support ticket, and have the following information available:

• For situations where you are seeing most route changes, but none for a particular route change you expect, attempt to evaluate the difference in the implementation of the code for that particular route. Is there something non-standard or unique about that route that you could provide to our support team?
• Document the frameworks and any libraries that might be of interest. If this is a new problem, has anything changed in your environment that has led to these interactions suddenly not being tracked?
• Note the browser agent version you are using. If you are more than a few releases behind, we will recommend that you update to the latest release, as we may have already resolved a similar issue.
• Be aware that due to the complexity of diagnosing these issues, the team will likely need access to an environment and code that demonstrates the problem for testing and research.

Cause

The browser agent attempts to be framework agnostic, as well as support coding best practices. However, there are often edge cases that will be missed that lead to you not collecting the route changes you expect. The implementation is based on instrumenting most common asynchronous browser APIs. There are cases when a web application uses some asynchronous API or uses custom or third-party code that we do not instrument, and this can result in inaccurate or missed route changes.