如何修复浏览器中的 javascript 错误并改进错误日志记录

Question

在浏览器中呈现的购物车页面包含错误记录器：

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

将错误记录到服务器中的 Mono MVC4 应用程序：

    public ActionResult Error(string errorMsg, string url,
        string lineNumber, string column, string errorobj)
    {
        Logifail.Write(
            string.Format(
            "Error {0}\n" +
            "Url {1}\n" +
            "Line {2}\n" +
            "Column {3}\n" +
            "Obj {4}\n", errorMsg, url, lineNumber, column, errorobj
            );
        return new ContentResult();
    }

服务器日志包含大量消息

错误对象不支持此属性或方法
网址 http‍://example.com/Store/Details?product=H62810-00
132号线
专栏
对象

第 132 行包含 var price = Number($('#Price').text().replace(',', '.').trim()), 此行在更新购物车价格的方法中：

   var updatePage = function () {
        var price = Number($('#Price').text().replace(',', '.').trim()), // line 132
          quantity = Number($('#spinner').val().replace(',', '.'));
        var total_eur = price * quantity;
        $('span#total_eur').text(total_eur.toFixed(2));
    };

在这一行中有时看起来有些问题。 如何解决此错误？我在此页面中尝试了调用此方法的可能用户交互，但没有发生错误。此错误仅在部分用户中发生。

可以更改updatePage() 以免发生错误吗？ 如何在浏览器中记录有关 Javascript 错误的更多信息：Javascript 堆栈跟踪、变量名称以及来自浏览器的当前数据和其他数据，这些数据可以提供有关错误的更多信息？ column 和 errorobj 始终为空。为什么这些不传递给错误处理程序？

jQuery, jquery-ui 和一些插件被使用。以下文件以缩小形式加载到页面中：

      "~/Scripts/jquery/jquery-1.8.3.js",
      "~/Scripts/jquery-ui-1.9.2.custom.js",
      "~/Scripts/menubar.js",
      "~/Scripts/jBreadCrumb/js/jquery.jBreadCrumb.1.1.js",
      "~/Scripts/Pikachoose/jquery.fancybox.js",
      "~/Scripts/jquery.dotdotdot-1.5.6-packed.js",
      "~/Scripts/responsiveslides.js",
      "~/Scripts/jcarousel-0.2/lib/jquery.jcarousel.js",

Answer 1

.trim() 在 IE8 中不受支持，因此这很可能是您只在少数用户中看到它的原因。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim 建议使用以下 Polyfill

if (!String.prototype.trim) {
  (function(){
    // Make sure we trim BOM and NBSP
    var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
    String.prototype.trim = function () {
      return this.replace(rtrim, "");
    }
  })();
}

这里是.trim()的支持选项

Chrome  | Firefox (Gecko)   | Internet Explorer | Opera | Safari
-----------------------------------------------------------------
(Yes)   |   3.5 (1.9.1)     |        9          | 10.5  | 5