Sentry-javascript: @penjaga/ukuran browser

Hei, terima kasih telah mengangkat ini.
Meskipun kami memahami dan secara umum setuju dengan kekhawatiran Anda tentang ukuran bundel, saya pikir adil untuk membandingkan terlebih dahulu ukuran bundel gzip alih-alih ukuran file yang diperkecil yang tidak terkompresi:

@sentry/browser adalah 21,3799 KB
raven-js 13,44 KB

Selain itu, meskipun ini mungkin tidak berlaku untuk semua orang, kami menyediakan dan biasanya memandu orang untuk menggunakan CDN Loader kami yang akan menyiapkan SDK untuk Anda di situs web Anda.

lihat: https://docs.sentry.io/quickstart/?platform=browser

Jejak dan dampak pada waktu pemuatan halaman Anda dari skrip ini <1KB di-gzip sambil menjaga fungsionalitas yang sama.

jadi tl; dr:
Kami menyadarinya, kami tahu ada ruang untuk perbaikan tetapi itu bukan prioritas utama saat ini.

Saya pikir adil untuk membandingkan ukuran bundel gzip terlebih dahulu daripada ukuran file yang diperkecil yang tidak terkompresi:

Saya berpendapat itu juga adil untuk membandingkan ukuran yang diperkecil karena masalah kinerja tidak hanya muncul dari mengunduh javascript, tetapi juga dari penguraian dan eksekusi. ~92kb cukup besar dan dapat menambahkan hingga 1 detik waktu parse pada perangkat kelas bawah (hanya untuk perpustakaan yang satu ini!).

Saya tidak yakin dari mana Anda mengambil jumlah < 1KB untuk skrip CDN. Bisakah Anda menguraikannya? Ketika saya membuka https://browser.sentry-cdn.com/4.0.4/bundle.min.js saya melihat ukuran gzip 22KB.

Anda harus menyadari bahwa sdk penjaga hanyalah salah satu dari banyak perpustakaan yang disertakan oleh pengembang.

PS: Saya suka penjaga, ini sangat membantu kami. Performa web hanyalah sesuatu yang saya sukai. ;)

@klaemo
Hehe, jangan khawatir

Seperti yang saya katakan, kami sadar dan bukan berarti kami tidak menginginkannya menjadi lebih kecil.
Prioritas tertinggi bagi kami adalah mengirimkan SDK baru, kami akan berupaya meningkatkan ukuran bundel dari waktu ke waktu.
Masih banyak lagi langkah yang bisa kita lakukan, misal: gunakan tslib , gabungkan string ...
Jadi ada banyak ruang untuk perbaikan.

Maaf, link yang saya posting sebelumnya sudah kedaluwarsa
Saya merujuk ke _Loader_: https://docs.sentry.io/platforms/javascript/loader/
Sementara _Loader_ juga memiliki keterbatasan karena sifatnya yang asinkron dan pada akhirnya, ia masih mengambil dan menyuntikkan SDK (bahkan jika itu asinkron) ini adalah alternatif yang kami tawarkan karena orang memintanya.

@HazAT Maaf, teman-teman, tetapi bisakah Anda memberikan tanggal rilis versi berikutnya?
Maksud saya, sudah ada beberapa perubahan di cabang #master tetapi belum dirilis. Yang memutuskan adalah versi 4x dapat digunakan untuk proyek Angular5+.

@rayzru Baru saja merilis 4.0.5 , tetapi harap simpan posting yang terkait dengan topik tersebut.

Menurut pendapat saya, ini jelas merupakan regresi dan alasan serius untuk tidak memperbarui ke versi baru.

Saya baru saja akan meningkatkan hingga saya perhatikan bahwa:

• sebelumnya: https://bundlephobia.com/[email protected]
• setelah: https://bundlephobia.com/result?p=@sentry/browser @4.0.1

Setidaknya ukuran paket lebih kecil , tetapi saya pikir ️ +10 KB JavaScript yang di-gzip dalam satu bundel adalah signifikan. Kami akan menunggu, terus bekerja dengan baik :)

@HazAT Mungkinkah menghasilkan file esm. Itu akan memungkinkan webpack untuk memiliki hasil yang lebih baik dengan penggabungan dan goyangan pohon.

Anda mungkin ingin menambahkan beberapa alat CI untuk melacak ukuran bundel paket untuk setiap permintaan penggabungan. Karena masalah ini sebenarnya telah berkembang menjadi 100 kB, lihat https://bundlephobia.com/result?p=@sentry/browser @4.3.0

Coba misalnya https://github.com/siddharthkp/bundlesize

Anggaran kinerja default untuk titik masuk di Webpack adalah 250 kb untuk memastikan Anda mendapatkan kinerja yang layak di perangkat dan jaringan apa pun. 100 kb Sentry memakan cukup banyak anggaran itu.

