[BUG] Not compatible with react-router v6

[changesbyjames]

It's not a huge deal as v6 is currently in beta but there is no exposed concept of history anymore so the way that the react plugin works with the history object will be unsupported soon.

See here for more detail: remix-run/react-router#7476

[paularmstrong]

v6 is now published to npm and is the recommended version going forward. They react-router docs and issues are really cryptic about the history module and they don't seem to even expose it in any way. I'm still searching around, but would be helpful to get some more eyes on the lookout for this.

[afefer]

There's a HistoryRouter object that can be used in place of Router that solves this problem.

[MironV]

In v6, useNavigate and useLocation replace useHistory in react-router to enable compatibility with React suspense. It would be best if this package could simply use the hooks provided by react-router rather than having to change BrowserRouter to HistoryRouter, which is essentially a compatibility mode to enable extracting history and could introduce bugs.

[XzaR90]

@afefer I don't see any function named createHistory in "react-router-dom": "6.2.1",
How to get this work with v6?

[afefer]

@afefer I don't see any function named createHistory in "react-router-dom": "6.2.1", How to get this work with v6?

It's flagged as unstable in 6.2.1, so you can import it as:
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';

[XzaR90]

hmm may not be a good solution for production then, I will probably wait. Thank you @afefer.

[XzaR90]

Can't we just have a custom event that reactplugin is listen to which having the pathname?
Then we can trigger the custom event using an example like this https://stackoverflow.com/a/69785094/3153684?

const event = new CustomEvent('ai_pathname_change', { pathname: '...' });

ReactPlugin can have a static method creating that event to make it easier for developer to use it.

@kryalama, @Karlie-777

[Karlie-777]

Hi all @changesbyjames @paularmstrong @afefer @MironV @XzaR90
for V6, set enableAutoRouteTracking: true in ApplicationInsights config settings and then you do not need to pass history to enable auto route tracking. please let me know know if it works.

[sandves]

Hi all @changesbyjames @paularmstrong @afefer @MironV @XzaR90 for V6, set enableAutoRouteTracking: true in ApplicationInsights config settings and then you do not need to pass history to enable auto route tracking. please let me know know if it works.

enableAutoRouteTracking: true does seem to track page views, but it does not capture durations as far as I can see.

[MSNev]

Correct, because it has no way to identify how "long" it took to render the page, which fundamentally is what duration is about, where for the initial page this includes how long it took to download the resources up until the page load event.

For a SPA, "generally" all resources are local. If you want to track async (loading views etc) then you would have to use (or do something like) the startTrackPage / stopTrackPage from the analytics extension

[djswilly]

I am in the process of upgrading to react-router v6. I am comfortable using enableAutoRouteTracking: true as we have no use for App Insights page view load time metrics, however I noticed this issue is still open.

Are there further changes anticipated to increase compatibility with react-router v6, or is enabling auto route tracking and forgoing page view duration data the long term solution? Out of interest, how was page duration data calculated pre-v6 using the history object?

[Karlie-777]

@djswilly for previous router changes, we added a history listener. Since V6 does not expose history object like previous versions, we have to use an alternative way. But in general, we set default duration to 0 since duration is hard to calculate in SPA from our end. We have to update react plugin eventually as React version changes. But currently, we are going to keep this plugin version.😊

[naiksanjay71]

Does anyone have suggestion on capturing page duration for each route to measure site performance, it seems current SDK does not support page duration and it always set as 0. any suggestions or implementation options are much appreciated.

[nulltoken]

The workaround using unstable_HistoryRouter doesn't work anymore in 6.4.0 (cf. remix-run/react-router#9422).

Would it be possible to update the README and describe how to use applicationinsights-react-js with the latest stable version of react-router-dom ?