RUM not automatically working with HashRouter about browser-sdk HOT 12 OPEN

I think hash routing should work out of the box. Should be no need to implement the following approach:

event.view.url = event.view.url.replace('#', '')

from browser-sdk.

We are working on a solution for this, where the user can specify a view "name" to be displayed instead of the view path in the Datadog UI. You can have a sneak peek here: #724 . With this, it will be trivial to use the view hash instead of the path, with an API that may look like:

DD_RUM.init({
  // ...
  onNewLocation(newLocation) {
    return { viewName: newLocation.hash }
  }
})

Woud this looks like a good solution for you?

from browser-sdk.

I tried replacing hash with slash - this worked, sort of, but does not seem to be very stable. Sometimes I still get something like SPA Route Change / or Load Page / followed by Load Page /hash , even though I am sure client was always loading /#hash, I checked that Load Page / view and I can see that url was with /#hash, so sdk somehow firstly reported view without applying that function and then reported another view after applying function...
I think such partial solution would be more confusing. Even though it gives somewhat more insight, I do not want to introduce this hack into codebase, which potentially can be broken and has to be maintained.

I will wait for this issue to get proper resolution and full support of hash router (or rejection if you choose to do so), before proceeding. In the meantime I guess we just have to ignore "view" in RUM webconsole

from browser-sdk.

oh, I see. I didn't notice it, thanks!
I'll add the @view.url_details.hash column here.

Btw, would be awesome to see the @view.url_details.hash at this screen too 😄:

from browser-sdk.

Btw, would be awesome to see the @view.url_details.hash at this screen too 😄:

I noticed this same issue today when looking into adding RUM to our app. Would be awesome to have the @view.url_details.hash displayed on that view!

from browser-sdk.

Why this cannot work OOB? I think instead of having only path in View path, adding hash there would make sense as well, at least with opt-in in init call?

I think modifying source code, adding some hooks for router when route changes and calling datadog on that - would be prone to errors. Especially because this feature specifies No RUM data is collected until the view is started.. So in case if something is broken in the router itself - we will also loose data and will not see data from our (real) users, which kindof defeats the purpose of using RUM.
Please add hash to the "View path" by default, or allow us to opt-on that behavior

from browser-sdk.

Hello!

Since [email protected], you can now track views manually and define your own view names.
More info on the documentation.

from browser-sdk.

Hello Eduardo! Thanks for your report.

In the Datadog UI, the "path" column is the actual URL path, and you should be able to add a column on @view.url_details.hash to see the hash.

I agree that in the "Hash router" case this is not convenient, having the hash directly would be better. I'll raise the issue internally.

from browser-sdk.

I think that's a pretty solid solution, seems nice and flexible for the users. Thanks for the link to the PR!

from browser-sdk.

Hi @strowk,

We could consider to introduce this kind of configuration at some point but it is not in our priorities right now.

I think you could use beforeSend API to update events view url., in order to transform /#foo in /foo.

Would that work for you?

from browser-sdk.

Hi @bcaudan ,
thanks for quick answer!

Hm, I see this snippet in example

import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({
    ...,
    beforeSend: (event) => {
        // remove email from view url
        event.view.url = event.view.url.replace(/email=[^&]*/, "email=REDACTED")
    },
    ...
});

Tried it like this

        beforeSend: event => {
            console.log('window.location.hash', window.location.hash);
            event.view.url = window.location.hash;
        },

have this in log

window.location.hash #myhash 

No effect on RUM webconsole, still shows just '/' for view..

from browser-sdk.

FMU, your code will transform view url this way:

https://www.domain.com/#hash -> #hash

Since you still need a valid URL, it could work better with something like:

event.view.url = event.view.url.replace('#', '')

resulting in:

https://www.domain.com/#hash -> https://www.domain.com/hash

from browser-sdk.