sentry-javascript: Event: Non-Error promise rejection captured with keys: currentTarget, isTrusted, target, type

It seems that this issue is caused by something roughly like this:

new Promise((resolve, reject) => {
  const script = document.createElement('script');
  script.src = src;
  script.onload = resolve;
  script.onerror = reject;
  document.body.appendChild(script);
});

The onerror hook will actually receive an Event object, instead of an Error instance, which is causing these issues that are mentioned above. This can be avoided by wrapping the Event with an Error as suggested by https://developer.mozilla.org/de/docs/Web/API/HTMLScriptElement:

new Promise((resolve, reject) => {
  const script = document.createElement('script');
  script.src = src;
  script.onload = resolve;
  script.onerror = event => {
    reject(new Error(`Failed to load ${event.target.src}`));
  };
  document.body.appendChild(script);
});

This error just depleted my quota capacity.

@sheelah there’s not much we can improve here, to be honest. JS doesn’t give us more information that we already provide. Whenever an instance of a promise object is rejected, it triggers onunhandledrejection event (same goes for onerror in the OP description).

https://developer.mozilla.org/en-US/docs/Web/API/Window/unhandledrejection_event

However, there’s nothing that would stop anyone from passing any random stuff in there. Thus code like this Promise.reject("whatever") or Promise.reject(jQueryBecauseWhyNot) is totally valid JS code.

Whenever we encounter something that’s not a primitive value, an object that contains the stack trace (eg. Error) or internal DOM exception, we have to fall back to simple object serialization and try to extract whatever information we can out of it. You can see eventbuilder.ts file for a list of possible paths this “any random value” passed to the event handler can take – https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/eventbuilder.ts#L17-L80

Unfortunately, I’m not sure if we can make it any more generic to handle more types of input. If anyone has any feedback regarding that process, I’m totally open to suggestions.

(answered here instead of to your email, to keep the conversation public for everyone else)

My impression is that most of these errors are a side effect of your visitors using adblockers.

From my observations:

• Only happens in various recent versions of Safari on mobile or desktop;
• I have a few libraries installed in my web app such as ZXing and browser-image-compression, but no third-party tracking scripts;
• It seems to occur at the exact same time as an API call fails with a Network Error (code 0).
• In my case, it is more specifically a ProgressEvent, not just an event - which seems to be a part of HTTP request library (I am using axios).

ADDITIONAL DATA

__serialized__ | {
	currentTarget: [object Null],
	isTrusted: [Circular ~],
	target: [object FileReader],
	type: error}
-- | --

In my case it was Next.js’ 9.5.2 prefetching mechanism causing it on Firefox, just in case somebody has a similar case. (maybe here? https://github.com/getsentry/sentry-javascript/issues/2546#issuecomment-697771381) This is the issue: https://github.com/vercel/next.js/pull/16757 and can be solved by upgrading to 9.5.3 or Canary.

The error is much more verbose in the browser, though:

Uncaught (in promise) 
error
bubbles: false
...
...
as: "fetch"
assignedSlot: null
attributes: NamedNodeMap(3
0: href="/_next/data/wmQYPCwvbuBulJfEwTMRf/smartwatches/fitbit-ionic.json"
1: rel="prefetch"
2: as="fetch"
as: as="fetch"
href: href="/_next/data/wmQYPCwvbuBulJfEwTMRf/smartwatches/fitbit-ionic.json"
length: 3
rel: rel="prefetch"
...
...
​
isTrusted: true
originalTarget: <link href="/_next/data/wmQYPCwvbuBu…tches/fitbit-ionic.json" rel="prefetch" as="fetch">
returnValue: true
srcElement: <link href="/_next/data/wmQYPCwvbuBu…tches/fitbit-ionic.json" rel="prefetch" as="fetch">​
target: <link href="/_next/data/wmQYPCwvbuBu…tches/fitbit-ionic.json" rel="prefetch" as="fetch">
timeStmp: 25366
type: "error"
...

How can we get Sentry to capture this data?

we have 289 events of this in the last 24h - and our page is not even live yet …

{
currentTarget: [object Null], 
isTrusted: [Circular ~], 
target: head > link, 
type: error
}

We are using next.js

@felix-berlin to ignore this error, add it to ignoreErrors list

  ignoreErrors: [
    'Non-Error exception captured',
    'Non-Error promise rejection captured'
  ]

Ref: https://docs.sentry.io/platforms/javascript/configuration/filtering/#using-platformidentifier-nameignore-errors-

Still getting this in production, including just 4h ago. And others are, too.

I really hope Sentry implements a global suppression for this.

We still seem to be getting this error

Hello everyone I have the same issue, you can check sharable link here https://sentry.io/share/issue/213a44af1eac4f7e85ea5714bc3f7f1e/

Unhandled Non-Error promise rejection captured with keys: currentTarget, detail, isTrusted, target

currentTarget: [object Window], 
detail: None, 
isTrusted: False, 
target: [object Window], 
type: unhandledrejection
}

The site is on WordPress with 40 plugins (WPML, YOAST, WooCommerce etc) and we have HubSpot forms integrated into WP pages. As i see in the DevTools it’s can be HubSpot form js file only https://js.hsforms.net/forms/v2.js:

Any ideas how it’s possible to fix this issue?

@huangjihua - At this point, as far as we know, all of the bugs have been worked out here. Docs about this are now here: https://docs.sentry.io/platforms/javascript/troubleshooting/#events-with-non-error-exception.

same here with cra 😅

@asbjornh yes, it’d then go through this flow - https://github.com/getsentry/sentry-javascript/blob/caff9e7b308f99f04443d57d990c252a51a153bf/packages/browser/src/eventbuilder.ts#L97-L107

@asbjornh nope I don’t have Google Maps in my page

@sheelah yes, please