Harap beri tahu kami jika memperbaiki regresi ini ada di peta jalan sama sekali, atau jika perpustakaan akan terus berkembang tanpa anggaran yang besar.

Kami membayar pelanggan dan banyak berinvestasi di Sentry di backend, asli dan web, tetapi peningkatan ke lebih dari 3x ukuran perpustakaan ([email protected] adalah 31 kB) bukanlah sesuatu yang dapat kami pertanggungjawabkan.

@jacobrask Anda dapat tetap menggunakan perpustakaan versi lama, itulah yang kami lakukan di https://www.onepixel.com/ , berfungsi dengan baik .

@jacobrask Pasti ada di daftar kami dan kami juga berpikir ada beberapa buah yang menggantung rendah di mana kami dapat dengan mudah mengurangi ukuran bundel kami.
Semakin banyak orang yang meminta ini jadi kami mungkin akan menangani ini lebih cepat dari yang diharapkan.

@HazAT
Bundel rollup SDK browser penjaga dapat dioptimalkan. Dalam file bundel min js, ada banyak kode tslib yang diulang. Seperti __generator, __assign. Di Browser env, yang terbaik adalah membagikan satu kode. Tetapi proyek browser menggunakan file dist paket lain. Mungkin kurangi ukuran gzip dari 23K menjadi 16K.

Ukuran bundel sama di 4.3.2
https://bundlephobia.com/result?p=@sentry/browser @4.3.2 terlepas dari perubahan dari
https://github.com/getsentry/sentry-javascript/pull/1738 :(

@vkrol Kami harus mengembalikan perubahan yang dibuat @gaterking , setidaknya untuk paket npm.
Bundel pada CDN di sisi lain harus lebih kecil.

Kami pasti akan menambahkan kembali perubahan tetapi kami perlu membicarakannya karena kami membutuhkan dep pada tslib misalnya.
Juga bagaimana pengetikan dihasilkan rusak.

@HazAT Oke, terima kasih.

@vkrol Kami harus mengembalikan perubahan yang dibuat @gaterking , setidaknya untuk paket npm.
Bundel pada CDN di sisi lain harus lebih kecil.

Kami pasti akan menambahkan kembali perubahan tetapi kami perlu membicarakannya karena kami membutuhkan dep pada tslib misalnya.
Juga bagaimana pengetikan dihasilkan rusak.

Berharap secepat mungkin.

@gaterking @kamilogorek Sudah diperbaiki https://github.com/getsentry/sentry-javascript/pull/1751
Kami hanya harus melakukan rilis "mendesak" itu sebabnya kami mengembalikannya.

Di sisi klien, pada dasarnya saya ingin ini menangkap kesalahan dan mengirimkannya ke API.

Apa lagi yang dilakukan perpustakaan ini yang begitu rumit?

Sangat sulit untuk memahami mengapa pelapor kesalahan yang lebih sederhana perlu memiliki jejak yang begitu besar

@mindplay-dk Sebagian besar karena JavaScript dan Browser berantakan ^^
Kami perlu melakukan banyak perbaikan pada jejak tumpukan yang rusak/salah.
Tugas sederhana "hanya menangkap kesalahan" juga jauh lebih kompleks daripada yang terlihat.

Sangat sulit untuk memahami mengapa pelapor kesalahan yang lebih sederhana perlu memiliki jejak yang begitu besar

@mindplay-dk karena itu tidak sederhana.

Berikut kode untuk hanya menangkap kesalahan di semua browser dan menyatukannya menjadi struktur data yang dapat digunakan: https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts

Dilakukan dengan baik pada pengurangan ukuran baru-baru ini, sangat dihargai. 👍

Sekilas file tertaut menunjukkan kode untuk menangani kesalahan untuk Opera 10, apakah itu benar-benar masih diperlukan? TraceKit juga tidak memperhitungkan peningkatan ukuran 2x (saat ini) dari Raven, yang sudah besar.

Beberapa saran:

• Hapus md5
• Kurangi penggunaan async/menunggu, ini dikompilasi dengan buruk ke ES5. Bandingkan https://github.com/getsentry/sentry-javascript/blob/master/packages/core/src/baseclient.ts#L307 -L378 dengan kode keluaran (cari "processEvent" di bundel produksi). Seluruh file itu menjadi besar dalam bundel produksi.

