javascript - 如何在浏览器中查找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)
    });

这会记录有关 token 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 包含三个属性:name、stack 和 message，但都是 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
    }
}

对之前无用的答案深感抱歉...