Sentry-javascript: Sentry beim Überfahren des Kondensators als Hybrid-App-Stackrace hat keine Informationen

Hallo @kamilogorek , könntest du bitte dabei helfen.

Dateiname in Stapelrahmen sieht falsch aus

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

Eine weitere Beispielfehlerkonsole sieht so aus. Raven.js erhält keine Fehlerinformationen.

Auf Wache sieht es so aus

Es liegt in der Verantwortung von TraceKit, die richtigen Frame-Informationen aus dem Fehler selbst zu extrahieren – https://github.com/getsentry/sentry-javascript/blob/master/packages/raven-js/vendor/TraceKit/tracekit.js

Wir haben jedoch einige Änderungen im neuen @sentry/browser SDK vorgenommen, also sollten Sie es vielleicht zuerst ausprobieren, bevor wir weitere Nachforschungen anstellen.

@kamilogorek
Mit @sentry/browser ist es noch schlimmer, deshalb bin ich zu Raven gewechselt.

Unten sehen Sie, wie es aussieht, wenn die App als Hybrid-App mit Kondensator + Ionic 4 + VueJS + @sentry/browser ausgeführt wird

Unten ist der Link des Fehlers, der protokolliert wird, wenn ich @sentry/browser verwende.

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

So sieht die Konsole aus

Sentry-Setup

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

Obwohl es schön aussieht, wenn die laufende Anwendung als Website ausgeführt wird

Unten ist derselbe Fehler protokolliert, wenn die App als Website ausgeführt wird
https://sentry.io/share/issue/4133deab3fc240f2bc85c680fae922a0/

Ich habe weder Kondensator noch Ionic 4 tbh verwendet. Können Sie den kleinstmöglichen Repro-Fall bereitstellen, den ich zum Debuggen verwenden könnte? Ich habe nicht genug Zeit, um zu lernen, wie man es einrichtet.

@kamilogorek Kein Problem Ich habe ein Testprojekt erstellt, um das Problem zu reproduzieren. Kondensator ist Cordova genau ähnlich. Gleicher Debugging-Prozess.

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

Um einen Fehler auszulösen, klicken Sie einfach auf die Schaltfläche Fehler auslösen

Um die Anwendung auszuführen, habe ich Schritte in README.md hinzugefügt. Es ist ziemlich einfach. Fast ähnlich wie in Cordova.

Das Debuggen von Hybrid-Apps ist dem Cordova-Debugging genau ähnlich. Führen Sie einfach die App auf dem Simulator aus und öffnen Sie dann von Safari aus Inspector für eine App, die auf dem Simulator ausgeführt wird.

Unten ist der Link des Fehlers, der protokolliert wurde, als die App eine hybride mobile App ausführte.
https://sentry.io/share/issue/a19f3ecd72eb4e6fa216e4146ad91038/

Hi, @kamilogorek hattest du Gelegenheit, das zu prüfen?

Nicht wirklich, ich habe heutzutage nicht viel Freizeit. Werde versuchen, es eines Tages zu untersuchen, sorry.

@kamilogorek Auch ich habe dieses Problem. Gibt es noch jemanden, der sich das ansehen kann?

Tut mir leid, aber ich habe im Moment nicht genug Zeit, um dieses Problem anzugehen.

Wenn Sie nachforschen möchten, würde ich vorschlagen:

• Verwenden Sie beforeSend Callback und sehen Sie, ob es das zweite Argument hint ist, ein hint.originalException Attribut hat, wenn ja, untersuchen Sie seinen Stack und sehen Sie, ob die Informationen überhaupt vorhanden sind
• Wenn nicht, können wir nicht viel tun
• Wenn dies der Fall ist, setzen Sie einen Haltepunkt in der Methode computeStackTrace von https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts und Schritt für Schritt von dort aus wie es error.stack Informationen verdaut

Wir verwenden @sentry/browser in einer Ionic Angular v4-App mit Cordova und hatten ähnliche Probleme mit Source-Mapping-Stack-Traces.