Apakah ada beberapa kode bersama( app:///${base} di rewriteframes.ts) di paket lain seperti paket/inti? Mereka tidak digunakan oleh klien, tetapi digunakan oleh node.

karena itu tidak sederhana.

@kamilogorek astaga , Anda jelas benar... Saya menyadari JavaScript berantakan - Saya kira saya belum pernah menggali area ini sebelumnya, saya tidak menyadari betapa buruknya ini. Saya kira benar-benar tidak ada cara sederhana untuk menangani pelacakan tumpukan di JS. Hanya. Astaga. 😐.

Alih-alih hanya mencoba meminimalkan pembantu, Anda bisa menyediakan file esm yang telah disebutkan, itu mudah dan bahkan praktik terbaik hari ini.

Kurangi penggunaan async/menunggu, ini dikompilasi dengan buruk ke ES5. Bandingkan https://github.com/getsentry/sentry-javascript/blob/master/packages/core/src/baseclient.ts#L307 -L378 dengan kode keluaran (cari "processEvent" di bundel produksi). Seluruh file itu menjadi besar dalam bundel produksi.

Itu cara yang salah, daripada mengoptimalkan lebih lanjut untuk ES5, lebih penting untuk mengoptimalkan 80.07% yang menggunakan browser modern.

Untuk semua orang yang membutuhkan dukungan browser lama:
Fungsi async didukung oleh browser apa pun yang mendukung <script type="module"> (caniuse: esm , async ) jadi hanya pengguna browser lama yang perlu menunggu lebih lama (toh butuh waktu lebih lama untuk mereka)

Bukti:
160KB (es5, dibundel) > 119KB (esm, file biasa)

Jadi tolong bundel file esm (juga), semudah mengubah pengaturan module dan target di /tsconfig.esm.json (yang meluas tsconfig.build.json ) menjadi esnext , menambahkan file tsconfig.esm.json yang mirip dengan file tsconfig.build.json ke dalam paket, tambahkan ke build dan paket dan tentukan entri modul di package.json

Jika Anda mau, saya dapat menambahkan PR untuk itu.

Jika Anda mau, saya dapat menambahkan PR untuk itu.

Saya ingin @cromefire itu :)

Akan luar biasa jika ada opsi untuk memilih antara mode klasik dan modern, seperti vue cli. Di mana versi modern hanya memiliki dukungan untuk sebagian besar browser modern dan dengan demikian dapat mengurangi pembengkakan.

Atau lebih baik lagi jika dapat bekerja seperti webpack env, sehingga pengguna dapat menentukan dukungan browser yang dibutuhkan. Tentu, ini bukan fitur yang mudah, tetapi hanya ingin membuangnya :)

Produk yang luar biasa!

Dengan PR baru itu Anda dapat mengonfigurasi babel namun Anda hanya ingin mendukung browser yang Anda butuhkan

Ukuran @sentry/browser lebih dari dua kali lebih besar dari ukuran raven-js: 86 kB vs 39 kB (diperkecil).

FYI: ukuran versi terbaru @sentry/browser ditingkatkan menjadi 91,8 kB . Sumber: https://bundlephobia.com/result?p=@sentry/browser @4.5.0.

@cromefire Terima kasih atas pekerjaan Anda dengan mengoptimalkan ukuran perpustakaan!

Saya baru saja mencoba menggunakan esm build baru dari v4.5.0 tetapi saya mendapatkan banyak kesalahan. Semuanya dipicu karena modul dari @sentry/utils/esm tidak dapat diselesaikan.

