如何在使用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在我的"main"页面中嵌入脚本文件.例:

<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（自己动手）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'));
}

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

使用您已经使用的方法以及本答案的信息部分中提供的方法，在大多数情况下，您可以获得发生错误的行号和文件名。
您可以使用它javascript从文件中获取实际的代码行，以便您知道错误发生的位置。您可以使用ajax（$.get例如 jQuery）来做到这一点。请看下面的代码：

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]);

    }
});