faro-web-sdk

faro-web-sdk copied to clipboard

Description

React Router v6 now uses a RouterProvider component that is passed an object from createBrowserRouter().

https://reactrouter.com/en/main/start/overview#client-side-routing

Trying to wrap the RouterProvider in FaroRoutes,

import { FaroRoutes } from "@grafana/faro-react";

<FaroRoutes>
  <RouterProvider router={router} />
</FaroRoutes>

leads to the following error:

Uncaught Error: useLocation() may be used only in the context of a <Router> component.

Proposed solution

Support the newest style of React Router definition.

Context

https://reactrouter.com/en/main/upgrading/v6-data

Thanks a lot @nosvalds. Would you mind adding the version of the Web-SDK you found the issue on?

Cheers, Marco

@grafana/faro-react=1.1.2 @grafana/faro-web-sdk=1.1.2

6 months old... ?? is there some workaround?

is this is intended solution: https://www.npmjs.com/package/@grafana/faro-react readme says support for rhr v6

no, looks like only an early version of v6 is supported below is "react-router-dom": "^6.19.0"

hi folks - sorry for the delay on this. this should get some attention in the coming weeks as we are moving to react router V6 for our internal plugin platform.

again, sorry for the delay - we will discuss this in our prioritization meeting tomorrow.

I don't think lasted very long. react-router-dom ^6.6.2 is used to create this package. The latest is around 6.23.0. The types used to by withFaroRouterInstrumentation seem to be no longer valid.

I was going to try and update, but can't build this project. I can't seem to find any developer docs. Are they somewhere other than this repo?

Looks like this is the top level block

              Types of property 'action' are incompatible.
                Type 'boolean | ActionFunction<any>' is not assignable to type '(...args: any[]) => any'.
                  Type 'boolean' is not assignable to type '(...args: any[]) => any'.

I rolled back to react-router-dom 6.6.2 and still the types don't match. Looking thru the code in this repo there are no tests or examples that use withFaroRouterInstrumentation. Is it possible that this never worked? The type ActionFunction has been in the react-router-dom from before this PR was created.

@eskirk ?

Hey @barrykaplan we tested it with our Faro demo app and everything worked well. There's a playground branch available.

I'll reopen this issue.

@barrykaplan I can not reproduce the type issue.

What router are you using?

I tested all data routers again but it's working as expected.

createHashRouter, createMemoryRouter, createBrowserRouter createMemoryRouter

Faro's withFaroRouterInstrumentation only subcribes to router events and returns the provided router.

example:

Router version: "react-router-dom": "6.6.2",

Can now reproduce the issue. Working on a fix.

@codecapitano Sorry for the late reply, but thanks for looking into this. Anything you need from me at this point?

Hi @barrykaplan We released an update which fixed the issues with the typings (v1.7.2). See this issue.

Do you still have this problem?

just back in the office checking asap...

just back in the office checking asap...

Great thanks a lot 🙏

No more errors, thanks!!

Great @barrykaplan thanks you so much for testing and your patience. So I think we close the issue now.