Sentry-javascript: Sentry lors de l'exécution sur un condensateur car l'application hybride stackrace n'a aucune information

Salut @kamilogorek , pourriez-vous s'il vous plaît aider avec cela.

Le nom de fichier dans les cadres de pile semble incorrect

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

Un autre exemple de console d'erreur ressemble à ceci. Raven.js ne reçoit aucune information d'erreur.

En sentinelle ça ressemble à ça

C'est la responsabilité de TraceKit d'extraire les informations de trames appropriées de l'erreur elle-même - https://github.com/getsentry/sentry-javascript/blob/master/packages/raven-js/vendor/TraceKit/tracekit.js

Cependant, nous y avons apporté quelques modifications dans le nouveau SDK @sentry/browser . Vous pouvez donc l'essayer avant de poursuivre nos recherches.

@kamilogorek
Avec @sentry/browser c'est encore pire c'est pourquoi je suis passé à Raven.

Vous trouverez ci-dessous à quoi cela ressemble lorsque l'application s'exécute en tant qu'application hybride utilisant un condensateur + Ionic 4 + VueJS + @sentry/browser

Ci-dessous se trouve le lien d'erreur qui est enregistré lorsque j'utilise @sentry/browser.

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

Voici à quoi ressemble la console

Configuration de sentinelle

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;
    }
});

Bien qu'il soit beau lorsque l'application en cours d'exécution s'exécute en tant que site Web

Ci-dessous, la même erreur est enregistrée lorsque l'application s'exécute en tant que site Web
https://sentry.io/share/issue/4133deab3fc240f2bc85c680fae922a0/

Je n'ai jamais utilisé de condensateur ni d'Ionic 4 tbh. Êtes-vous en mesure de fournir le plus petit cas de reproduction possible que je pourrais utiliser pour déboguer cela ? Je n'ai pas assez de temps pour apprendre à le configurer.

@kamilogorek Pas de problème J'ai créé un projet de test pour reproduire le problème. Le condensateur est exactement similaire à Cordova. Même processus de débogage.

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

Pour déclencher une erreur, cliquez simplement sur le bouton Déclencher une erreur

Pour exécuter l'application, j'ai ajouté des étapes sur README.md. C'est assez facile. Presque similaire à l'environnement de Cordoue.

Pour déboguer une application hybride, c'est exactement similaire au débogage Cordova. Exécutez simplement l'application sur le simulateur, puis à partir de safari, ouvrez l'inspecteur pour une application exécutée sur le simulateur.

Vous trouverez ci-dessous le lien de l'erreur enregistrée lorsque l'application exécutait une application mobile hybride.
https://sentry.io/share/issue/a19f3ecd72eb4e6fa216e4146ad91038/

salut, @kamilogorek avez-vous eu la chance d'examiner cela ?

Pas vraiment, je n'ai pas beaucoup de temps libre ces temps-ci. Je vais essayer d'enquêter un jour, désolé.

@kamilogorek Je rencontre moi aussi ce problème. Y a-t-il quelqu'un d'autre disponible qui peut se pencher là-dessus?

Désolé, mais je n'ai pas assez de temps pour m'occuper de ce problème en ce moment.

Si vous souhaitez enquêter, je vous suggère de :

• utilisez le rappel beforeSend et voyez s'il s'agit du 2ème argument hint , a un attribut hint.originalException , si c'est le cas, examinez sa pile et voyez si l'information est là du tout
• si ce n'est pas le cas, nous ne pouvons pas faire grand-chose
• si c'est le cas, définissez un point d'arrêt dans la méthode computeStackTrace de https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts et étape par étape à partir de là comment il assimile error.stack les informations

Nous utilisons @sentry/browser dans une application Ionic Angular v4 avec Cordova et avons rencontré des problèmes similaires avec les traces de pile mappées à la source.

Nous avons déterminé que cela avait à voir avec la vue Web ionique pour Cordova et son utilisation de schémas personnalisés sur iOS ( ionic:// pour Cordova, capacitor:// pour Capacitor). Le schéma personnalisé dans les noms de fichiers des trames de la trace de la pile semble problématique pour la déminification.

Nous avons écrit une solution de contournement pour réécrire les schémas des noms de fichiers de ionic:// à http:// , puis cela a fonctionné comme prévu. En voici une version simplifiée :

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;
}

J'espère que cela t'aides!

@KevinKelchen : cela résout le nom de fichier incorrect, mais comment gérez-vous les lineno et colno non définis ? Comme @stripathix , les cadres ont ceux qui sont indéfinis lors de l'exécution à l'intérieur du condensateur sur une application Web iOS. Exemple:

vs

Bien qu'il me semble qu'il ne manque pas d'informations mais des images entières qui manquent.

@kamilogorek : je peux confirmer que originalException contient des informations sur les colonnes et les lignes, voir ci-dessous :

Je ne sais même pas comment démarrer le débogage de tracekit, mais peut-être qu'il y a quelque chose d'évident que quelqu'un remarque ci-dessus.

@silviogutierrez avez-vous une petite reproduction que je pourrais utiliser pour déboguer cela ? Idéalement, juste une application Cordova de base avec des cadres qui manquent de col/line

