2012-06-29 44 views
17

Dự án của tôi chứa nhiều trang có biểu mẫu. Đây là một phụ trợ của hệ thống CRM ngân hàng, do đó, bất kỳ lỗi nào trong quá trình làm việc đều phải được thu thập và điều tra. Về phía máy chủ, chúng tôi đã tăng cường hệ thống ngoại lệ java, nhưng nếu lỗi xảy ra ở phía máy khách - javascript, thông tin duy nhất chúng tôi nhận được là cửa sổ lỗi js trong IE hoặc đôi khi ảnh chụp màn hình của trang được người dùng nâng cao thực hiện.Lỗi khi ghi nhật ký javascript ở phía máy khách

javascript mã chứa cả jquery-powered phần mở rộng giao diện người dùng và mã hóa cứng xử lý sự kiện nội tuyến và chức năng.

Vì vậy, tôi hỏi liệu bất kỳ cách tiếp cận để chụp js-lỗi của bất cứ loại nào có thể được sử dụng? một số thư viện bổ sung hoặc thứ gì đó có thể cung cấp cho tôi một stacktrace như firebug trong Mozilla hoặc web-console trong Chrome?

+2

tham khảo liên kết này: http://openmymind.net/2012/4/4/You-Really-Should-Log-Client-Side-Error/ –

+0

Nhờ Tamil và Alexanderb, nhưng trong trường hợp của tôi, tôi có thể ' Tôi sử dụng dịch vụ gia công và không nằm trong các dịch vụ khu vực mạng của mình – shershen

+0

Tôi chưa tự mình thử, nhưng các giải pháp như vậy, có thể trông thú vị: https://www.proxino.com/ –

Trả lời

24

Nhìn vào window.onerror. Nếu bạn muốn nắm bắt bất kỳ lỗi nào, và báo cáo chúng với máy chủ, thì bạn có thể thử một yêu cầu AJAX, có lẽ.

window.onerror = function(errorMessage, errorUrl, errorLine) { 
    jQuery.ajax({ 
     type: 'POST', 
     url: 'jserror.jsf', 
     data: { 
      msg: errorMessage, 
      url: errorUrl, 
      line: errorLine 
     }, 
     success: function() { 
      if (console && console.log) { 
       console.log('JS error report successful.'); 
      } 
     }, 
     error: function() { 
      if (console && console.error) { 
       console.error('JS error report submission failed!'); 
      } 
     } 
    }); 

    // Prevent firing of default error handler. 
    return true; 
} 
+7

Bạn nên thêm một chức năng điều chỉnh này. Nếu khách hàng rơi vào vòng lặp tạo ra lỗi, khách hàng sẽ nhanh chóng sử dụng điểm cuối ghi nhật ký của bạn. Kiểm tra Repo này cho một ví dụ tuyệt vời. https://github.com/TrackJs/Tech-Demo –

+0

Loại dữ liệu: "json" – 0fnt

+0

contentType cần phải là 'application/json' – Kildareflare

2

Nếu bạn muốn thực hiện không đau chỉ cần đặt this mã javascript của kẻ trong ứng dụng của bạn. Khác Nếu bạn muốn thực hiện một, sau đó cố gắng để có được this stacktrace trên windowerror và bạn có thể sử dụng ajax để báo cáo lỗi. A nice way để theo dõi các lỗi được báo cáo bởi olark

2

http://exceptionhub.com Nên để lừa. http://errorception.com/ Không cung cấp nhiều thông tin để gỡ lỗi, nhưng cũng có vẻ tốt đẹp.

proxino dường như không biết những gì họ đang làm, họ nơi incuding một jQuery hoàn chỉnh trong mã logger họ để đăng nhập onerror sự kiện thời gian qua tôi đã kiểm tra. Tôi sẽ không tin tưởng một dịch vụ có quá ít hiểu JavaScript của khách hàng để ghi lại các lỗi JavaScript của tôi.

+1

Điều đáng nói là Proxino cũng có một phiên bản jQuery-ít hơn của kịch bản, mặc dù nó vẫn yêu cầu bạn tải jQuery trên trang của bạn. https://www.proxino.com/documentation –

1

Tôi khuyên bạn nên sử dụng dịch vụ JsLog.me

