4

您如何查明来自其他域的脚本中出现的客户端错误？

为清楚起见，我们假设我们有一个平均大小的 Web 应用程序，它使用由另一个域托管的多个脚本（如 google maps JS SDK）。

有一天，您开始Script error在错误日志中收到信息，这意味着第 3 方代码中发生了错误。

但是，您如何在代码中找到调用最终失败的第 3 方代码的确切方法？

PS：开发人员无法重现该错误，并且很少发生在客户端计算机上。

PPS：对于上述错误，window.onerror 不提供调用堆栈、正确的错误消息、文件名和行号。Script error因此，除了错误消息之外，它几乎没有提供任何帮助。

购买力平价：

第三方脚本使用<script src="http://..."></script>标签包含并使用someFunctionFromTheThirdPartyScript();

4

1 回答 1

1

我曾经遇到过类似的问题，我的解决方案是......

//  The parameters are automatically passed to the window.onerror handler...
function myErrorFunction(message, url, linenumber) {
    $.post(
        "https://host.and/path/to/script/that/stores/entries",
        {
            "url":url, //  URL of the page where the error occured
            "lineNumber":linenumber, //  Line number where the error occer
            "message":message  //error message
        },
        function(){
            //callback function for the $.post()
            if(console)
                if(console.log)
                    console.log("Error reported.");
        }
    );
}
window.onerror = myErrorFunction;  //adds  function "myErrorFunction" to the onError Event

要变得更复杂，您需要利用我在调试项目中使用的一些技巧： https ://github.com/luke80/JavaScript-DebugTools-Luke

编辑：好的，我将从该项目中收集适用于您的问题的重要部分：

/*
  String prototype .hashCode()
  From: http://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript-jquery
*/
if(typeof String['hashCode'] == "undefined") {
    String.prototype.hashCode = function(){
    var hash = 0, i, char;
    if (this.length == 0) return hash;
    for (i = 0, l = this.length; i < l; i++) {
        char  = this.charCodeAt(i);
        hash  = ((hash<<5)-hash)+char;
        hash |= 0; // Convert to 32bit integer
    }
    return hash;
};
//  Start of vars
var _LOG_CALLERARGS_ON = true,
    getCallerHash = function(funcString) {
        return callerFunc.toString().hashCode();
    },
    getCallerArgs = function(obj) {
        return JSON.stringify(Array.prototype.slice.call(obj),this._detectCircularity(Array.prototype.slice.call(obj))).replace(/^\[/,"(").replace(/\]$/,")");
    },
    detectCircularity = function(obj) {  //  From: http://stackoverflow.com/questions/4816099/chrome-sendrequest-error-typeerror-converting-circular-structure-to-json
        return (function() {
            var i = 0;
            return function(key, value) {
                if(i !== 0 && typeof(obj) === 'object' && typeof(value) == 'object' && obj == value) return '[Circular]'; 
                if(i >= 29) return '[Too deep, not mined]';
                ++i;
                return value;  
            }
        })(detectCircularity);
    },
    caller = this.o.caller || arguments.callee.caller || "top";
//  End of vars
if(typeof caller != "string") {
    if(caller) {
        var callerData = ((caller.name)?caller.name:"Unnamed Caller:"+getCallerHash(caller))+((_LOG_CALLERARGS_ON)?getCallerArgs(caller.arguments):"");
        //  Since this loop could easily become problematic (infinite loop, anyone?) lets impose a limit.
        var maxLoops = 64;
        var loopCounter = 0;
        //  Now we gather all (or 64 of them) the caller names (and optionally their parameters)
        while(caller.caller && loopCounter < maxLoops) {  //  <--- there was an error here that I fixed on Oct 15, 2013 @ 11:55AM
            callerData += " <- "+((caller.caller.name)?caller.caller.name:"Unnamed Caller:"+getCallerHash(caller.caller))+((_LOG_CALLERARGS_ON)?getCallerArgs(caller.caller.arguments):"")
            caller = caller.caller;
            loopCounter++;
        }
        // callerData is now populated with your stack trace.
    } else {
        // Can't get errors from a non-existent caller
    }
}

该callerData变量应填充函数名称字符串（或函数内容的散列，以便您可以半识别它们），可选地使用调用函数的参数。

虽然您不能总是获得函数名称，但可以识别这些函数的内容（因为它们应该保持不变），并且您仍然可以从传递的参数中获得有用的调试信息等。

注意：我实际上并没有测试上面的代码，但它应该与我的 repo 中的代码基本相同。如果它不起作用，请参考 repo 并根据您的需要重构代码。:)

我希望这会有所帮助。

于 2013-10-08T21:36:01.457 回答