Hey there,
NuxtJS is a progressive VueJS framework that can be used for server side rendering (similar to NextJs/Gatsby).
The routing in NuxtJs is defined by the folder structure (see routing). Dynamic routes are identified by a '_' prefix.
We are currently setting up the APM agent and saw that the dynamic routes are not grouped by default (due to lack of instrumentation and knowledge about the framework obviously). This means, that we get different transactions for /product/1 and /product/2. However, we would like to group those requests, as the APM agent does with other frameworks, too.
My idea was to add an instrumentation to the APM NodeJS Agent that does the following:
- Recognize that NuxtJS is being used with server-side-rendering
- Add a filter for the requests that changes the transaction name
To group the requests, it would be necessary to read the pages directory once and identify the dynamic parts (file name starting with _). Now the transaction URL could be matched (using regex for example) to identify the dynamic parts and group the transactions.
I was just wondering if that is a valid approach and possible. It would be necessary to:
- Change the transaction name (right now, we are using a transactionFilter method)
- Read the file names in the pages directory
I'd appreciate any feedback and maybe some hints where to get started implementing this, if this is a valid approach.