Tangkap semua kesalahan JavaScript dan kirim ke server

232

Saya bertanya-tanya apakah ada yang punya pengalaman dalam menangani kesalahan JavaScript secara global dan mengirimkannya dari browser klien ke server.

Saya pikir poin saya cukup jelas, saya ingin tahu setiap pengecualian, kesalahan, kesalahan kompilasi, dll. Yang terjadi di sisi klien dan mengirimkannya ke server untuk melaporkannya.

Saya terutama menggunakan MooTools dan head.js(untuk sisi JS) dan Django untuk sisi server.

Olivier Girardot
sumber
20
Saya tidak mengerti mengapa pertanyaan ini tidak jelas.
Michael Hilus
3
Memilih dua kali untuk membuka kembali pertanyaan, tetapi tidak berhasil. Sama sekali tidak jelas mengapa pertanyaan ini ditutup dengan tidak jelas.
Muhammad Usman
7
@ andrew-tukang cukur - jika begitu banyak pengguna menemukan pertanyaan ini cukup relevan untuk meningkatkannya maka mungkin jika tidak jelas bagi Anda masalahnya ada pada Anda ??
isapir
5
Pertanyaan ini tidak hanya jelas, juga diremehkan :)
Teoman shipahi

Jawaban:

16

Saya baru-baru ini menguji Sentry pada produksi dan berfungsi dengan baik (JS dan bahasa lain seperti PHP)

1- Ini open source (Anda dapat menginstalnya di server Anda sendiri) 2- Anda dapat menggunakan paket gratis (100 laporan / hari)

Atau pasang di server Anda: github.com/getsentry

Tarek
sumber
Perhatikan bahwa mereka memiliki rencana gratis tanpa batas untuk institusi Pendidikan
christianvuerings
8
Sepertinya bukan open source lagi, semua opsi dibayar?
David Cumps
4
@DavidCumps Mereka masih menawarkan layanan gratis (Percobaan), Tapi Anda hanya mendapatkan 7 hari dari sejarah bug atau Anda dapat menginstalnya di server Anda sendiri sejak open source ( github.com/getsentry )
Tarek
1
Google Tag Manager memiliki Javascript Error Listener, mungkin layak untuk dicoba, terutama jika Anda sudah menggunakan GA
Adrian Gunawan
Anda juga harus memeriksa TrackJS untuk ini. Ini adalah layanan berbayar, tetapi memberikan banyak konteks tentang bagaimana pengguna masuk ke situasi kesalahan untuk debugging. Saya adalah salah satu pengembang dan telah memperbaiki banyak bug :)
Todd Gardner
318

Saya akan memeriksa window.oner

Contoh:

window.onerror = function(message, url, lineNumber) {  
  //save error and send to server for example.
  return true;
};  

Ingatlah bahwa mengembalikan nilai true akan mencegah penembakan handler default, dan return false akan membiarkan handler default berjalan.

Mike Lewis
sumber
9
Anda ingin menetapkan window.onerror lebih disukai sebelum hal lain dijalankan. Jadi di mana pun Anda ingin meletakkannya, pastikan itu berjalan sebelum ada kode / file js Anda yang lain.
Mike Lewis
17
Catatan, Mozilla merekomendasikan: 'Perhatikan bahwa beberapa / banyak peristiwa kesalahan tidak memicu window.oner, Anda harus mendengarkannya secara khusus.'
Adam Naylor
88
Ya, Saya suka bagaimana ia mengatakan beberapa / banyak , sangat deskriptif - terima kasih Mozilla.
Daniel Mendel
5
Mozilla memaparkan GlobalEventHandlers.onerror: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…
roland
1
Apa yang terjadi jika kode yang menangani window.onerror sendiri melempar kesalahan. Apakah ada kemungkinan loop tak terbatas?
Martin Brown
15

Jika situs web Anda menggunakan Google Analytics, Anda dapat melakukan apa yang saya lakukan:

window.onerror = function(message, source, lineno, colno, error) {
  if (error) message = error.stack;
  ga('send', 'event', 'window.onerror', message, navigator.userAgent);
}

Beberapa komentar pada kode di atas:

  • Untuk browser modern, jejak tumpukan penuh dicatat.
  • Untuk browser lama yang tidak menangkap jejak stack, pesan kesalahan akan dicatat. (Sebagian besar versi iOS sebelumnya dalam pengalaman saya).
  • Versi browser pengguna juga dicatat, sehingga Anda dapat melihat versi OS / browser mana yang melakukan kesalahan. Itu menyederhanakan prioritas dan pengujian bug.
  • Kode ini berfungsi jika Anda menggunakan Google Analytics dengan "analytics.js", seperti ini . Jika Anda menggunakan "gtag.js" sebagai gantinya, seperti ini , Anda perlu mengubah baris terakhir fungsi. Lihat di sini untuk detailnya .

