How to resolve "Unhandled Promise Rejection: NotSupportedError: The operation is not supported." in Safari - Angular?

Question

I'm getting the above error only in the Safari browser, which is not happening in my local machine to debug. I removed the minified version of the build while digging further and the error seems to be from Zone.js.

I'm unable to debug further and unsure why it is happening. It is not happening in other browsers.

It's been not easy to debug the minified version of the Zone.js library. How can I proceed further to resolve this?

I don't think there is any impact on the functionality but it keeps bothering me.

There were similar errors I found but they are related to Audio/Video files. Still, in my case, the error is happening on every page wherever I navigate and only happens for the first load of any page. I also don't get any errors/failures from API calls.

Similar links

Audio not playing on IOS: [native code]:1 Unhandled Promise Rejection: NotSupportedError: The operation is not supported

HTML5 Audio Throwing Error on iOS Safari only: "Unhandled Promise Rejection: NotSupportedError: The operation is not supported."

How get URL.createObjectURL(blob) to work in Safari

Unhandled Promise Rejection: NotSupportedError (DOM Exception 9): The operation is not supported

Any help here would be highly appreciated. Any way to debug this kind of issue?

Answer 1

You could try to setting the Uncaught Exceptions special breakpoint.

That way Safari will pause execution if the thrown exception is not caught. In addition you will have access to any local variables and states when the exception occurs, allowing you to narrow down the issue. Or at least have more information on the current state of local variables when the exception is thrown.

For more information on setting this kind of special breakpoint, have a look at webkit documentation on the subject.

In addition, you could always set a global event listener on the unhandledrejection event to catch any Promises that has no rejection handler. Maybe the PromiseRejectionEvent.reason might have more information than what the error logged to the console is showing you, but I doubt it.

In any case, listening to this event, will allow you to get rid of the error:

window.addEventListener("unhandledrejection", (event) => {
  console.log(event.reason);
});

Answer 2

I ran into a similar issue recently, we use new-relic in our company. Few steps to follow:

1. Look for if this can be reproduced with some extensions added in safari.
2. Look for how old the bug is
3. Say if the bug is 1 month old then go to GitHub and try to look for commits that might be the issue

We use react, so we have something called error boundaries, one thing to note is error boundaries do not work if there are event handlers, look for places where you might be using those (for eg: if you have a modal that opens up or button click)

All in all, it is a hard one.

I would be curious to know what worked for you in the end