[Documentation] Include common react usecases.

[ievgennaida]

I have cruised the documentation, but I still feel like I haven't get the full picture of the use cases and ways to integrate the plugin besides the default initialization.

Specifically, I'm interested in recommendations and common use cases for any additional methods calls beyond the default initialization.

• For example, is it sufficient to enable enableAutoRouteTracking, or should withAITracking still be implemented for each high level page?
• what events are send when enableAutoRouteTracking is enabled compared to when withAITracking is enabled?
• What autoTrackPageVisitTime offers in comparison to withAITracking and which of the two is preferable?
• Can you list a common usecases when it would be interesting to call other methods explicitly provided by the library (also avoiding sending telemetry that already collected by enableAutoRouteTracking, autoTrackPageVisitTime and withAITracking :

appInsights.trackEvent({name: 'some event'});
appInsights.trackPageView({name: 'some page'});
appInsights.trackPageViewPerformance({name : 'some page', url: 'some url'});
appInsights.trackException({exception: new Error('some error')});
appInsights.trackTrace({message: 'some trace'});
appInsights.trackMetric({name: 'some metric', average: 42});
appInsights.trackDependencyData({absoluteUrl: 'some url', responseCode: 200, method: 'GET', id: 'some id'});
appInsights.startTrackPage("pageName");
appInsights.stopTrackPage("pageName", null, {customProp1: "some value"});
appInsights.startTrackEvent("event");
appInsights.stopTrackEvent("event", null, {customProp1: "some value"});

Thank you in advance!

[MSNev]

Hi @ievgennaida, Let me try and answer without getting too much into the weeds of the implementation and a lot of the answers will depend out how you are creating / managing you SPA application.

enableAutoRouteTracking effectively hooks and listens to the browser location change events and sends "pageView" events when the URL is changed. This works if you are using a Router and you are updating the URL (including with a "#" changes) to handing what we think of as "virtual" pages. The duration reported for these virtual page view event is always zero as we can't determine (beyond the fact that the URL changes) how long virtual the page "load" takes. This is separate from the react plugins withAITracking usage.

withAITracking - you would use this to cause "metric" events to be sent for the individual wrapped component, looking at the code the metric event will be sent when the component is unmounted.

Because the 2 feature send different events which are mapped in the Azure Portal in different locations, it would depend on what information you want information about your app.

I'm not going to go into a list of common use cases for all of the functions as it what might be common for me is not generally common for everyone as each event "type" will end up in different locations in the Azure Portal / Log analytics queries and therefore depends on you r application about whether it's useful or not. But for a quick explanation

• the start / stop functions are designed to provide a simpler way for you to calculate the duration of an event, so if you not using a router / enableAutoRouteTracking you could use the [start/stop]TrackPage to calculate the durection of a page change (so they are not always zero). Likewise with the event versions, where you would have some interesting "event" that you want to track.
• The other names mostly match with the Azure Portal.
• The traceDependencyData is used by the automatic "dependency" (XMLHttpRequest / fetch) hooks to send "dependency" timimg events.

[github-actions]

This Issue will be closed in 30 days. Please remove the "Stale" label or comment to avoid closure with no action.