Sentry-javascript: Sentry cuando se ejecuta sobre el condensador como stackrace de aplicaciones híbridas no tiene ninguna información

Hola @kamilogorek , ¿podrías ayudarme con esto?

El nombre del archivo en los marcos de la pila se ve mal

{
              "filename": "[native code]",
              "lineno": null,
              "colno": null,
              "function": "forceError",
              "in_app": true
            }

Una consola de error de muestra más se ve así. Raven.js no recibe ninguna información de error.

En centinela se ve así

Es responsabilidad de TraceKit extraer la información adecuada de los marcos del propio error: https://github.com/getsentry/sentry-javascript/blob/master/packages/raven-js/vendor/TraceKit/tracekit.js

Sin embargo, le hicimos algunos cambios en el nuevo @sentry/browser SDK, por lo que es posible que desee probarlo primero antes de que investiguemos más.

@kamilogorek
Con @sentry/browser es aún peor, por eso me mudé a Raven.

A continuación se muestra cómo se ve cuando la aplicación se ejecuta como una aplicación híbrida usando capacitor + Ionic 4 + VueJS + @sentry/browser

A continuación se muestra el enlace de error que se registra cuando uso @sentry/browser.

https://sentry.io/share/issue/d0c7e9529ac94dba9c4b7b04e16361ba/

Así es como se ve la consola

Configuración de centinela

Sentry.init({
    release: "WSVue-" + AppConst.application.version + "-" + AppConst.application.bundleVersion,
    dsn: "https://[email protected]/181356",
    transport: Sentry.Transports.FetchTransport,
    integrations: [new Sentry.Integrations.Vue({Vue})],
    environment: "DEVTEST",
    beforeSend: function (exception) {
        return exception;
    }
});

Aunque se ve hermoso cuando la aplicación se ejecuta como un sitio web

A continuación se muestra el mismo error registrado cuando la aplicación se ejecuta como sitio web
https://sentry.io/share/issue/4133deab3fc240f2bc85c680fae922a0/

Nunca usé Capacitor ni Ionic 4 tbh. ¿Puede proporcionar el caso de reproducción más pequeño posible que podría usar para depurar esto? No tengo suficiente tiempo para aprender a configurarlo.

@kamilogorek No hay problema He creado un proyecto de prueba para reproducir el problema. El condensador es exactamente similar a cordova. Mismo proceso de depuración.

https://github.com/stripathix/ionic-vue

Para activar un error, simplemente haga clic en el botón Activar error

Para ejecutar la aplicación, he agregado pasos en README.md. Es bastante fácil. Ambiente casi similar al de Córdoba.

Para depurar una aplicación híbrida, es exactamente similar a la depuración de Cordova. Simplemente ejecute la aplicación en el simulador y luego, desde safari, abra Inspector para ver una aplicación que se ejecuta en el simulador.

A continuación se muestra el enlace de error registrado cuando la aplicación ejecutaba una aplicación móvil híbrida.
https://sentry.io/share/issue/a19f3ecd72eb4e6fa216e4146ad91038/

hola, @kamilogorek , ¿tuviste la oportunidad de investigar esto?

No realmente, no tengo mucho tiempo libre en estos días. Intentaré investigarlo algún día, lo siento.

@kamilogorek Yo también estoy experimentando este problema. ¿Hay alguien más disponible que pueda investigar esto?

Lo siento, pero no tengo tiempo suficiente para abordar este problema en este momento.

Si desea investigar, le sugiero que:

• use la devolución de llamada beforeSend y vea si es el segundo argumento hint , tiene un atributo hint.originalException , si es así, investigue su pila y vea si la información está allí
• si no es así, entonces no hay mucho que podamos hacer
• si es así, establezca un punto de interrupción en el método computeStackTrace de https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts y paso a paso desde allí cómo digiere error.stack información

Usamos @sentry/browser en una aplicación Ionic Angular v4 con Cordova y tuvimos problemas similares con los seguimientos de pila mapeados en la fuente.

