Our transaction end detection logic for all transactions type except page-load is a bit eager now and might fail to capture spans that happen in the frames that happen after the nextTick.

During the route-change events, there are multiple ways users would be invoking external API calls, can be sync, concurrent/parallel or even lazy load some components based on the API calls. Right now our framework integrations rely on the internal lifecycle events of the respective frameworks and tries to end the transaction as soon as the component is mounted to the DOM.

With this approach, we might be able to only capture only the API calls that are requested during the component mounting and might fail to capture calls that are done after the component is mounted to the DOM.

Solution

• Instead of closing the transaction as soon as the children components are mounted or when the route change navigation is done, We could actively wait and listen for few frames (for now we can listen for 5 successive ticks/animation frames) and decide if we want to close the transaction.
• If there are no calls within those 5 ticks, we close the transaction immediately and send it to the APM server.
• If there are any spans, assume a call happens on the 3rd frame, then we schedule another 5 frames and end the transaction accordingly.
• In order to reduce the noise in the transaction, our transaction would always get time shifted to the last active transaction. Ex - if there are 2 spans that happens in the 2nd tick after the transaction start, we end the transaction with the end time of the longest span and send it to the server.
• With our filtering logic, transaction without any spans will not be reported to the server.