[BUG] Durations reported as zero (00:00:00.000) in Angular SPA for router changes

[davidyee]

Description/Screenshot
We are using Application Insights on our Angular 8+ applications and have been noticing that despite having enableAutoRouteTracking: true enabled that durations are being reported in the Azure Portal as either 0 seconds or the initial duration that the page took when the SPA was first loaded.

The initial data sent to the App Insights /track when our SPA is first loaded in the browser appear to make sense; however, it's the latter requests that are sent to App Insights that don't really make a lot of sense. The next requests that occur when performing routing within our Angular app appear to send two /track requests with data that includes both a duration of zero seconds and a duration of the same time for when the app was first loaded.

The following screenshot depicts the information sent with a few visual highlights:

Raw JSON header data sent (same as picture above)

Initial request:

[
{
  "time": "2021-04-28T20:24:43.517Z",
  "iKey": "f2cbfad8-8aa2-45b0-9405-xxxxxxxxxxxx",
  "name": "Microsoft.ApplicationInsights.f2cbfad88aaxxxxxxxxxxxxxxxxxxxxx.Pageview",
  "tags": {
    "ai.user.authUserId": "employee@contoso.ca",
    "ai.user.id": "8K25sesCaEGgafRLcgZ+OI",
    "ai.session.id": "DSvgKvpN4PeSZWggVCaTZy",
    "ai.device.id": "browser",
    "ai.device.type": "Browser",
    "ai.operation.name": "/pages/dashboard",
    "ai.operation.id": "248f75ea3e4a46988ca64ec9df3b3f98",
    "ai.internal.sdkVersion": "javascript:2.6.2",
    "ai.internal.snippet": "-"
  },
  "data": {
    "baseType": "PageviewData",
    "baseData": {
      "ver": 2,
      "name": "MyApp",
      "url": "https://localhost:5001/pages/dashboard",
      "duration": "00:00:00.000",
      "properties": {
        "refUri": "https://localhost:5001/pages/admin"
      },
      "measurements": {
        "duration": 0
      },
      "id": "248f75ea3e4a46988ca64ec9df3b3f98"
    }
  }
},
{
  "time": "2021-04-28T20:24:50.996Z",
  "iKey": "f2cbfad8-8aa2-45b0-9405-xxxxxxxxxxxx",
  "name": "Microsoft.ApplicationInsights.f2cbfad88aaxxxxxxxxxxxxxxxxxxxxx.Pageview",
  "tags": {
    "ai.user.authUserId": "employee@contoso.ca",
    "ai.user.id": "8K25sesCaEGgafRLcgZ+OI",
    "ai.session.id": "DSvgKvpN4PeSZWggVCaTZy",
    "ai.device.id": "browser",
    "ai.device.type": "Browser",
    "ai.operation.name": "/pages/dashboard",
    "ai.operation.id": "ba57a28e23eb41f7ad391860776b4f1e",
    "ai.internal.sdkVersion": "javascript:2.6.2",
    "ai.internal.snippet": "-"
  },
  "data": {
    "baseType": "PageviewData",
    "baseData": {
      "ver": 2,
      "name": "MyApp",
      "url": "/pages/dashboard",
      "duration": "00:00:07.351",
      "properties": {
        "refUri": "https://localhost:5001/pages/admin"
      },
      "measurements": {},
      "id": "ba57a28e23eb41f7ad391860776b4f1e"
    }
  }
},
{
  "time": "2021-04-28T20:24:50.998Z",
  "iKey": "f2cbfad8-8aa2-45b0-9405-xxxxxxxxxxxx",
  "name": "Microsoft.ApplicationInsights.f2cbfad88aaxxxxxxxxxxxxxxxxxxxxx.PageviewPerformance",
  "tags": {
    "ai.user.authUserId": "employee@contoso.ca",
    "ai.user.id": "8K25sesCaEGgafRLcgZ+OI",
    "ai.session.id": "DSvgKvpN4PeSZWggVCaTZy",
    "ai.device.id": "browser",
    "ai.device.type": "Browser",
    "ai.operation.name": "/pages/dashboard",
    "ai.operation.id": "ba57a28e23eb41f7ad391860776b4f1e",
    "ai.internal.sdkVersion": "javascript:2.6.2"
  },
  "data": {
    "baseType": "PageviewPerformanceData",
    "baseData": {
      "ver": 2,
      "name": "MyApp",
      "url": "/pages/dashboard",
      "duration": "00:00:07.351",
      "perfTotal": "00:00:07.351",
      "networkConnect": "00:00:00.000",
      "sentRequest": "00:00:02.049",
      "receivedResponse": "00:00:00.001",
      "domProcessing": "00:00:05.300",
      "properties": {},
      "measurements": {
        "duration": 7351.185000035912
      }
    }
  }
}
]

Second and third /track requests sent with the following JSON:

