如何在使用jQuery时处理Javascript错误？

Question

我的情况

嗨，我相对较新的Javascript，所以我的问题可能非常简单。 我为我的公司开发了多个webapps。我经常遇到的一个问题是Javascript错误。我知道如何使用try / catch来处理它们。

我想做什么

我想要在服务器上写一个日志文件，或者给用户一些他们可以发送给我的东西，而不需要任何调试知识。 这意味着，必须通知用户在两种情况下都发生了错误。

我已经做了什么

我有一个想法是使用try catch并使用我在此处找到的代码：https://stackoverflow.com/a/6055620/3581748，以便用户向我发送堆栈跟踪。

示例：

<button id="demo" onClick="errorHandling()">Produce error</button>
<script>
function errorHandling() {
    try {
        document.getElementById("somethingNotExisting").value * 2;
    } catch (_err) {
        window.prompt("Copy to clipboard: Ctrl+C, Enter", _err.stack);
    }
}
</script>

或者在这里：https://jsfiddle.net/n79xv6nt/

大部分时间都有效。

问题

我有时会使用jQuery在我的＆＃34; main＆＃34; -page中嵌入脚本文件。 例如：

<div id="forScript"></div>
<script>
    $("#forScript").load('scripts/additionalScript.php');
</script>

如果我使用上面的代码（下面的代码＆＃34;我已经做过的＆＃34;）。我没有得到一个堆栈跟踪，告诉我发生错误的位置。它反而指向一个jQuery文件。 Google Chrome控制台会显示真实的堆栈跟踪。 另一个问题是，我拿到亚麻布后如何找到文件？在我的IDE中，线条是不同的，因为中间有PHP。

我的问题

是否有可能为此案件获得良好的错误消息？ （最好不要自己抛出错误） 如何访问附加脚本并查看chrome看到的相同亚麻布？ 你会如何通知用户/记录错误？

Answer 1

信息

好的，首先看一下这个链接：http://tobyho.com/2011/06/08/the-javascript-stacktrace-blog/。 它有很多关于不同浏览器和不同的javascript执行方式的信息。每种浏览器和执行方法都提供了不同的可能性。

例如在IE中，大多数方法都不起作用，并且您只能获得有时正确文件的行号。

另一种适用于大多数浏览器但只能为您提供亚麻和文件的方法是：

window.onerror = function(message, fileURL, lineNumber){
  log(message + ': ' + fileURL + ': ' + lineNumber)
}

解决方案1：DIY

您的解决方案是DIY (Do it Yourself) Stacktrace。使用DIY Stacktrace，你得到的痕迹总是正确的。虽然你需要考虑一些缺点：

1. 它不会为您提供文件位置/行号。
2. 它不能用于抛出错误 - 隐式或显式 - 因为堆栈跟踪的构建需要作为其自己的语句（例如，printStackTrace）进行说明。所以，你不能有堆栈跟踪和抛出的错误 - 你也不能吃蛋糕而且也吃掉它。

<强>码

function printStackTrace() {
  var callstack = [];
  var isCallstackPopulated = false;
  try {
    i.dont.exist+=0; //doesn't exist- that's the point
  } catch(e) {
    if (e.stack) { //Firefox
      var lines = e.stack.split('\n');
      for (var i=0, len=lines.length; i<len; i++) {
        if (lines[i].match(/^\s*[A-Za-z0-9\-_\$]+\(/)) {
          callstack.push(lines[i]);
        }
      }
      //Remove call to printStackTrace()
      callstack.shift();
      isCallstackPopulated = true;
    }
    else if (window.opera && e.message) { //Opera
      var lines = e.message.split('\n');
      for (var i=0, len=lines.length; i<len; i++) {
        if (lines[i].match(/^\s*[A-Za-z0-9\-_\$]+\(/)) {
          var entry = lines[i];
          //Append next line also since it has the file info
          if (lines[i+1]) {
            entry += ' at ' + lines[i+1];
            i++;
          }
          callstack.push(entry);
        }
      }
      //Remove call to printStackTrace()
      callstack.shift();
      isCallstackPopulated = true;
    }
  }
  if (!isCallstackPopulated) { //IE and Safari
    var currentFunction = arguments.callee.caller;
    while (currentFunction) {
      var fn = currentFunction.toString();
      var fname = fn.substring(fn.indexOf("function") + 8, fn.indexOf('')) || 'anonymous';
      callstack.push(fname);
      currentFunction = currentFunction.caller;
    }
  }
  output(callstack);
}

function output(arr) {
  //Optput however you want
  alert(arr.join('\n\n'));
}

解决方案2：从js或php文件获取第X行。

使用您已经使用的方法以及本答案的“信息”部分中提供的方法，在大多数情况下，您可以获取发生错误的位置和文件名。
您可以使用javascript从文件中获取实际的代码行，以便了解错误发生的位置。您可以使用ajax（例如jQuery $.get）来执行此操作。请参阅以下代码：

var LineNumber = 0; //your line number from error here.
$.ajax({
    type: 'GET',
    url: 'YOURFILE',
    success: function (file_html) {
        // success
        console.log('success : ' + file_html);
        var file_content = "" + file_html //implicit convert to string
        var lines = file_content.split("\n");

        alert(lines[LineNumber]);

    }
});