Sebenarnya saya tidak menemukan folder di node_modules setelah yarn install baru. (Lihat tangkapan layar)

 GALAT di ./node_modules/@sentry/core/esm/baseclient.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/async' di './node_modules/@sentry/core/esm'

 GALAT di ./node_modules/@sentry/browser/esm/backend.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/is' di './node_modules/@sentry/browser/esm'

 GALAT di ./node_modules/@sentry/browser/esm/tracekit.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/is' di './node_modules/@sentry/browser/esm'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/is' di './node_modules/@sentry/browser/esm/integrations'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/helpers.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/is' di './node_modules/@sentry/browser/esm/integrations'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/pluggable/vue.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/is' di './node_modules/@sentry/browser/esm/integrations/pluggable'

 GALAT di ./node_modules/@sentry/core/esm/baseclient.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/is' di './node_modules/@sentry/core/esm'

 GALAT di ./node_modules/@sentry/core/esm/dsn.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/is' di './node_modules/@sentry/core/esm'

 GALAT di ./node_modules/@sentry/core/esm/integrations/inboundfilters.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/is' di './node_modules/@sentry/core/esm/integrations'

 GALAT di ./node_modules/@sentry/core/esm/integrations/extraerrordata.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/is' di './node_modules/@sentry/core/esm/integrations'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/globalhandlers.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/logger' di './node_modules/@sentry/browser/esm/integrations'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/logger' di './node_modules/@sentry/browser/esm/integrations'

 GALAT di ./node_modules/@sentry/core/esm/baseclient.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/logger' di './node_modules/@sentry/core/esm'

 GALAT di ./node_modules/@sentry/core/esm/basebackend.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/logger' di './node_modules/@sentry/core/esm'

 GALAT di ./node_modules/@sentry/core/esm/sdk.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/logger' di './node_modules/@sentry/core/esm'

 GALAT di ./node_modules/@sentry/core/esm/integration.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/logger' di './node_modules/@sentry/core/esm'

 GALAT di ./node_modules/@sentry/core/esm/integrations/dedupe.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/logger' di './node_modules/@sentry/core/esm/integrations'

 GALAT di ./node_modules/@sentry/core/esm/integrations/sdkinformation.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/logger' di './node_modules/@sentry/core/esm/integrations'

 GALAT di ./node_modules/@sentry/core/esm/integrations/inboundfilters.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/logger' di './node_modules/@sentry/core/esm/integrations'

 GALAT di ./node_modules/@sentry/hub/esm/hub.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/logger' di './node_modules/@sentry/hub/esm'

 GALAT di ./node_modules/@sentry/browser/esm/client.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/browser/esm'

 GALAT di ./node_modules/@sentry/browser/esm/tracekit.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/browser/esm'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/useragent.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/browser/esm/integrations'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/browser/esm/integrations'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/trycatch.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/browser/esm/integrations'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/helpers.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/browser/esm/integrations'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/pluggable/reportingobserver.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/browser/esm/integrations/pluggable'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/pluggable/vue.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/browser/esm/integrations/pluggable'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/pluggable/ember.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/browser/esm/integrations/pluggable'

 GALAT di ./node_modules/@sentry/browser/esm/transports/beacon.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/browser/esm/transports'

 GALAT di ./node_modules/@sentry/browser/esm/transports/fetch.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/browser/esm/transports'

 GALAT di ./node_modules/@sentry/core/esm/baseclient.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/core/esm'

 GALAT di ./node_modules/@sentry/core/esm/integrations/dedupe.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/core/esm/integrations'

 GALAT di ./node_modules/@sentry/core/esm/integrations/inboundfilters.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/core/esm/integrations'

 GALAT di ./node_modules/@sentry/hub/esm/scope.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/hub/esm'

 GALAT di ./node_modules/@sentry/hub/esm/hub.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/misc' di './node_modules/@sentry/hub/esm'

 GALAT di ./node_modules/@sentry/browser/esm/parsers.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/object' di './node_modules/@sentry/browser/esm'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/object' di './node_modules/@sentry/browser/esm/integrations'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/trycatch.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/object' di './node_modules/@sentry/browser/esm/integrations'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/helpers.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/object' di './node_modules/@sentry/browser/esm/integrations'

 GALAT di ./node_modules/@sentry/core/esm/api.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/object' di './node_modules/@sentry/core/esm'

 GALAT di ./node_modules/@sentry/core/esm/basebackend.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/object' di './node_modules/@sentry/core/esm'

 GALAT di ./node_modules/@sentry/core/esm/dsn.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/object' di './node_modules/@sentry/core/esm'

 GALAT di ./node_modules/@sentry/hub/esm/scope.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/object' di './node_modules/@sentry/hub/esm'

 GALAT di ./node_modules/@sentry/core/esm/integrations/pluggable/rewriteframes.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/path' di './node_modules/@sentry/core/esm/integrations/pluggable'

 GALAT di ./node_modules/@sentry/browser/esm/parsers.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/string' di './node_modules/@sentry/browser/esm'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/string' di './node_modules/@sentry/browser/esm/integrations'

 GALAT di ./node_modules/@sentry/core/esm/baseclient.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/string' di './node_modules/@sentry/core/esm'

 GALAT di ./node_modules/@sentry/core/esm/integrations/inboundfilters.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/string' di './node_modules/@sentry/core/esm/integrations'

 GALAT di ./node_modules/@sentry/browser/esm/backend.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/supports' di './node_modules/@sentry/browser/esm'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/supports' di './node_modules/@sentry/browser/esm/integrations'

 GALAT di ./node_modules/@sentry/browser/esm/integrations/pluggable/reportingobserver.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/supports' di './node_modules/@sentry/browser/esm/integrations/pluggable'

 GALAT di ./node_modules/@sentry/browser/esm/transports/fetch.js

 Modul tidak ditemukan: Kesalahan: Tidak dapat menyelesaikan '@sentry/utils/esm/supports' di './node_modules/@sentry/browser/esm/transports'

@pascaliske esm build masih dalam tahap percobaan dan kami belum mendokumentasikannya secara publik. Kami akan melakukannya setelah semuanya diuji dan akan memposting temuan kami di sini.

@kamilogorek Ya, saya tahu. Hanya ingin memberi tahu Anda tentang kesalahan ini. 🙂.

Terima kasih, hargai @pascaliske! Kami akan mencoba memberikan dukungan ESM sesegera mungkin :)

