ตรวจจับข้อผิดพลาด JavaScript ทั้งหมดและส่งไปยังเซิร์ฟเวอร์

ฉันสงสัยว่าใครมีประสบการณ์ในการจัดการข้อผิดพลาด JavaScript ทั่วโลกและส่งพวกเขาจากเบราว์เซอร์ลูกค้าไปยังเซิร์ฟเวอร์

ฉันคิดว่าประเด็นของฉันค่อนข้างชัดเจนฉันต้องการทราบทุกข้อยกเว้นข้อผิดพลาดข้อผิดพลาดในการรวบรวม ฯลฯ ที่เกิดขึ้นในฝั่งไคลเอ็นต์และส่งไปยังเซิร์ฟเวอร์เพื่อรายงาน

ฉันส่วนใหญ่ใช้ MooTools และhead.js(สำหรับฝั่ง JS) และ Django สำหรับฝั่งเซิร์ฟเวอร์

ฉันเพิ่งทดสอบSentry on production และใช้งานได้ดี (JS และภาษาอื่น ๆ เช่น PHP)

1- มันเป็นโอเพ่นซอร์ส (คุณสามารถติดตั้งบนเซิร์ฟเวอร์ของคุณเอง) 2- คุณสามารถใช้แผนฟรี (รายงาน 100 ฉบับ / วัน)

หรือติดตั้งบนเซิร์ฟเวอร์ของคุณ: github.com/getsentry

ฉันจะตรวจสอบwindow.onerror

ตัวอย่าง:

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

โปรดทราบว่าการส่งคืนค่าจริงจะป้องกันการเริ่มต้นตัวจัดการเริ่มต้นและการคืนค่าเท็จจะทำให้ตัวจัดการเริ่มต้นทำงานได้

หากเว็บไซต์ของคุณใช้ Google Analytics คุณสามารถทำสิ่งที่ฉันทำ:

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

ความคิดเห็นเล็กน้อยเกี่ยวกับรหัสข้างต้น:

• สำหรับเบราว์เซอร์สมัยใหม่การติดตามสแต็กเต็มจะถูกบันทึกไว้
• สำหรับเบราว์เซอร์รุ่นเก่าที่ไม่ได้ติดตามการติดตามสแต็กข้อความแสดงข้อผิดพลาดจะถูกบันทึกแทน (ส่วนใหญ่เป็นเวอร์ชัน iOS รุ่นก่อนหน้าในประสบการณ์ของฉัน)
• เวอร์ชันของเบราว์เซอร์ของผู้ใช้นั้นถูกบันทึกไว้ด้วยดังนั้นคุณสามารถดูว่าเวอร์ชั่นของ OS / เบราว์เซอร์ใดที่ทำให้เกิดข้อผิดพลาด ที่ช่วยลดความสำคัญของการจัดลำดับความสำคัญและการทดสอบ
• รหัสนี้ทำงานได้ถ้าคุณใช้ Google Analytics กับ "analytics.js" เช่นนี้ หากคุณใช้ "gtag.js" แทนเช่นนี้คุณต้องปรับแต่งบรรทัดสุดท้ายของฟังก์ชั่น ดูที่นี่สำหรับรายละเอียด

เมื่อมีการวางโค้ดนี่คือวิธีที่คุณดูข้อผิดพลาด Javascript ของผู้ใช้:

1. ใน Google Analytics คลิกBehaviorส่วนและจากนั้นTop Eventsรายงาน
2. คุณจะได้รับรายการหมวดหมู่กิจกรรม คลิกwindow.onerrorในรายการ
3. คุณจะเห็นรายการของการติดตามสแต็ก Javascript และข้อความแสดงข้อผิดพลาด เพิ่มคอลัมน์ลงในรายงานสำหรับเวอร์ชันระบบปฏิบัติการ / เบราว์เซอร์ของผู้ใช้ของคุณโดยคลิกSecondary dimensionปุ่มและป้อนEvent Labelในกล่องข้อความที่ปรากฏขึ้น
4. รายงานจะมีลักษณะเป็นภาพหน้าจอด้านล่าง
5. ในการแปลสตริง OS / เบราว์เซอร์เป็นคำอธิบายที่มนุษย์อ่านได้มากขึ้นฉันคัดลอกและวางลงในhttps://developers.whatismybrowser.com/useragents/parse/

อย่าพยายามใช้บริการของบุคคลที่สามแทนลองด้วยตัวคุณเอง

ตัวจัดการข้อผิดพลาดสามารถตรวจจับสถานการณ์ด้านล่าง

1. Uncaught TypeError ไม่สามารถจับภาพได้
2. Uncaught ReferenceError ไม่สามารถจับภาพได้เช่น: var.click ()
3. TypeError สามารถบันทึกได้
4. สามารถบันทึกข้อผิดพลาดทางไวยากรณ์ได้
5. ReferenceError สามารถบันทึกได้

ในการตรวจจับข้อผิดพลาดของ Javascript:

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

ในการจับข้อผิดพลาด AngularJS:

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

นอกจากนี้บริการhttp://jslogger.comก็สามารถช่วยได้เช่นกัน:

บันทึกข้อผิดพลาดและเหตุการณ์ Javascript ในระบบคลาวด์

จากhttp://jslogger.com/features :

จากนี้ไปคุณสามารถตรวจสอบข้อผิดพลาดทั้งหมดที่ทำให้ประสบการณ์การใช้งานเว็บไซต์ของคุณแย่ลง ข้อผิดพลาด Javascript ทุกข้อจะถูกตรวจจับและนำมาให้คุณสำหรับการดีบักในภายหลัง

การปฏิเสธความรับผิด: ไม่มีส่วนเกี่ยวข้องกับบริการ / บริษัท

คุณสามารถลองAtatus - เป็นบริการติดตามข้อผิดพลาด JavaScript ใหม่พร้อมกับ Real User Monitoring (RUM) สำหรับเว็บแอปสมัยใหม่

เราไม่เพียง แต่จับข้อผิดพลาด แต่ยังรวมถึงกิจกรรมของผู้ใช้ที่ก่อให้เกิดข้อผิดพลาด สิ่งนี้ให้ขั้นตอนในการทำซ้ำข้อผิดพลาดเมื่อสิ้นสุด

นอกเหนือจากการจับข้อผิดพลาดเรายังจับเวลาในการโหลดหน้าเว็บและแสดงในมุมมองที่แตกต่างกันเช่น Geo, Browser, Page Drill Down, Histogram ของหน้า, Ajax Monitoring และ Monitoring Monitoring

https://www.atatus.com/

มีเอกสาร: https://www.atatus.com/docs

คำเตือน: ฉันเป็นนักพัฒนาเว็บที่ Atatus

uncaughtห้องสมุดเป็นสิ่งที่ดีจับภาพทางฟรีข้อผิดพลาด JS ทั้งหมดรวมทั้งปฏิเสธไม่สามารถจัดการได้

คุณอาจต้องการตรวจสอบออกบริการใหม่นี้http://rescuejs.com/https://bugsnag.com/

ให้คุณบันทึกข้อผิดพลาดจาวาสคริปต์ทั้งหมดโดยไม่ต้องเขียนโค้ดฝั่งเซิร์ฟเวอร์ด้วยตัวคุณเอง นอกจากนี้ยังติดตามรุ่นเบราว์เซอร์และอื่น ๆ

ฉันไม่แน่ใจว่าฉันจะพิจารณาพวกเขา 100% "องค์กรพร้อม" แต่มันคุ้มค่าที่จะเช็คเอาท์