客户端 Javascript 崩溃的服务器端日志记录

Posted 2023-02-25

【中文标题】客户端 Javascript 崩溃的服务器端日志记录

【英文标题】：Server Side Logging Of Client Side Javascript Crashes

【发布时间】：2012-01-25 03:58:32

【问题描述】：

我有一个包含数千行 javascript 的大型复杂网络应用程序。用户报告了一小部分间歇性 Javascript 错误。

我认为这些是竞争条件的附带现象 - 某些东西没有正确初始化并且 Javascript 崩溃导致“下游”js 无法运行。

是否有 Javascript 执行崩溃以返回服务器端？

Blackbird 和 Log4JavaScript 等所有 js 日志库仅在客户端。

【问题讨论】：

如果错误导致错误被抛出，您可以查看window.onerror 并在处理程序内发送 ajax 请求（同时发送事件参数）。如果应用程序真的崩溃（如浏览器崩溃），这当然是行不通的。

@pimvdb 这应该是一个答案:)

@JaniHartikainen 我同意

如果浏览器中的 Javascript 是单线程的，它是否仍然是“竞争条件”，或者当 AJAX 响应以与预期不同的顺序返回时您是否将其称为其他东西？

@Bhavin 的回答几乎完全符合您的需要

【参考方案1】：

看看https://log4sure.com（披露：我创建了它）- 但它真的很有用，请检查并自己决定。它允许您记录错误/事件，还允许您创建自定义日志表。它还允许您实时监控日志。最棒的是，它是免费的。

也可以使用 bower 安装，使用 bower install log4sure

设置代码也很简单：

// setup
var _logServer;

(function() 
  var ls = document.createElement('script');
  ls.type = 'text/javascript';
  ls.async = true;
  ls.src = 'https://log4sure.com/ScriptsExt/log4sure.min.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(ls, s);
  ls.onload = function() 
    // use your token here.
    _logServer = new LogServer("use-your-token-here");
  ;
)();

//  example for logging text
_logServer.logText("your log message goes here.")

//example for logging error 
divide = function(numerator, divisor) 
    try 
      if (parseFloat(value) && parseFloat(divisor)) 
        throw new TypeError("Invalid input", "myfile.js", 12, 
          value: value,
          divisor: divisor
        );
       else 
        if (divisor == 0) 
          throw new RangeError("Divide by 0", "myfile.js", 15, 
            value: value,
            divisor: divisor
          );
        
      
     catch (e) 
      _logServer.logError(e.name, e.message, e.stack);

    
  
  // another use of logError in window.onerror
  // must be careful with window.onerror as you might be overwriting some one else's window.onerror functionality
  // also someone else can overwrite window.onerror.
window.onerror = function(msg, url, line, column, err) 
  // may want to check if url belongs to your javascript file
  var data = 
    url: url,
    line: line,
    column: column,

  
  _logServer.logError(err.name, err.message, err.stack, data);

;

// example for custom logs
var foo = "some variable value";
var bar = "another variable value";
var flag = "false";
var temp = "yet another variable value";

_logServer.log(foo, bar, flag, temp);

【参考方案2】：

我已经按照@pimvdb 的建议使用window.onerror 编写了一个远程错误记录函数

Err = ;

Err.Remoterr = ;

Err.Remoterr.onerror = function (msg, errorfileurl, lineno) 

    var jsonstring, response, pageurl, cookies;

    // Get some user input
    response = prompt("There has been an error. " +
                      "It has been logged and will be investigated.", 
                      "Put in comments (and e-mail or phone number for" + 
                      " response.)");

    // get some context of where and how the error occured
    // to make debugging easier
    pageurl = window.location.href;
    cookies = document.cookie;

    // Make the json message we are going to post
    // Could use JSON.stringify() here if you are sure that
    // JSON will have run when the error occurs
    // http://www.JSON.org/js.html
    jsonstring = "\"set\": \"jserr\": " +
        "\"msg\": \""         + msg + "\", " + 
        "\"errorfileurl\": \"" + errorfileurl + "\", " +
        "\"pageurl\": \""      + pageurl + "\", " +
        "\"cookies\": \""      + cookies + "\", " +
        "\"lineno\": \""       + lineno + "\", " +
        "\"response\": \""     + response + "\"";

    // Use the jquery cross-browser post
    // http://api.jquery.com/jQuery.post/
    // this assumes that no errors happen before jquery has initialised
    $.post("?jserr", jsonstring, null, "json");

    // I don't want the page to 'pretend' to work 
    // so I am going to return 'false' here
    // Returning 'true' will clear the error in the browser
    return false;
;

window.onerror = Err.Remoterr.onerror;

我将它部署在网页的 head 和 body 标记之间。

您将需要更改 JSON 以及您将其发布到的 URL，具体取决于您将如何记录数据服务器端。

【讨论】：

+1 如果你使用 jQuery，你也可以传递一个对象而不是转义等（只是为了清楚起见）。它会自动序列化它。

@pimvdb - 不断给予的礼物。我们的代码库始终使用 JSON.stringify()。我想保持错误代码尽可能小，所以我手动完成了:(