Determinamos que tenía que ver con Ionic Web View para Cordova y su uso de esquemas personalizados en iOS ( ionic:// para Cordova, capacitor:// para Capacitor). El esquema personalizado en los nombres de archivo de los marcos del seguimiento de la pila parece problemático para la desminificación.

Escribimos una solución alternativa para reescribir los esquemas de los nombres de archivo de ionic:// a http:// y luego funcionó como se esperaba. Aquí hay una versión simplificada de esto:

beforeSend = (event: Event) => {
  const exceptionValue = event.exception && event.exception.values && event.exception.values[0];

  // Approach taken from Sentry's React Native SDK.
  // See https://github.com/getsentry/sentry/issues/4719#issuecomment-333836573
  const stacktrace = event.stacktrace || (exceptionValue && exceptionValue.stacktrace);

  if (stacktrace) {
    stacktrace.frames.forEach(frame => {
      if (frame.filename !== "[native code]") {
        // The iOS webview uses a custom URL scheme for serving the web app.
        // See https://github.com/ionic-team/cordova-plugin-ionic-webview#iosscheme
        // The full URL with that scheme will be used for filenames in the stacktrace.
        // The URL begins with "ionic://localhost/".
        // The custom "ionic" scheme in the URL creates issues for source-mapped stacktraces.
        // Replacing "ionic" with "http" in the stackframe filename will enable source-mapped stacktraces.
        frame.filename = frame.filename.replace(/^ionic/, "http");
      }
    });
  }

  return event;
}

¡Espero que esto ayude!

@KevinKelchen : esto resuelve el nombre de archivo incorrecto, pero ¿cómo maneja los lineno y colno indefinidos? Al igual que @stripathix , los marcos no están definidos cuando se ejecutan dentro del condensador en una aplicación web de iOS. Ejemplo:

contra

Aunque a mí me parece que no falta información, sino marcos completos que faltan.

@kamilogorek : puedo confirmar que originalException tiene información de columna y línea, ver a continuación:

No tengo idea de cómo comenzar a depurar el kit de seguimiento, pero tal vez haya algo obvio que alguien detecte en lo anterior.

@silviogutierrez , ¿tiene alguna pequeña reproducción que pueda usar para depurar esto? Idealmente, solo una aplicación cordova básica con marcos que faltan col/line

@kamilogorek : intentaré armar uno, pero en realidad encontré el problema. Es bastante simple, y exactamente donde lo adivinó:

Aquí mismo: https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts

Las variables gecko y chrome vuelven vacías para la prueba de expresiones regulares en los marcos del condensador. Es decir, cuando se ejecuta en iOS, los marcos del condensador tienen capacitor://localhost/foo/bar y en Android http://localhost . Entonces, Tracekit elimina todos los marcos en iOS, excepto los que tienen [native code] que coinciden con la expresión regular. Me imagino que funciona bien en Android.

La simple ejecución de este (atroz) comando sed para cambiar la variable gecko soluciona el problema:

sed -i "s/moz-extension/moz-extension|capacitor/" node_modules/@sentry/browser/esm/tracekit.js

¿Debo abrir un PR contra Tracekit para agregar el protocolo del capacitor? Si nota, la expresión regular chrome es un poco más flexible y ya parece tener [-a-z] como parte de la expresión regular para cualquier número de protocolos. ¿Deberíamos probar eso en gecko también?

@silviogutierrez - ¿Alguna vez obtienes alguna resolución aquí? Si es necesario, puedo hacer una PR con su solución o incluso probarla localmente.

Mi solución funcionó. Desafortunadamente, nunca tuve tiempo de hacer un pequeño repositorio de reproducción con antes/después. Pero he estado usando la solución durante un tiempo con éxito.

Quedan dos preguntas:

1. ¿Se puede hacer esto genérico en el lado del centinela? ¿Algo así como *:// para un protocolo?
2. O, en cambio, ¿por qué el capacitor insiste en su propio protocolo (y solo en iOS)? ¿Por qué no usar uno de los enumerados en tracekit.ts ya?

Esas son buenas preguntas, y no tengo una muy buena respuesta para ninguna de las dos.

1. Parece que lo has resuelto con tu expresión regular.

2. Creo que eso es solo parte de todo el asunto de los esquemas personalizados Cordova / Ionic / Capacitor o lo que sea. Siento que también se relaciona con la estrategia de fijación de SSL para evadir la verificación previa de CORS desde la aplicación, pero no estoy seguro.

@kamilogorek - No estoy muy seguro de lo que quieres para una reproducción. Aquí está mi mejor oportunidad, supongo:

https://github.com/toddtarsi/cordova-create-react-app

Bifurqué este repositorio, agregué Sentry, agregué un límite de error de reacción, agregué un botón de bloqueo. Tiene instrucciones de ejecución de Cordova. Realmente es lo más básico que se obtiene con el Cordova moderno. Déjame saber si esto es lo que estás buscando.

@kamilogorek @silviogutierrez - Vale, ya no me quejo. He llegado a la conclusión de que la carga de este problema se reduce a la implementación de errores brutalmente obtusos por parte de Gecko/safari. Gracias por ser paciente y servicial conmigo aquí.

@toddtarsi lo siento, no tuve suficiente tiempo aquí, pero gracias por avisarme. Permítanme cerrar este problema, pero siéntanse libres de enviarme un ping y/o abrir uno nuevo si es necesario. ¡Gracias!

@kamilogorek , ¿le gustaría que creara un nuevo problema como se sugirió a @toddtarsi , o simplemente envíe un PR que se refiera a este?

Como se señaló en el comentario anterior de @silviogutierrez (https://github.com/getsentry/sentry-javascript/issues/1863#issuecomment-563364652), este es un problema particular de la versión modificada de tracekit de sentry-javascript, y puede fácilmente arreglarse en este proyecto (https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts#L49).

Problema: las aplicaciones de capacitor no envían stacktraces mapeables en iOS porque la expresión regular de gecko no permite su esquema de url capacitor://.
Solución: agregue el esquema de URL del condensador a la expresión regular de gecko.

Estoy a punto de bifurcar el proyecto y hacer el cambio para mi propio uso, si desea que envíe una solicitud de extracción, hágamelo saber.

@kamilogorek @mrlowe alguna actualización para la solicitud de extracción https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0? Sería útil para el soporte de condensadores que se analiza en el problema https://github.com/getsentry/sentry/issues/13169.

@ seanwu1105 nada de mí. Tengo esto funcionando en producción ahora y no he visto ningún problema.

@mrlowe , ¿tiene planes de hacer una RP para que ese cambio esté disponible para todos en el próximo lanzamiento? Nos enfrentamos al mismo problema cuando usamos Capacitor en una aplicación híbrida en iOS, y esta solución https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0 funciona para nosotros. ¡Gracias!

@albertinad No escuché nada de @kamilogorek , así que simplemente crearé el PR y me referiré a este problema. Si no se recoge, podemos crear un nuevo problema, supongo.

Perdón por la respuesta tardía @mrlowe , es demasiado fácil pasar por alto una mención en un tema ya cerrado. Estaré atento a las relaciones públicas, ¡gracias!