Sentry-javascript: Penjaga saat menjalankan kapasitor karena stackrace aplikasi hybrid tidak memiliki informasi apa pun

Hai @kamilogorek , bisakah Anda membantu dengan ini.

Nama file dalam bingkai tumpukan terlihat salah

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

Satu lagi contoh konsol kesalahan terlihat seperti ini. Raven.js tidak mendapatkan informasi kesalahan apa pun.

Di penjaga terlihat seperti ini

Merupakan tanggung jawab TraceKit untuk mengekstrak info bingkai yang tepat dari kesalahan itu sendiri – https://github.com/getsentry/sentry-javascript/blob/master/packages/raven-js/vendor/TraceKit/tracekit.js

Kami membuat beberapa perubahan pada @sentry/browser SDK yang baru, jadi Anda mungkin ingin mencobanya terlebih dahulu sebelum kami melakukan penyelidikan lebih lanjut.

@kamilogorek
Dengan @sentry/browser bahkan lebih buruk itu sebabnya saya pindah ke Raven.

Di bawah ini adalah tampilan ketika aplikasi berjalan sebagai aplikasi Hybrid menggunakan kapasitor + Ionic 4 + VueJS + @sentry/browser

Di bawah ini adalah tautan kesalahan yang dicatat ketika saya menggunakan @sentry/browser.

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

Seperti inilah tampilan konsolnya

Pengaturan Penjaga

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

Meskipun terlihat cantik saat menjalankan aplikasi yang dijalankan sebagai situs web

Di bawah ini adalah kesalahan yang sama yang dicatat saat aplikasi berjalan sebagai situs web
https://sentry.io/share/issue/4133deab3fc240f2bc85c680fae922a0/

Saya tidak pernah menggunakan Capacitor atau Ionic 4 tbh. Apakah Anda dapat memberikan repro-case sekecil mungkin yang dapat saya gunakan untuk men-debug ini? Saya tidak punya cukup waktu untuk mempelajari cara mengaturnya.

@kamilogorek Bukan masalah Saya telah membuat proyek uji untuk mereproduksi masalah. Kapasitor persis mirip dengan cordova. Proses debug yang sama.

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

Untuk memicu kesalahan cukup klik tombol Pemicu Kesalahan

Untuk menjalankan aplikasi saya telah menambahkan langkah-langkah di README.md. Ini cukup mudah. Hampir mirip dengan lingkungan Cordova.

Untuk men-debug aplikasi hybrid, ini persis mirip dengan debugging Cordova. Jalankan saja aplikasi di simulator dan kemudian dari Safari buka Inspektur untuk aplikasi yang berjalan di simulator.

Di bawah ini adalah tautan kesalahan yang dicatat saat aplikasi menjalankan aplikasi seluler hybrid.
https://sentry.io/share/issue/a19f3ecd72eb4e6fa216e4146ad91038/

hai, @kamilogorek apakah Anda mendapat kesempatan untuk melihat ini?

Tidak juga, saya tidak punya banyak waktu luang akhir-akhir ini. Akan mencoba menyelidikinya suatu hari nanti, maaf.

@kamilogorek Saya juga mengalami masalah ini. Apakah ada orang lain yang tersedia yang dapat melihat ke dalam ini?

Maaf, tapi saya tidak punya cukup waktu untuk menangani masalah ini sekarang.

Jika Anda ingin menyelidiki, saya sarankan untuk:

• gunakan beforeSend callback dan lihat apakah argumen ke-2 hint , memiliki atribut hint.originalException , jika demikian, selidiki tumpukannya dan lihat apakah informasinya ada sama sekali
• jika tidak, maka tidak banyak yang bisa kita lakukan
• jika ya, maka setel breakpoint dalam metode computeStackTrace dari https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts dan langkah demi langkah dari sana cara mencerna informasi error.stack

Kami menggunakan @sentry/browser dalam aplikasi Ionic Angular v4 dengan Cordova dan memiliki masalah serupa dengan pelacakan tumpukan yang dipetakan sumber.