Setelah kode di tempat, ini adalah bagaimana Anda melihat kesalahan Javascript pengguna Anda:

  1. Di Google Analytics, klik Behaviorbagian lalu Top Eventslaporan.
  2. Anda akan mendapatkan daftar Kategori Acara. Klik window.onerrordalam daftar.
  3. Anda akan melihat daftar jejak tumpukan Javascript dan pesan kesalahan. Tambahkan kolom ke laporan untuk versi OS / browser pengguna Anda dengan mengklik Secondary dimensiontombol dan masukkan Event Labeldi kotak teks yang muncul.
  4. Laporan akan terlihat seperti tangkapan layar di bawah ini.
  5. Untuk menerjemahkan string OS / browser ke deskripsi yang lebih dapat dibaca oleh manusia, saya menyalin-menempelkannya ke https://developers.whatismybrowser.com/useragents/parse/

masukkan deskripsi gambar di sini

Martin Omander
sumber
3
Ini tidak menjebak semua kesalahan, hanya coba-tangkap blok, meskipun itu hal yang keren untuk dijelaskan dan saya pikir Anda tidak pantas menerima downvotes.
Nick Steele
Terima kasih, Nick! Saya memperbarui jawaban saya dengan kode teruji pertempuran yang berfungsi baik di situs web saya dan yang menangkap semua kesalahan, bukan hanya yang Anda jebak dengan coba ... tangkap.
Martin Omander
2

Jangan mencoba menggunakan layanan pihak ketiga, alih-alih coba sendiri.

Penangan Kesalahan dapat menangkap skenario di bawah ini,

  1. TypeError yang tidak tertangkap tidak dapat ditangkap
  2. ReferenceError yang tidak tertangkap tidak dapat ditangkap misalnya: var.click ()
  3. TypeError dapat ditangkap
  4. Kesalahan sintaksis dapat ditangkap
  5. ReferenceError dapat ditangkap

Untuk Menangkap Kesalahan Javascript:

window.addEventListener('error', function (e) {
  //It Will handle JS errors 
})

Untuk Menangkap Kesalahan AngularJS:

app.config(function ($provide) {
$provide.decorator('$exceptionHandler', function ($delegate) {
   return function (exception, cause) {
       //It will handle AngualarJS errors
      }
   })
})
sam ruben
sumber
0

Juga, layanan http://jslogger.com dapat membantu dengan itu:

Catat kesalahan dan kejadian Javascript di cloud

dari http://jslogger.com/features :

Mulai sekarang, Anda dapat memata-matai semua kesalahan yang merusak pengalaman pengguna situs Anda. Setiap kesalahan Javascript akan ditangkap dan dibawa kepada Anda untuk di-debug nanti.

PENOLAKAN: tidak berafiliasi dengan layanan / perusahaan.

Ivan Kurmanov
sumber
1
503 Layanan Tidak Tersedia
Rax
0

Anda dapat mencoba Atatus - Ini adalah Layanan Pelacakan Kesalahan JavaScript baru bersama dengan Pemantauan Pengguna Nyata (RUM) untuk aplikasi web modern.

Kami tidak hanya menangkap kesalahan, tetapi juga peristiwa pengguna yang memicu kesalahan. Ini memberi Anda langkah-langkah untuk mereproduksi kesalahan di akhir Anda.

Di samping penangkapan kesalahan, kami juga menangkap waktu pemuatan halaman dan menunjukkannya di berbagai perspektif - Geo, Browser, Page Drill Down, Histogram Halaman, Pemantauan Ajax, dan Pemantauan Transaksi.

https://www.atatus.com/

Documents tersedia: https://www.atatus.com/docs

Penafian: Saya seorang pengembang web di Atatus.

Fizer Khan
sumber
1
Saya mengintegrasikan Ataus, dan kemudian saya mencoba sesuatu seperti foo.bar = '' yang menyebabkan pengecualian. Tapi saya tidak bisa melihat apa pun di dasbor Atatus.
vmachacek
Bisakah Anda mengirimi kami email?
Fizer Khan
5
Steker tak tahu malu. Iklan harus dibatasi di sebelah kanan.
Will
0

The tertangkap perpustakaan yang baik bebas cara capture semua kesalahan JS, termasuk penolakan tertangani.

LeeGee
sumber
-2

Anda mungkin ingin memeriksa layanan baru ini, http://rescuejs.com/ . https://bugsnag.com/

Memungkinkan Anda mencatat semua kesalahan javascript Anda tanpa menulis kode sisi server sendiri. Ini juga melacak versi peramban dan sebagainya.

Saya tidak yakin saya akan menganggap mereka 100% "perusahaan siap", tapi itu pasti layak untuk dicoba.

lillesand
sumber
8
Sudah ditutup. Jika Anda mencoba mendaftar sekarang Anda mendapat pesan "Terima kasih atas minat Anda, sayangnya Rescue.js tidak lagi aktif bekerja."
Hari