[
 {
   "time": "2021-04-28T20:25:09.914Z",
   "iKey": "f2cbfad8-8aa2-45b0-9405-xxxxxxxxxxxx",
   "name": "Microsoft.ApplicationInsights.f2cbfad88aaxxxxxxxxxxxxxxxxxxxxx.Pageview",
   "tags": {
     "ai.user.authUserId": "employee@contoso.ca",
     "ai.user.id": "8K25sesCaEGgafRLcgZ+OI",
     "ai.session.id": "DSvgKvpN4PeSZWggVCaTZy",
     "ai.device.id": "browser",
     "ai.device.type": "Browser",
     "ai.operation.name": "/pages/admin",
     "ai.operation.id": "db0d857dd8b54165a2e47b2ea2463a29",
     "ai.internal.sdkVersion": "javascript:2.6.2",
     "ai.internal.snippet": "-"
   },
   "data": {
     "baseType": "PageviewData",
     "baseData": {
       "ver": 2,
       "name": "MyApp",
       "url": "/pages/admin",
       "duration": "00:00:07.351",
       "properties": {
         "refUri": "https://localhost:5001/pages/admin"
       },
       "measurements": {},
       "id": "db0d857dd8b54165a2e47b2ea2463a29"
     }
   }
 }
]

[
 {
   "time": "2021-04-28T20:25:10.298Z",
   "iKey": "f2cbfad8-8aa2-45b0-9405-xxxxxxxxxxxx",
   "name": "Microsoft.ApplicationInsights.f2cbfad88aaxxxxxxxxxxxxxxxxxxxxx.Pageview",
   "tags": {
     "ai.user.authUserId": "employee@contoso.ca",
     "ai.user.id": "8K25sesCaEGgafRLcgZ+OI",
     "ai.session.id": "DSvgKvpN4PeSZWggVCaTZy",
     "ai.device.id": "browser",
     "ai.device.type": "Browser",
     "ai.operation.name": "/pages/admin",
     "ai.operation.id": "db0d857dd8b54165a2e47b2ea2463a29",
     "ai.internal.sdkVersion": "javascript:2.6.2",
     "ai.internal.snippet": "-"
   },
   "data": {
     "baseType": "PageviewData",
     "baseData": {
       "ver": 2,
       "name": "MyApp",
       "url": "https://localhost:5001/pages/admin",
       "duration": "00:00:00.000",
       "properties": {
         "refUri": "https://localhost:5001/pages/dashboard"
       },
       "measurements": {
         "duration": 0
       },
       "id": "db0d857dd8b54165a2e47b2ea2463a29"
     }
   }
 }
]

For reference, the below image is how the data sent appears to us in the Azure Application Insights Portal. You can see that both the duration of zero and the initial page-load duration is being reported for the second page navigated (I navigated from /pages/dashboard to /pages/admin).

In this example, the data is a bit nonsensical because while the /pages/dashboard took about 7 seconds to initially load the SPA it is also showing, on average, that the /pages/admin took about half that time to load. This result is explained by the fact the app is sending both durations of zero and the 7 seconds.

Our Angular ApplicationInsights object is configured currently as the following in a singleton Angular service object. According to the Application Insights Angular Plugin's GitHub this configuration should be sufficient to handle the tracking of SPA router changes:

const angularPlugin = new AngularPlugin();
this.appInsights = new ApplicationInsights({
  config: {
    enableDebug: true,
    loggingLevelConsole: 2,
    loggingLevelTelemetry: 2,
    instrumentationKey: environment.appInsights.instrumentationKey,
    autoTrackPageVisitTime: false,
    disableFetchTracking: false,
    enableCorsCorrelation: true,
    enableAjaxPerfTracking: true,
    enableRequestHeaderTracking: true,
    enableResponseHeaderTracking: true,
    overridePageViewDuration: false,
    enableAutoRouteTracking: true,
    extensions: [angularPlugin],
    extensionConfig: {
      [angularPlugin.identifier]: {router: this.router}
    },
  },
});
this.appInsights.loadAppInsights();

Steps to Reproduce

• We have followed the suggestions from the official Azure Monitor documentation here.

• Packages:

  • "@microsoft/applicationinsights-web": "^2.6.2",
  • "@microsoft/applicationinsights-angularplugin-js": "^2.6.2",

• OS/Browser: Windows 10 x64, Chrome 89.0

Expected behavior

We expected that durations could be near-zero between page routing within the SPA app (perhaps within <300ms to accommodate DOM rendering). However, even with CPU 6x slower and Network 3G throttling in Chrome Performance the duration is always reported as zero or the initial duration that the page took to load the initial webpage.

Additional context

This issue has some similarities to the other one reported in #781; however, in this issue I'm also reporting our observation of zero durations being sent to Application Insights.

[xiao-lix]

@davidyee

1. For duplicate pageviews - you should NOT configure enableAutoRouteTracking to true if you are using React plugin or Angular plugin. Angular plugin is listening to the router change and triggers trackPageView here. If you also configure the auto route tracking flag, it'll cause duplicate pageviews.
2. Duration for initial pageview is correct as you shared, however, duration for remaining pageview should be zero. Similar to React plugin here, there is no way for us to determine the "navigation" or "presentation" time, so set to zero. I've pushed a PR to fix the bug. You could provide your own "duration" if you call manually, otherwise it's always zero.

[MSNev]

v2.6.3 is now fully deployed

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.