Sentry-javascript: Evento: Rechazo de promesa sin error capturado con claves: currentTarget, isTrusted, target, type

También comenzamos a verlos en las últimas semanas. Acabo de comenzar a investigarlo, así que no tengo más detalles sobre qué lo está causando.

Lo mismo aquí, ahora en Sentry v5.15.5.

¿Alguien puede proporcionar algún enlace a este tipo de evento capturado en Sentry? Parece un error de carga de secuencia de comandos (observe el target que se ha activado este evento)

@kamilogorek , ¿puede enviarme el correo electrónico de su empresa? Puedo compartir ejemplos de los eventos.

@Santas [email protected]

Si necesita más ejemplos, puedo enviar algunos también a @kamilogorek , solo hágamelo saber.

@sheelah sí, por favor

@sheelah , no hay mucho que podamos mejorar aquí, para ser honesto. JS no nos brinda más información de la que ya brindamos. Siempre que se rechaza una instancia de un objeto de promesa, se activa el evento onunhandledrejection (lo mismo ocurre con onerror en la descripción del OP).

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

Sin embargo, no hay nada que impida que alguien pase cosas al azar allí.
Por lo tanto, un código como este Promise.reject("whatever") o Promise.reject(jQueryBecauseWhyNot) es un código JS totalmente válido.

Siempre que nos encontramos con algo que no es un valor primitivo, un objeto que contiene el seguimiento de la pila (por ejemplo, Error ) o una excepción DOM interna, tenemos que recurrir a la serialización de objetos simples y tratar de extraer cualquier información que podamos. de ella. Puede ver el archivo eventbuilder.ts para obtener una lista de posibles rutas que este "valor aleatorio" pasado al controlador de eventos puede tomar: https://github.com/getsentry/sentry-javascript/blob/master/packages/ navegador / src / eventbuilder.ts # L17 -L80

Desafortunadamente, no estoy seguro de que podamos hacerlo más genérico para manejar más tipos de entrada.
Si alguien tiene algún comentario sobre ese proceso, estoy totalmente abierto a sugerencias.

(respondido aquí en lugar de en su correo electrónico, para mantener la conversación pública para todos los demás)

De mis observaciones:

• Solo ocurre en varias versiones recientes de Safari en dispositivos móviles o de escritorio;
• Tengo algunas bibliotecas instaladas en mi aplicación web, como ZXing y browser-image-compression , pero no scripts de seguimiento de terceros;
• Parece ocurrir exactamente al mismo tiempo que falla una llamada a la API con un error de red (código 0).
• En mi caso, es más específicamente un ProgressEvent , no solo un evento, que parece ser parte de la biblioteca de solicitudes HTTP (estoy usando axios).

ADDITIONAL DATA

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

También acabo de recibir un informe con "Rechazo de promesa sin error capturado con valor: nulo". De manera similar a lo que @ anton-bot mencionó anteriormente, el usuario afectado estaba usando Safari 13.1.2 en Mac OS X 10.15.6.

Eché un vistazo en el código de mi aplicación compilado para las llamadas reject( donde posiblemente se proporciona null objeto

También he estado viendo esto durante las últimas dos semanas. En nuestro sitio solo lo hemos visto en páginas que usan la API de JavaScript de Google Maps, así que tengo la sensación de que podría estar relacionado con eso. ¿Alguien más ve esto en URL que usan mapas de Google?

Editar: hasta ahora hemos visto el problema en iOS y Android

Editar: datos adicionales:

{
  currentTarget: [object Null], 
  isTrusted: [Circular ~], 
  target: head > script[type="text/javascript"], 
  type: error
}

@asbjornh no, no tengo Google Maps en mi página

@kamilogorek ¿Los datos adicionales de OP (y los míos) serían causados ​​por algo como esto Promise.reject(new Event("error")) ? ¿O los eventos de Sentry para esta situación siempre tendrán cargas útiles que parezcan eventos de navegador?

@asbjornh sí, luego pasaría por este flujo: https://github.com/getsentry/sentry-javascript/blob/caff9e7b308f99f04443d57d990c252a51a153bf/packages/browser/src/eventbuilder.ts#L97 -L107

También estoy recibiendo el mismo error

Este error acaba de agotar mi capacidad de cuota.

Tenemos 289 eventos de esto en las últimas 24 horas, y nuestra página aún no está disponible.

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

Estamos usando next.js

lo mismo aquí con cra 😅

Parece que este problema se debe a algo parecido a esto:

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

El gancho onerror realmente recibirá un objeto Event , en lugar de una instancia Error , lo que está causando estos problemas que se mencionaron anteriormente. Esto se puede evitar envolviendo el Event con un Error como lo sugiere 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);
});

En mi caso, fue el mecanismo de búsqueda previa 9.5.2 Next.js lo que lo causó en Firefox, por si acaso alguien tiene un caso similar. (¿tal vez aquí? https://github.com/getsentry/sentry-javascript/issues/2546#issuecomment-697771381) Este es el problema: https://github.com/vercel/next.js/pull/16757 y puede ser resuelto actualizando a 9.5.3 o Canary.

Sin embargo, el error es mucho más detallado en el navegador:

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"
...

¿Cómo podemos hacer que Sentry capture estos datos?

@ Turbo87 ¡SÍ! Esta es exactamente la razón por la que solo lo vemos en páginas que usan @googlemaps/js-api-loader . Están haciendo exactamente lo que estás describiendo aquí.

¡¡Gracias!!