use pathname as transaction name for route change

[vigneshshanmugam]

• While patching the history API, we use title from the history.pushState as the transaction name. Instead we need to use path as the default transaction name.

Scenario (SPA)

1. go to www.example.com
2. navigate to www.example.com/a , history.pushState fires with these parameters (state, title, url) -> ({}, null, '/a')

Note: Title is also ignored by some browsers(FF)

Right now our transactions are named as UNKNOWN which does not give much benefit for the user. Instead we could have transaction name as /a. To handle cardinality problems, We can remove query params and other hashes from the URL. We can add the full URL to the context object.

If you want to test real website.

1. Go to https://www.flipkart.com/
2. paste this JS in the console

 const nativePushState = history.pushState
  if (typeof nativePushState === 'function') {
    history.pushState = function(state, title, url) {
      const task = {
          state,
          title,
          url
      }
      console.log(task)
      nativePushState.apply(this, arguments)
    }
  }

3. Navigate to any link from the menu bar. Check the console for the URL

/cc @jahtalab @roncohen

[pgross41]

In case anyone else comes here looking for a quick workaround;

apmAgent.observe('transaction:start', (transaction) => {
  if (transaction.type === 'route-change' && transaction.name === 'Unknown') {
    transaction.name = window.location.pathname
  }
});

[vigneshshanmugam]

@pgross41 Yeah thats a nice workaround and it should work. But its required only if you are not using one of our supported framework integrations https://www.elastic.co/guide/en/apm/agent/rum-js/current/framework-integrations.html

If you use the framework integrations, the path would be automatically picked up by the RUM agent and transaction names would be set accordingly.

const routes - [blog/122, blog/214, blog/342]
// 3 transactions with workaround
/blog/122
/blog/214
/blog/342

// framework integrations
/blog/:id 

[titusjoyson]

I'm also having the same issue and I'm using the react implementation and I have tried with both instrumenting application routes and instrumenting individual react components except the initial transaction name provided all the transactions are names as UNKNOWN