@pascaliske coba yarn build dulu

@cromefire Tidak, ini tidak akan membantu saya pikir. Saya baru saja mengunduh paket dari npm sehingga tidak ada lingkungan build yang tersedia. 🙂.

Saya mencari sedikit melalui kode sumber dan membandingkan @sentry/browser dengan @sentry/utils . Saya pikir ini masalahnya: package/utils/tsconfig.build.json#L5 vs. packages/browser/tsconfig.build.json#L5 . Apakah mungkin output build normal menimpa output build esm? 🤔.

Di dalam folder node_modules saya, paket browser berisi output build dari normal dan esm. Tetapi paket utils hanya berisi output build normal di folder root.

Apakah sudah dirilis?

Saya mencari sedikit melalui kode sumber dan membandingkan @sentry/browser dengan @sentry/utils . Saya pikir ini masalahnya: package/utils/tsconfig.build.json#L5 vs. packages/browser/tsconfig.build.json#L5 . Apakah mungkin output build normal menimpa output build esm? 🤔.

Tidak, Anda harus melihat esm tsconfig

Di lihat besok

Hai semua! Kami juga mencari-cari beberapa ukuran bundel di Sentry, dan menemukan ini: https://github.com/getsentry/sentry-javascript/blob/master/packages/minimal/package.json#L20

Sepertinya itu menambahkan sepotong ukuran untuk sangat sedikit fungsi (menyebarkan dan menetapkan). Saya tidak terlalu akrab dengan TypeScript, tetapi apakah perlu untuk ini saat runtime?

Juga tidak jelas bagi saya mengapa @sentry/types perlu menjadi ketergantungan _runtime_, dan tidak terletak di devDependencies ...

@evocateur untuk semua pengguna TypeScript ini diperlukan. TypeScript mengoptimalkan semuanya.
(tetapi mungkin diperlukan untuk file .d.ts )

@IanMitchell Ini tidak digunakan untuk membangun esm, tetapi untuk yang normal

Bundel.js 4.5.0 berisi banyak kode duplikat, seperti Severity, htmlElementAsString, htmlElementAsString, uuid4, parseUrl, dan seterusnya. Ini tidak bisa dimaksudkan!

Hal yang sama terjadi ketika saya melakukan Bundle melalui import * as Sentry from '@sentry/browser'; (sebagai satu-satunya baris dalam file) menggunakan WebPack + Babel 7, maka ukuran yang dibundel adalah 326kb. Lihat: sentry.bundle.js.txt
Kami menggunakan konfigurasi yang sama untuk bundel kami yang lain juga, tetapi penjaga adalah satu-satunya bundel dengan masalah itu.

Bundel.min.js tidak memiliki kode duplikat di dalamnya , yang mungkin merupakan hasil dari goyangan pohon dengan rollup.

Jadi, solusi sementara adalah menggunakan import '@sentry/browser/build/bundle.min.js';

Bundel.js 4.5.0 berisi banyak kode duplikat, seperti Severity, htmlElementAsString, htmlElementAsString, uuid4, parseUrl, dan seterusnya. Ini tidak bisa dimaksudkan!

Inilah sebabnya (atau setidaknya satu alasan) ada esm build. Jika Anda memiliki bundler, itu lebih efisien daripada menggunakan bundel prebuild. (Ini hanya beta dan saat ini masih rusak)

Melihat ini lagi, dan saya tidak percaya ini tidak mungkin lebih kecil. Jauh lebih kecil.

Jejak tumpukan dengan dukungan peta sumber sejauh ini merupakan hal yang paling kompleks di perpustakaan ini - dan sepertinya tidak demikian? Sepertinya sebagian besar footprint berasal dari kerangka kerja inti, yang dibagikan dengan klien node.js, di mana saya yakin footprint tidak terlalu menjadi perhatian.

Jangan salah paham, ini adalah arsitektur yang indah - karya TypeScript yang sangat bagus.

Tapi di sisi klien, itu tidak berarti banyak. Itu harus kecil dan memuat dengan cepat - terutama untuk sesuatu yang tingkat rendah seperti ini, tidak masalah apakah kode sumbernya bagus atau tidak. Sejauh yang saya tahu, semua yang mengesankan adalah arsitektur menghabiskan banyak byte di telepon.

Untuk perbandingan:

Saya menemukan TrackJS , yang memiliki kemampuan serupa (stack-trace lintas-browser dengan source-maps) dalam paket ~10KB.

TraceKit asli ~3KB min+gz.

Saya menemukan perpustakaan ini yang dapat melakukan bit peta sumber (di sisi klien) dalam ~8KB min+gz atau ~10KB dengan x-browser polyfills.

