如何在浏览器中的javascript中查找发生异常的行

Question

ASP.NET MVC4 购物车应用程序使用客户端浏览器实现错误日志记录

window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
    $.post('/Home/Error',
    {
        "errorMsg": errorMsg,
        "url": url,
        "lineNumber": lineNumber,
        "column": column,
        "errorobj": JSON.stringify(errorObj)
    });

这会记录有关令牌 o 的奇怪错误：

Error Uncaught SyntaxError: Unexpected token o

网址和列号略有不同：

Line 1 Column 2

Line 1 Column 10 Object {}

Line 1 Column 10 Object {}

Line 1 Column 9 Object {}

Line 1 Column 1 Object {}

行号始终为 1，对象为空。 有 4 种不同的列号：1,2,9,10

如何在 javascript 中找到导致此异常的行？ 在无法访问的客户端浏览器中发生异常。唯一的办法是 将js代码行信息发送到浏览器。

这些页面包含很少的 ajax 调用。 /Store/Browse 包含将商品添加到购物车的 ajax：

   request = $.post('/Store/AddToCart',
        serializedData, function (response) {
            $("#cart-status").text(response.Total);
            $inputs.prop("disabled", false);
            var xx = $form[0].quantity;
            $($form[0].quantity).css("background-color", "green");
            showMessage(response.Message);
            showFadeOutMessage(response.Message);
        })
           .fail(function (jqXHR, textStatus, errorThrown) {
               alert('Error ' + textStatus);
           })
          .always(function () {
              $inputs.prop("disabled", false);
          });

可以将 lastLine 分配添加到类似的代码中

   var lastLine;
   lastLine="request = $.post('/Store/AddToCart";

   request = $.post('/Store/AddToCart',
        serializedData, function (response) {

            lastLine='$("#cart-status").text(response.Total)';
            $("#cart-status").text(response.Total);
            lastLine='$inputs.prop("disabled", false)';
            $inputs.prop("disabled", false);
            ...

并在 window.onerror 中将 lastLine 值发送到服务器，但这需要手动更改大量代码。 有没有更好的方法来找到这里发生错误的行，也许还有堆栈跟踪？

Answer 1

window.onerror 在 IE、Chrome 和 Firefox 之间是不同的。您的代码将在 IE 中运行。此代码适用于 IE 和 chrome。

window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
        $.post('/Home/Error',
        {
            "errorMsg": errorMsg,
            "url": url,
            "lineNumber": lineNumber,
            "column": column,
            "errorobj": errorObj ? errorObj.stack : ''
        });

在 Chrome 中 errorObj 包含三个属性：名称、堆栈和消息——但都是getter。 JSON.parse 不处理函数，getter 是一个函数。

例如（仅限 Chrome！）

window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
    console.log(JSON.stringify(errorObj)); // {}
    console.log(errorObj.stack); //SyntaxError: Unexpected token o
                                 //    at Object.parse (native)
                                 //    at foo (http://www.example.com/index.js:8:10)
                                 //    at ...
    console.log(errorObj.message); // Unexpected token o
    console.log(errorObj.name); // SyntaxError
}

在 IE errorObj 中它是一个简单的对象。但是errorObj.stack更清晰。

Firefox 不发送 errorObj 参数。您需要使用 try catch 包装代码（或覆盖 JSON.parse 并使用 try catch 包装调用），然后发送 e.toString() 和 e.stack。例如：

var bckJSON = JSON.parse;
JSON.parse = function () {
    try {
        bckJSON.apply(argumetns};
    } catch (e) {
        // send e.toString() + '\n' + e.stack
    }
}

抱歉之前没有用的答案...

Answer 2

使用对象调用 JSON.parse 时会出现错误“错误未捕获语法错误：意外标记 o”。 可能发生此代码 -

JSON.parse({});

Answer 3

JQuery，在某些情况下，使用 $.parseJSON 来转换 ajax 查询而不检查数据是否为字符串。我不知道什么时候会发生这种情况。

您可以通过这种方式解决：

（使用 $.parseJSON 因为它处理没有 JSON 库的浏览器）

JsonParseFix.js

function isString(value) {
    return Object.prototype.toString.call(value) === "[object String]";
}

var bckJSONparse = $.parseJSON;
$.parseJSON = function(text, reviver) {
    if (!isString(text)) {return text};

    bckJSONparse.apply(arguments);
};

test.js

function test(value, message) {
    try {
       $.parseJSON(value);
       console.log('Test succeed: ' + message);
    } catch (e) {
       alert('Test failed: ' + message);
    }
}

test({}, 'Empty object');
test('<', 'UnSupported strings'); // Failed! 

Angular 以类似的方式解决此问题 (angular.fromJson documentation)。

（对不起我的英语......）

Answer 4

基于 Elad 的 andwer 和 cmets，我创建了以下在 IE、Chrome 和 FireFox 中返回调用堆栈的方法：

window.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
    var stack;
    // Firefox does not send errorObj argument. Wrap the code with try catch 
    // and send e.toString() and e.stack.
    try {
        stack = errorObj ? errorObj.stack : '';
    } catch (e) {
        stack = e.toString() + " stack " + e.stack;
    }

    $.ajax('/api/errorlog?' + $.param({
        errorMsg: errorMsg,
        url: url,
        lineNumber: lineNumber,
        column: column
    }),
      {
          data: JSON.stringify({ stack: stack }),
          type: 'POST',
          dataType: 'json',
          contentType: "application/json"
      });
    alert(errorMsg + ' Line ' + lineNumber + ' Column ' + column + '\n\n' + stack);
};