Nó có thể chụp ra toàn bộ giao diện điều khiển, thêm vào lỗi và stacktraces. Chúng tôi sử dụng nó trong các dự án của chúng tôi, đăng nhập toàn bộ nhật ký giao diện điều khiển giúp nhóm QA của chúng tôi ghi lại cách sinh sản. Ngoài ra, nó hoạt động tốt với các đối tượng JSON lớn như trong bảng điều khiển Chrome và có tìm kiếm.

12

Tuyên bố từ chối trách nhiệm: Tôi là Giám đốc điều hành và người sáng tạo của Sentry, một dịch vụ nguồn mở và có trả tiền báo cáo sự cố cho nhiều ngôn ngữ, bao gồm cả Javascript.

Có thể khá khó khăn để nắm bắt ngoại lệ giao diện người dùng. Công nghệ đã trở nên tốt hơn (các công cụ JS của trình duyệt), nhưng vẫn còn nhiều hạn chế.

  1. Bạn sẽ cần điểm cuối ghi nhật ký phía máy chủ. Điều này có một số phức tạp vì có thể lạm dụng nó (tức là người thử nghiệm PEN có thể cố gắng vạch trần các lỗ hổng trong đó). Bạn cũng cần phải đối phó với CORS ở đây. Tôi chắc chắn sẽ khuyên bạn nên Sentry cho điều này, vì chúng tôi là tốt nhất trong lớp, và nếu bạn muốn bạn có thể lưu trữ các máy chủ chính mình (như nguồn mở của nó).
  2. Việc triển khai thực sự ghi lại các lỗi trong mã của bạn khá phức tạp. Bạn không thể dựa vào window.onerror vì nhiều lý do khác nhau (chủ yếu là do các trình duyệt trước đây cung cấp thông tin xấu ở đây). Những gì chúng ta làm trong máy khách raven.js (dựa trên TraceKit) là vá một số hàm để bọc chúng trong các câu lệnh try/catch. Ví dụ: window.setTimeout.Với điều này, chúng tôi có thể cài đặt các trình xử lý lỗi sẽ tạo ra stacktraces đầy đủ trong hầu hết các trình duyệt.
  3. Bạn sẽ muốn đảm bảo rằng bạn đang tạo mã nguồn cho mã của mình và máy chủ xử lý dữ liệu hỗ trợ chúng. Sentry thực hiện điều này cả hai bằng cách cạo chúng tự động (thông qua các tiêu chuẩn) hoặc cho phép bạn tải chúng lên thông qua một API. Nếu không có điều này, giả sử bạn đang giảm thiểu mã, mọi thứ trở nên gần như không sử dụng được.
  4. Vấn đề lớn cuối cùng là tiếng ồn. Hầu hết các tiện ích mở rộng của trình duyệt sẽ tiêm trực tiếp vào tập lệnh của bạn để bạn cần phải lọc ra nhiễu. Chúng tôi giải quyết vấn đề này theo hai cách: danh sách đen các mẫu bỏ qua (tức là "Lỗi tập lệnh") là danh sách trắng nhất của miền để chấp nhận (ví dụ: "example.com"). Chúng tôi đã tìm thấy sự kết hợp của cả hai là đủ hiệu quả trong việc loại bỏ nhiễu ngẫu nhiên nhất.

Một số điều bạn nên biết về máy chủ:

  • Khách hàng đôi khi sẽ kéo dài mở (ví dụ: một bot, hoặc một người dùng xấu) và gây ra một lượng lớn dữ liệu vô dụng hoặc lỗi cũ đơn giản.
  • Máy chủ của bạn sẽ có thể xử lý một loạt các sự kiện này và không thành công một cách duyên dáng. Sentry thực hiện điều này bằng cách giới hạn tốc độ và lấy mẫu dữ liệu.
  • Trường hợp ngoại lệ được bản địa hóa sang ngôn ngữ trình duyệt và không có cơ sở dữ liệu tập trung, bạn sẽ bị mắc kẹt khi dịch chúng (mặc dù thường rõ ràng ý nghĩa của chúng).
1

Atatus chụp các lỗi JavaScript và cũng chụp các hành động của người dùng trước lỗi. Điều này sẽ giúp hiểu rõ hơn về lỗi. Atatus giúp bạn trong việc kiểm soát lối vào của bạn, không chỉ cho các lỗi, mà còn hiệu quả của nó (Real tài Monitoring)

https://www.atatus.com/

Disclaimer: Tôi là một nhà phát triển web ở Atatus.

Các vấn đề liên quan