Di luar itu, ini adalah masalah mengumpulkan beberapa bit informasi browser, membungkus dalam format JSON yang diharapkan, dan mempostingnya - yang tidak boleh lebih dari beberapa KB min+gz. Haruskah?

Saya merasa ini jauh lebih banyak arsitektur daripada yang dibutuhkan kebanyakan orang. Jika saya memerlukan dukungan plugin sama sekali, mungkin saya memerlukan pengait sederhana yang memungkinkan saya memasukkan informasi ke dalam posting JSON, tetapi hanya itu saja.

Saya tahu bahwa penyebaran megabita JS hari ini sudah umum, tetapi kami memiliki kebijakan konten yang ketat di tempat kerja, untuk memastikan kami mengirimkan proyek yang memuat dengan cepat di ponsel, dan saya tidak dapat membenarkan pengeluaran lebih dari setengah anggaran JS kami untuk kesalahan- logging - mungkin 10% teratas, jadi sesuatu seperti ~ 15-20 KB tampaknya masuk akal.

Saya suka produk Anda, tetapi saya tidak dapat menerapkan klien ini

Untuk sesuatu seperti ini, mungkin ide yang baik untuk mendelegasikan stacktrace dan penguraian peta sumber ke server, di mana ukurannya tidak relevan

Untuk sesuatu seperti ini, mungkin ide yang baik untuk mendelegasikan stacktrace dan penguraian peta sumber ke server, di mana ukurannya tidak relevan

@cromefire ide yang menarik. Saya ingin tahu apakah itu yang dilakukan misalnya TrackJS untuk menjaga ukurannya tetap kecil? (Klien mereka berpemilik - hanya sumber yang diperkecil yang tersedia, jadi sulit untuk mengatakan apa yang mereka lakukan. Misalkan saya dapat menginstalnya dan melihat apa yang berjalan melalui kabel...)

Berikut adalah paket yang lebih sederhana untuk menyelesaikan peta sumber di browser: source-map-resolve at ~2KB min+gz ... itu tanpa polyfill, tetapi (jika ini berhasil) saya pikir kita harus dapat mencapai ~10KB untuk browser modern yang tidak membutuhkan polyfill.

itu tanpa polyfill

Polyfill tidak boleh dalam esm build, jadi itu juga bisa berfungsi, tetapi di bachend itu akan lebih sedikit

@cromefire ESM build harus tersedia di 4.5.1 sekarang. Masih belum didokumentasikan karena kami ingin memastikannya sudah teruji dalam pertempuran, tapi sejauh ini bagus. Saya memeriksa build webpack biasa dengan babel loader dan berfungsi seperti pesona.

Di luar itu, ini adalah masalah mengumpulkan beberapa bit informasi browser, membungkus dalam format JSON yang diharapkan, dan mempostingnya - yang tidak boleh lebih dari beberapa KB min+gz. Haruskah?

@mindplay-dk kami tidak melakukan penyelesaian jejak-stack di sisi klien. Semuanya dilakukan di server, itu sebabnya Anda perlu mengunggah peta sumber di tempat pertama untuk mendapatkan dukungan bagi mereka.

Apa yang kami lakukan adalah:

• pemroses acara untuk menyediakan kait khusus yang memungkinkan Anda memodifikasi/menyaring/meningkatkan data yang dikirim ke Sentry
• urus semua pembungkus API asli
• tangkap remah roti dari semua interaksi pengguna, panggilan jaringan, navigasi
• ekstrak data agen pengguna
• ekstrak data kesalahan tambahan dari kesalahan yang ditautkan, sehingga Anda dapat membuat beberapa tingkat kesalahan seperti dalam bahasa lain
• dengarkan kedua penangan kesalahan global
• menyediakan beberapa transportasi jaringan, sehingga pengguna akan selalu mendapatkan yang terbaik untuk lingkungannya saat ini
• urus sepersepuluh kasus tepi dan berbagai objek kesalahan (bahkan yang khusus) dan berbagai implementasi asli
• memberikan fallback untuk informasi kesalahan cadangan atau rusak
• buffer event sehingga Anda tidak membanjiri instance Sentry Anda sendiri atau kehabisan event gratis jika terjadi kesalahan

Hanya untuk beberapa nama. Saya sangat berharap ini akan semudah "menangkap kesalahan, menambahkan beberapa data dan mengirimkannya".
Namun di dunia nyata, ada puluhan input, puluhan sumber kesalahan dapat berasal (yang semuanya memberikan data berbeda) dan puluhan lingkungan yang perilakunya bervariasi.
Kami pasti akan terus bekerja untuk menurunkannya ke ~10-15kB, tetapi itu akan memakan waktu. Kami hanya memiliki begitu banyak sumber daya (baca orang/waktu) yang dapat kami habiskan sekarang.

