search

grafana / faro-web-sdk

The Grafana Faro Web SDK, part of the Grafana Faro project, is a highly configurable web SDK for real user monitoring (RUM) that instruments browser frontend applications to capture observability signals. Frontend telemetry can then be correlated with backend and infrastructure data for full-stack observability.
https://grafana.com/oss/faro/
Apache License 2.0
688 stars 62 forks source link

support 'HashRouter' from react-router-dom v6 #488

Open kevinschoonover opened 4 months ago

kevinschoonover commented 4 months ago

Description

I integrated faro-react-sdk into an electron app and it properly annotates the page id when using the ReactIntegration for react router v6

<BrowserRouter>
    <FaroErrorBoundary
        fallback={(error: Error, resetError: VoidFunction) => (
            <Error error={error} resetErrorBoundary={resetError} />
        )}
    >
        {getRoutes()}
    </FaroErrorBoundary>
    {getBackgroundComponents()}
</BrowserRouter>

; however, when I sub it out for <HashRouter> which is recommended for electron production

<HashRouter>
    <FaroErrorBoundary
        fallback={(error: Error, resetError: VoidFunction) => (
            <Error error={error} resetErrorBoundary={resetError} />
        )}
    >
        {getRoutes()}
    </FaroErrorBoundary>
    {getBackgroundComponents()}
</HashRouter>

the page id looks like /C:/Users/<MyUser>/*/Local/Programs/<myProgram>/resources/**

Proposed solution

After digging into the code very briefly, it likely has to do with the windows.location api returning returns a string that contains a # along with the fragment identifier of the URL

https://github.com/grafana/faro-web-sdk/blob/6de2e06ee87af72a251966854284491f307341fb/packages/react/src/router/v6/FaroRoutes.tsx#L22C21-L22C41

which I don't know if it is handled fully

https://github.com/grafana/faro-web-sdk/blob/6de2e06ee87af72a251966854284491f307341fb/packages/react/src/router/v6/utils.ts#L31-L44