Sentry-javascript: DOMExceptions captured by onunhandledrejection as "Non-Error promise rejection captured with keys: [object has no keys]"

[dbow]

• [x] Review the documentation: https://docs.sentry.io/
• [x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• [x] Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• [x] Provide a link to the affected event from your Sentry account

Package + Version

• [x] @sentry/browser
• [ ] @sentry/node
• [ ] raven-js
• [ ] raven-node _(raven for node)_
• [ ] other:

Version:

^5.6.2

Description

_Possibly related to https://github.com/getsentry/sentry-javascript/issues/2210 though I wasn't sure if that was just focused on custom error events_

I'm seeing a lot of UnhandledRejection events in our dashboard with the following message: Non-Error promise rejection captured with keys: [object has no keys]. After digging in a bit, it looks like it's mostly DOMExceptions, which don't have a .stack property so they're logged like non-Errors.

It _does_ log the details in the __serialized__ property, for example:

{
message: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22, 
name: AbortError, 
stack: [undefined]
}

Looks like DOMExceptions were handled in raven-js in this pull request: https://github.com/getsentry/sentry-javascript/pull/1310 Could they be handled similarly gracefully in onunhandledrejection? It seems like various browser things like fetch and even media methods like play() (like the above serialized error) throw DOMException errors, and having them all roll up into that confusing error message makes it tougher to debug.

Here's an example event: https://sentry.io/organizations/salamanca/issues/1146611869/events/fcec1322aca848cd99fc07b52778e20f/
though i think you can repro in chrome console just by doing

window.onunhandledrejection = function(e) {
  console.log(e.reason); // an instance of DOMException
  console.log(e.reason.stack); // this will be undefined
};

Promise.reject(new DOMException()).then(function() {});

[nkov]

In my case it wasn't a DOMException, it was a preflight OPTIONS request which failed, so the fetch was cancelled and there was an Uncaught (in promise) TypeError: failed to fetch, but I had the same uninformative message as described in this issue.

[Polm90]

In my case was a QuotaExceededError on cordova for iOS

[piotrd]

In my case it was triggered by Grammarly extension only in Safari, macOS.

[kamilogorek]

Closing this, as DOMException are now handled (which was the original OP request).