Saya tahu bahwa penyebaran megabita JS hari ini sudah umum, tetapi kami memiliki kebijakan konten yang ketat di tempat kerja, untuk memastikan kami mengirimkan proyek yang memuat dengan cepat di ponsel, dan saya tidak dapat membenarkan pengeluaran lebih dari setengah anggaran JS kami untuk kesalahan- logging - mungkin 10% teratas, jadi sesuatu seperti ~ 15-20 KB tampaknya masuk akal.

Anda dapat menggunakan pemuat kami kemudian – https://docs.sentry.io/platforms/javascript/loader/ :)

Anda dapat menggunakan pemuat kami kemudian – https://docs.sentry.io/platforms/javascript/loader/ :)

Tapi sayangnya tidak ada solusi untuk webpack

Hanya untuk beberapa nama. Saya sangat berharap ini akan semudah "menangkap kesalahan, menambahkan beberapa data dan mengirimkannya".

Mungkin seseorang harus mengusulkan sesuatu di tc39 . Saya harus melihat bagaimana prosesnya, tetapi mungkin seseorang dapat mengusulkan API standar untuk membaca stacktrace seperti

Tapi sayangnya tidak ada solusi untuk webpack

Apa maksudmu sebenarnya? Memiliki paket yang dapat hidup berdampingan dengan pemuat, yang dapat diimpor dan dibundel, tetapi kemudian berkomunikasi dengan SDK yang dimuat secara asinkron setelah kesalahan atau panggilan captureException terjadi?

Apa maksudmu sebenarnya? Memiliki paket yang dapat hidup berdampingan dengan pemuat, yang dapat diimpor dan dibundel, tetapi kemudian berkomunikasi dengan SDK yang dimuat secara asinkron setelah kesalahan atau panggilan captureException terjadi?

Ya, jika saya rekap dengan benar, loader hanya tersedia melalui cdn

@cromefire ya, karena itu dimaksudkan untuk digunakan sebagai "cuplikan". Namun Anda dapat menemukan kodenya di sini https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/loader.js

Sepertinya saya harus membuka PR baru, karena dengan esm ini juga bisa digunakan dari kode Anda sendiri

Kami memiliki solusi yang akan memungkinkan Anda menggunakan loader bersama minimal dan secara efektif hanya akan menambahkan beberapa kB ke bundel akhir Anda.

Seharusnya tidak sulit untuk menulis pemuat yang memuatnya di bawah 1kb, jadi mengapa tidak, saya akan mencoba menulis yang cepat

Satu hal yang dapat banyak membantu di sini adalah jika beberapa fungsi bersifat opsional.

Misalnya, minimal yang sangat bagus adalah:

• jejak tumpukan kesalahan asli (tidak peduli itu tidak optimal di beberapa browser)
• Agen pengguna
• stempel waktu
• URL
• cocok dengan peta sumber di server

Fungsi tambahan apa pun hanya bisa menjadi tambahan. Kami hanya mendukung browser modern, jadi kami tidak perlu mengatasi semua perilaku unik browser lama.

Kami memecahkan ini dengan menggunakan pemecahan kode webpack dan memuat klien penjaga hanya pada kesalahan.

sentry.js

import * as Sentry from '@sentry/browser';
Sentry.init({
  ...
  integrations: integrations => {
    return integrations.filter(integration => integration.name !== 'GlobalHandlers');
  },
});
export const logError = error => Sentry.captureException(error);

errors.js

const captureError = async error => {
 const { logError } await import(/* webpackChunkName: "sentry" */ './sentry');
 logError(error);
}
window.onerror = (message, url, line, column, error) => captureError(error);
window.onunhandledrejection = event => captureError(event.reason);

Kami melakukan beberapa hal lagi di sana seperti mengisi remah roti, menambahkan ekstra, menambahkan tag, dll. tetapi dimungkinkan untuk menggunakan klien penjaga dan tidak membuat bundel Anda lebih besar.

Ini agak apa yang saya terapkan di #1846

Mungkin bermanfaat bagi orang lain:
Saya menggunakan build ESM dengan webpack ( 4.29.5 ) oleh:

• menambahkan alias webpack untuk menggunakan build ESM daripada build standar karena tidak ada deklarasi module di package.json