@kamilogorek : Je vais essayer d'en créer un, mais j'ai trouvé le problème. C'est assez simple, et exactement là où vous l'avez deviné :

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

Les variables gecko et chrome reviennent vides pour le test regex sur les trames du condensateur. Autrement dit, lors de l'exécution sur iOS, les cadres du condensateur ont capacitor://localhost/foo/bar et sur Android http://localhost . Ainsi, Tracekit supprime tous les cadres dans iOS, à l' exception de ceux dont les [native code] correspondent à la regex. J'imagine que cela fonctionne bien sur Android.

L'exécution simple de cette (atroce) commande sed pour modifier la variable gecko résout le problème :

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

Dois-je ouvrir un PR contre Tracekit pour ajouter le protocole condensateur ? Si vous remarquez, la regex chrome est un peu plus flexible et semble déjà avoir [-a-z] dans le cadre de la regex pour n'importe quel nombre de protocoles. Devrions-nous essayer cela dans gecko aussi ?

@silviogutierrez - Avez-vous déjà trouvé une solution ici ? Si besoin est, je peux faire un PR avec votre correctif ou même le tester localement.

Mon correctif a fonctionné. Malheureusement, je n'ai jamais eu le temps de faire un petit repo de reproduction avec avant/après. Mais j'utilise le correctif depuis un certain temps avec succès.

Deux questions demeurent :

1. Cela peut-il être rendu générique du côté de la sentinelle ? Quelque chose comme *:// pour un protocole ?
2. Ou plutôt, pourquoi le condensateur insiste-t-il sur son propre protocole (et uniquement sur iOS) ? Pourquoi ne pas déjà utiliser l'un de ceux répertoriés dans tracekit.ts ?

Ce sont de bonnes questions, et je n'ai pas de très bonne réponse pour l'une ou l'autre.

1. Il semble que vous ayez compris cela avec votre regex.

2. Je pense que c'est juste une partie de l'ensemble des schémas personnalisés Cordova / Ionic / Capacitor ou autre. J'ai l'impression que cela est également lié à la stratégie d'épinglage SSL pour échapper au contrôle en amont CORS de l'application, mais je n'en suis pas sûr.

@kamilogorek - Je ne sais pas vraiment ce que vous voulez pour une reproduction. Voici mon meilleur coup je suppose:

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

J'ai bifurqué ce référentiel, ajouté Sentry, ajouté une limite d'erreur React, ajouté un bouton de blocage. Il a des instructions d'exécution Cordova. C'est vraiment la ligne de base que vous obtenez avec Cordova moderne. Faites-moi savoir si c'est ce que vous cherchez.

@kamilogorek @silviogutierrez - D'accord, j'ai fini de me plaindre ici. Je suis arrivé à la conclusion que le fardeau de ce problème se résume à la mise en œuvre d'erreur brutalement obtuse de la part de Gecko/safari. Merci d'être patient et utile avec moi ici.

@toddtarsi désolé je n'ai pas eu assez de temps ici, mais merci de me l'avoir fait savoir. Permettez-moi de fermer ce problème, mais n'hésitez pas à me contacter et/ou à ouvrir le nouveau si nécessaire. Merci!

@kamilogorek voudriez-vous que je crée un nouveau numéro comme suggéré à @toddtarsi , ou que je soumette simplement un PR faisant référence à celui-ci ?

Comme indiqué dans le commentaire de @silviogutierrez ci-dessus (https://github.com/getsentry/sentry-javascript/issues/1863#issuecomment-563364652), il s'agit d'un problème particulier à la version modifiée de tracekit de sentry-javascript, et peut facilement être corrigé dans ce projet (https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts#L49).

Problème : les applications de condensateur n'envoient pas de traces de pile mappables dans iOS, car l'expression régulière gecko n'autorise pas leur schéma d'url de condensateur://.
Solution : ajoutez le schéma d'URL du condensateur à l'expression régulière gecko.

Je suis sur le point de bifurquer le projet et de faire le changement pour mon propre usage, si vous souhaitez que je soumette une pull request faites le moi savoir !

@kamilogorek @mrlowe des mises à jour pour la demande d'extraction https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0 ? Ce serait utile pour la prise en charge des condensateurs discutée dans le numéro https://github.com/getsentry/sentry/issues/13169.

@ seanwu1105 rien de moi. Je l'ai actuellement en production et je n'ai rencontré aucun problème.

@mrlowe avez-vous l'intention de faire un PR pour rendre ce changement accessible à tous lors de la prochaine version ? Nous sommes confrontés au même problème lorsque nous utilisons Capacitor dans une application hybride dans iOS, et ce correctif https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0 fonctionne pour nous. Merci!

@albertinad Je n'ai rien entendu de @kamilogorek donc je vais juste créer le PR et me référer à ce problème. S'il n'est pas détecté, nous pouvons créer un nouveau problème, je suppose.

Désolé pour la réponse tardive @mrlowe , il est tout simplement trop facile de manquer une mention dans un numéro déjà clos. Je vais garder un œil sur les relations publiques, merci !