Wir stellten fest, dass dies mit der Ionic Web View für Cordova und der Verwendung benutzerdefinierter Schemata unter iOS zu tun hatte ( ionic:// für Cordova, capacitor:// für Capacitor). Das benutzerdefinierte Schema in den Dateinamen der Frames des Stack-Trace erscheint problematisch für die Entminifizierung.

Wir haben eine Problemumgehung geschrieben, um die Schemata der Dateinamen von ionic:// in http:// umzuschreiben, und dann hat es wie erwartet funktioniert. Hier ist eine abgespeckte Version davon:

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

Hoffe das hilft!

@KevinKelchen : Dies löst den falschen Dateinamen, aber wie gehen Sie mit den undefinierten lineno und colno ? Wie @stripathix haben die Frames diese als undefiniert, wenn sie innerhalb des Kondensators in einer iOS-Web-App ausgeführt werden. Beispiel:

vs

Obwohl es mir so vorkommt, als ob keine Informationen fehlen, sondern ganze Frames , die fehlen.

@kamilogorek : Ich kann bestätigen, dass originalException Spalten- und Zeileninformationen enthält, siehe unten:

Ich habe keine Ahnung, wie man überhaupt mit dem Debuggen von Tracekit beginnt, aber vielleicht gibt es etwas Offensichtliches, das jemand oben entdeckt.

@silviogutierrez hast du ein kleines Repro, mit dem ich das debuggen könnte? Idealerweise nur eine einfache Cordova-App mit Frames, denen col/line fehlt

@kamilogorek : Ich werde versuchen, einen zusammenzustellen, aber ich habe das Problem tatsächlich gefunden. Es ist ganz einfach und genau dort, wo Sie es erraten haben:

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

Die Variablen gecko und chrome kommen beide leer für den Regex-Test auf den Frames des Kondensators zurück. Das heißt, wenn sie unter iOS ausgeführt werden, haben die Frames von Kondensatoren capacitor://localhost/foo/bar und unter Android http://localhost . Tracekit löscht also alle Frames in iOS außer denen mit [native code] , die mit der Regex übereinstimmen. Ich könnte mir vorstellen, dass es auf Android gut funktioniert.

Das einfache Ausführen dieses (schrecklichen) sed-Befehls zum Ändern der gecko -Variablen behebt das Problem:

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

Sollte ich eine PR gegen Tracekit eröffnen, um das Kondensatorprotokoll hinzuzufügen? Wie Sie bemerken, ist die Regex chrome etwas flexibler und scheint bereits [-a-z] als Teil der Regex für eine beliebige Anzahl von Protokollen zu haben. Sollten wir das auch in gecko versuchen?

@silviogutierrez - Hast du hier jemals eine Lösung bekommen? Bei Bedarf kann ich eine PR mit Ihrem Fix erstellen oder ihn sogar vor Ort testen.

Meine Lösung hat funktioniert. Leider hatte ich nie Zeit, ein kleines Repo mit Vorher/Nachher zu machen. Aber ich benutze den Fix schon eine Weile erfolgreich.

Zwei Fragen bleiben:

1. Kann dies auf der Seite des Wachpostens generisch gemacht werden? Etwas wie *:// für ein Protokoll?
2. Oder warum besteht der Kondensator stattdessen auf einem eigenen Protokoll (und nur auf iOS)? Warum nicht bereits eines der in tracekit.ts aufgeführten verwenden?

Das sind gute Fragen, und auf beide habe ich keine sehr gute Antwort.

1. Es scheint, als hätten Sie das mit Ihrer Regex herausgefunden.

2. Ich denke, das ist nur ein Teil der ganzen benutzerdefinierten Schemata von Cordova / Ionic / Capacitor oder was auch immer. Ich habe das Gefühl, dass es auch mit der SSL-Pinning-Strategie zusammenhängt, um das CORS-Preflighting aus der App zu umgehen, aber ich bin mir nicht sicher.

@kamilogorek - Ich bin mir nicht sicher, was Sie für eine Repro wollen. Hier ist meine beste Aufnahme, denke ich:

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

Ich habe dieses Repo gegabelt, Sentry hinzugefügt, eine React-Fehlergrenze hinzugefügt und eine Absturzschaltfläche hinzugefügt. Es hat Cordova-Laufanweisungen. Es ist so grundlegend, wie Sie es mit modernem Cordova wirklich bekommen. Lassen Sie mich wissen, ob Sie danach suchen.

@kamilogorek @silviogutierrez - Okay, ich bin fertig damit, mich hier zu beschweren. Ich bin zu dem Schluss gekommen, dass die Last dieses Problems auf die brutal stumpfe Fehlerimplementierung seitens Gecko / Safari zurückzuführen ist. Danke, dass Sie geduldig und hilfsbereit mit mir hier sind.

@toddtarsi Entschuldigung, ich hatte hier nicht genug Zeit, aber danke, dass du es mich wissen lässt. Lassen Sie mich dieses Problem schließen, aber zögern Sie nicht, mich anzupingen und / oder das neue Problem zu öffnen, falls erforderlich. Danke!

@kamilogorek möchtest du, dass ich ein neues Problem erstelle, wie es @toddtarsi vorgeschlagen wurde, oder einfach eine PR mit Bezug auf dieses einreichst?

Wie im obigen Kommentar von @silviogutierrez (https://github.com/getsentry/sentry-javascript/issues/1863#issuecomment-563364652) erwähnt, handelt es sich um ein Problem, das speziell für die optimierte Version von Tracekit von sentry-javascript gilt und leicht auftreten kann in diesem Projekt behoben werden (https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts#L49).

Problem: Kondensator-Apps senden keine abbildbaren Stacktraces in iOS, da die Gecko-Regex ihr URL-Schema „capacitor://“ nicht zulässt.
Lösung: Fügen Sie das Kondensator-URL-Schema zur Gecko-Regex hinzu.

Ich bin dabei, das Projekt zu forken und die Änderung für meinen eigenen Gebrauch vorzunehmen. Wenn Sie möchten, dass ich eine Pull-Anfrage einreiche, lassen Sie es mich wissen!

@kamilogorek @mrlowe irgendwelche Updates für die Pull-Anforderung https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0? Es wäre hilfreich für die im Issue https://github.com/getsentry/sentry/issues/13169 diskutierte Kondensatorunterstützung.

@seanwu1105 nichts von mir. Ich habe das jetzt in Produktion und habe keine Probleme gesehen.

@mrlowe hast du Pläne, eine PR zu machen, um diese Änderung bei der nächsten Version für alle verfügbar zu machen? Wir haben das gleiche Problem, wenn wir Capacitor in einer Hybrid-App in iOS verwenden, und dieser Fix https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0 funktioniert für uns. Danke!

@albertinad Ich habe nichts von @kamilogorek gehört , also werde ich einfach die PR erstellen und auf dieses Problem verweisen. Wenn es nicht abgeholt wird, können wir ein neues Problem erstellen, nehme ich an.

Entschuldigen Sie die späte Antwort @mrlowe , es ist einfach zu leicht, eine Erwähnung in einem bereits geschlossenen Problem zu übersehen. Werde die PR im Auge behalten, danke!