resolve: {
    alias: {
        // use sentry ESM build which is not declared in the @sentry/browser package.json
        '@sentry/browser': path.resolve(
            __dirname,
            'node_modules/@sentry/browser/esm',
        ),
    }

• tambahkan pengecualian ke sentry/.+/esm ke konfigurasi babel-loader kami, karena tampaknya build ESM menyertakan fitur yang lebih baru dari ES2015.

{
    test: /\.m?jsx?$/,
    loader: 'babel-loader',
    // compile sentry as the ESM build is new and ships modern features which break our supported browsers
    exclude: /(node_modules\/(?!(@sentry\/[^/]+\/esm))|bower_components)\//,
}

Catatan:

• Kami menggunakan alias sehingga kami tidak perlu khawatir tentang bundling saat menggunakannya dalam kode (kami melakukan hal serupa untuk lodash-es antara lain)

@Limess

Anda bisa mengarahkan ulang ke @sentry/browser/esm :

resolve: {
    alias: {
        // use sentry ESM build which is not declared in the @sentry/browser package.json
        '@sentry/browser': '@sentry/browser/esm'
    }

Tetapi Anda tidak perlu menambahkan alias, cukup impor @sentry/browser/esm

Untuk loader lebih mudah untuk menulisnya seperti ini:

• Jika Anda memiliki hal lain di babel:

{
    test: /other_things/,
    include: [/@sentry\/.+\/esm/],
    exclude: /node_modules/,
    // config
}

• Jika Anda tidak:

{
    test: /@sentry\/.+\/esm/,
    exclude: /node_modules/,
    // config
}

Juga ingat untuk menyesuaikan konfigurasi babel untuk kebutuhan Anda: babel docs , jika tidak, tidak layak untuk menggunakan versi esm

Pembaruan: Kami akan segera merilis versi utama baru dari SDK yang mengurangi ukuran bundel secara signifikan.

26.1 kB - https://bundlephobia.com/result?p=@sentry/browser @4.6.4
vs.
17.2 kB - https://bundlephobia.com/result?p=@sentry/browser @5.0.0-rc.1

Versi CDN bawaan kami bahkan menunjukkan hasil yang lebih baik (tidak yakin bagaimana bundlephobia mengukur sesuatu)

ES6:  14.3535 kB
ES5:  15.6846 kB

Bagaimanapun, saya ingin memberi tahu Anda bahwa kami masih berupaya mengurangi ukuran bundel lebih lanjut, tetapi ini seharusnya sudah menjadi langkah besar ke arah yang benar.

Catatan tentang peningkatan: Ini adalah masalah besar karena ada banyak perubahan internal di SDK. Seharusnya tidak ada perubahan kode yang diperlukan di pihak Anda. Kami sedang menguji versi baru sendiri di sentry.io untuk melihat bagaimana perilakunya. ref: https://github.com/getsentry/sentry/pull/12492

Penafian: Jangan gunakan 5.0.0-rc.x dalam produksi seperti yang kami lakukan

@HazAT terima kasih telah menganggap ini serius! ini adalah langkah maju yang besar - saya sudah tidak terlalu khawatir tentang penerapan ini sekarang :-)

@kamilogorek Hanya ingin tahu, bisakah Anda menambahkan perbandingan versi terakhir dari cabang 3.x ?

Saya menutup masalah ini, sampai sekarang, kami pikir, pengurangan yang kami perkenalkan bergerak dari v4 ke v5 adalah tren ke arah yang benar. Kami masih akan mencoba untuk menguranginya lebih jauh dan kami akan sangat sadar untuk meningkatkannya lagi.

Sebagai komentar singkat, kami benar-benar hanya ingin membandingkan ukuran "bundel" kami, karena tergantung pada bundler apa yang Anda gunakan, jarak tempuh Anda dapat bervariasi, jadi berikut adalah nomor bundel CDN yang kami kirimkan (ped):

| Paket | Versi | Ukuran dalam Byte | Ukuran dalam kB | Tautan |
|-----------------|---------|---------------|----- -------|------------------------------------------ ----------|
| gagak-js | 3.27.0 | 13741 Byte | ~13.4kB | https://cdn.ravenjs.com/3.27.0/raven.min.js |
| @sentry/browser | 4.6.6 | 22607 Byte | ~22.1kB | https://browser.sentry-cdn.com/4.6.6/bundle.min.js |
| @sentry/browser | 5.0.3 | 16059 Byte | ~15.7kB | https://browser.sentry-cdn.com/5.0.3/bundle.min.js |

Dengan v5 kami juga mengirim dan membangun esm , artinya jika Anda menggunakan bundler, ia harus dapat membuat treeshake jalur kode yang tidak digunakan.

Terima kasih atas kesabaran Anda semua

@HazAT @kamilogorek luar biasa!

@Limess Apakah masih relevan untuk menggunakan ini hari ini: @sentry/browser/esm bukannya @sentry/browser ?

Itu diimpor seperti import * as Sentry from "@sentry/browser/esm"; dan dibundel dengan webpack -p tetapi saya tidak melihat perbedaan dalam ukuran bundel. Saya juga memiliki webpack.config.js tanpa plugin atau loader.

@0xbkt Tidak ada bedanya dalam ukuran bundel, setidaknya sekarang saat menggunakan aplikasi rollup ke bundel.