BrowserAgentExtension starting a transaction or adding a custom log not working

Products

• DX SaaS
• DX Operational Observability

Issue/Introduction

Upon loading the Browser Agent JS, we check every 100ms for the availability of BrowserAgent, BrowserAgentExtension and also BrowserAgentExtension.isBAAlive(), and as soon as true is returned, we attempt things like starting a transaction or adding a custom log - the necessary API calls are made, but it seems that the payload isn't well-formed so these logs aren't recorded on the backend

The application makes use of the following (on various pages of a multi-page app), almost as soon as the page loads:

• BrowserAgentExtension.startApplicationTransaction()
• BrowserAgentExtension.stopApplicationTransaction()
• BrowserAgentExtension.logTextMetric()
• BrowserAgent.errorUtils.captureJSError()

so we want to check that the browser agent is ready to take these requests before we make them

What could be the issue?

Environment

DX O2 BrowserAgent Extension API

Cause

In the non-working case, CORS errors are occurring, and the same were listed in the payload too:

Error stack trace of two errors:

CORSError : Refused to display '' in a frame because of 'X-Frame-Options' settings.
at https:// ...

CORSError : Refused to display

in a frame because of 'X-Frame-Options' settings.
at https:// ...

 

IMPORTANT REMINDER  Add the BA snippet before the first script in the HEAD of the page might improve the availability of BA. 

Resolution

WORKAROUND:

Add an additional small delay. New sequence of events when a page loads:

• User navigates to web page
• BAJS and other application scripts are downloaded by browser
• Our app starts checking if BrowserAgentExtension.isBAAlive() is true
• Once true, an extra 0.5 second delay is added
• Then our app calls BrowserAgentExtension.startApplicationTransaction() and such like
• (after the usual metricFrequency delay, the browserMetrics call is made)