Kami memutuskan itu ada hubungannya dengan Ionic Web View untuk Cordova dan penggunaan skema kustom di iOS ( ionic:// untuk Cordova, capacitor:// untuk Capacitor). Skema kustom dalam nama file bingkai jejak tumpukan tampaknya bermasalah untuk deminifikasi.

Kami menulis solusi untuk menulis ulang skema nama file dari ionic:// menjadi http:// dan kemudian berhasil seperti yang diharapkan. Ini adalah versi yang dilucuti:

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

Semoga ini membantu!

@KevinKelchen : ini memecahkan nama file yang salah, tetapi bagaimana Anda menangani lineno dan colno yang tidak ditentukan? Seperti @stripathix , frame memilikinya sebagai tidak terdefinisi saat berjalan di dalam kapasitor pada aplikasi web iOS. Contoh:

vs

Meskipun bagi saya sepertinya itu bukan info yang hilang tetapi seluruh bingkai yang hilang.

@kamilogorek : Saya dapat mengonfirmasi bahwa originalException memang memiliki info kolom dan baris, lihat di bawah:

Tidak tahu bagaimana memulai debugging tracekit, tapi mungkin ada sesuatu yang jelas terlihat di atas.

@silviogutierrez apakah Anda memiliki repro kecil yang dapat saya gunakan untuk men-debug ini? Idealnya hanya aplikasi cordova dasar dengan bingkai yang tidak memiliki col/line

@kamilogorek : Saya akan mencoba menyatukannya, tetapi saya benar-benar menemukan masalahnya. Ini cukup sederhana, dan persis seperti yang Anda duga:

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

Variabel gecko dan chrome keduanya kembali kosong untuk pengujian regex pada bingkai kapasitor. Artinya, ketika berjalan di iOS, bingkai kapasitor memiliki capacitor://localhost/foo/bar dan di Android http://localhost . Jadi Tracekit menjatuhkan semua bingkai di iOS kecuali yang dengan [native code] yang cocok dengan regex. Saya akan membayangkan itu berfungsi dengan baik di Android.

Sederhana menjalankan perintah sed (mengerikan) ini untuk mengubah variabel gecko memperbaiki masalah:

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

Haruskah saya membuka PR terhadap Tracekit untuk menambahkan protokol kapasitor? Jika Anda perhatikan, regex chrome sedikit lebih fleksibel dan tampaknya sudah memiliki [-a-z] sebagai bagian dari regex untuk sejumlah protokol. Haruskah kita mencobanya di gecko juga?

@silviogutierrez - Anda pernah mendapatkan resolusi di sini? Jika perlu, saya dapat membuat PR dengan perbaikan Anda atau bahkan mengujinya secara lokal.

Perbaikan saya berhasil. Sayangnya, saya tidak pernah punya waktu untuk membuat repo reproduksi kecil dengan sebelum/sesudah. Tapi saya telah menggunakan perbaikan untuk sementara waktu dengan sukses.

Dua pertanyaan tersisa:

1. Bisakah ini dibuat generik di sisi penjaga? Sesuatu seperti *:// untuk protokol?
2. Atau sebaliknya, mengapa kapasitor bersikeras pada protokolnya sendiri (dan hanya di iOS)? Mengapa tidak menggunakan salah satu yang sudah terdaftar di tracekit.ts?

Itu adalah pertanyaan yang bagus, dan saya juga tidak punya jawaban yang bagus untuk itu.

1. Sepertinya Anda sudah mengetahuinya dengan regex Anda.

2. Saya pikir itu hanya bagian dari keseluruhan skema kustom Cordova / Ionic / Capacitor atau apa pun. Saya merasa itu juga terkait dengan strategi penyematan SSL untuk menghindari CORS preflighting dari aplikasi, tapi saya tidak yakin.

@kamilogorek - Saya tidak begitu yakin apa yang Anda inginkan untuk repro. Inilah tembakan terbaik saya, saya kira:

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

Saya melakukan fork repo ini, menambahkan Sentry, menambahkan batas kesalahan React, menambahkan tombol crash. Ada instruksi menjalankan Cordova. Ini sangat mendasar seperti yang Anda dapatkan dengan Cordova modern. Beri tahu saya jika ini yang Anda cari.

@kamilogorek @silviogutierrez - Oke, saya sudah selesai mengeluh di sini. Saya telah sampai pada kesimpulan bahwa beban masalah ini bermuara pada implementasi kesalahan tumpul yang brutal dari pihak Gecko/safari. Terima kasih telah bersabar dan membantu saya di sini.

@toddtarsi maaf saya tidak punya cukup waktu di sini, tapi terima kasih telah memberi tahu saya. Biarkan saya menutup masalah ini, tetapi silakan ping saya dan/atau buka yang baru jika perlu. Terima kasih!

@kamilogorek apakah Anda ingin saya membuat masalah baru seperti yang disarankan ke @toddtarsi , atau hanya mengirimkan PR yang mengacu pada yang ini?

Seperti yang ditunjukkan dalam komentar @silviogutierrez di atas (https://github.com/getsentry/sentry-javascript/issues/1863#issuecomment-563364652) ini adalah masalah khusus untuk versi tracekit yang di-tweak sentry-javascript, dan dapat dengan mudah diperbaiki dalam proyek ini (https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts#L49).

Masalah: Aplikasi kapasitor tidak mengirim jejak tumpukan yang dapat dipetakan di iOS karena regex tokek tidak mengizinkan skema kapasitor:// url mereka.
Solusi: Tambahkan skema url kapasitor ke regex tokek.

Saya akan melakukan fork proyek dan membuat perubahan untuk penggunaan saya sendiri, jika Anda ingin saya mengirimkan permintaan tarik, beri tahu saya!

@kamilogorek @mrlowe ada pembaruan untuk permintaan tarik https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0? Akan sangat membantu untuk dukungan kapasitor yang dibahas dalam masalah https://github.com/getsentry/sentry/issues/13169.

@ seanwu1105 tidak ada apa-apa dari saya. Saya menjalankan ini dalam produksi sekarang dan belum melihat masalah.

@mrlowe apakah Anda punya rencana untuk membuat PR agar perubahan itu tersedia untuk semua orang di rilis berikutnya? Kami menghadapi masalah yang sama saat menggunakan Capacitor dalam aplikasi hybrid di iOS, dan perbaikan ini https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0 berfungsi untuk kami. Terima kasih!

@albertinad Saya tidak mendengar kabar apa pun dari @kamilogorek jadi saya hanya akan membuat PR dan merujuk ke masalah ini. Jika tidak diangkat, saya kira kita bisa membuat masalah baru.

Maaf atas tanggapan yang terlambat @mrlowe , terlalu mudah untuk melewatkan penyebutan dalam masalah yang sudah ditutup. Akan mengawasi PR, terima kasih!