Issue
There has been a surge of events that comes from a HeadlessChrome browser indicating that there is an Invalid or unexpected token syntax error somewhere in our code. The location in our code seems to be different each time, sometimes even coming from our node modules. What's even more bizarre is that each time we are notified of an error, the highlighted line of code does not have any apparent syntax error. What can we do about it?
Applies To
- All SaaS Customers and Self-Hosted Users
- Error Monitoring
- Mostly JS SDKs
Resolution
There is a mechanism tag on the Issue that identifies why the SDK sent the error. mechanism:onerror shows that it reached the framework onError handler, meaning that it was an exception raised in the application and captured by the GlobalHandlers integration in the SDK. More info on this in our docs here.
This is just what the application is throwing, and what Sentry is receiving. You will most likely want to filter these errors out.
To filter out events from HeadlessChrome, you can utilize beforeSend callback and add a custom logic that will retrieve the user agent (window.navigator.userAgent), parse it, and then either return the event or drop it by returning null.
Here's a snippet of how you might implement this:
beforeSend: (event, hint)=>{
const {headers} = event && event.request
if (headers & headers["User-Agent"] === "USER AGENT TO FILTER") {
console.log("Dropping error event due to user-agent")
return null;
}
return event;
},
The reason we are using user-agent here and not browser.name is because browser.name is not found in the SentryEvent object. The reason there is no browser property on the event object is that we interpret event.request values and use the information from User Agent header. Essentially, the browser.name is set from the User Agent.