javascript - 还使用 jQuery 时如何处理 Javascript 错误？

Question

我的情况

您好，我对 Javascript 比较陌生，所以我的问题很简单。我正在为我的公司开发多个网络应用程序。我经常遇到的一个问题是 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 在我的“主”页面中嵌入脚本文件。示例:

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

如果我使用上面的代码(“我已经做了什么”下面的代码)。我没有得到告诉我错误发生位置的堆栈跟踪。它而是指向一个 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)
}

解决方案一: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]);

    }
});