클라이언트 측 오류 및 "스크립트 오류"로깅

Question

다른 도메인의 스크립트에서 발생하는 클라이언트 측 오류를 어떻게 식별합니까?

Google지도 JS SDK와 같이 다른 도메인에서 호스팅되는 여러 스크립트를 사용하는 평균 크기의 웹 응용 프로그램이 있다고 가정 해 보겠습니다.

언젠가는 오류 로그에 Script error을 받기 시작했습니다. 이는 제 3 자 코드에서 오류가 발생했음을 의미합니다.

하지만 코드에서 결국 실패한 타사 코드를 호출 한 정확한 방법을 어떻게 찾을 수 있습니까?

PS : 오류는 개발자가 재현 할 수 없으며 클라이언트 컴퓨터에서만 발생합니다.

PPS : 위의 오류에 대해 window.onerrorDOUSE NOT은 호출 스택, 적절한 오류 메시지, 파일 이름 및 행 번호를 제공합니다. 따라서 문자 그대로 Script error 오류 메시지 외에 도움이되는 것은 없습니다.

PPPS :

제 3자는 스크립트가 예전에 비슷한 문제를 가지고 있었고, 내 솔루션는 ...

// 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 

더 얻으려면

Answer 1

someFunctionFromTheThirdPartyScript();를 사용하여 <script src="http://..."></script> 태그를 사용하여 포함 및 실행 정교한 당신은 내 디버그 프로젝트에 넣은 몇 가지 트릭을 활용해야합니다 : https://github.com/luke80/JavaScript-DebugTools-Luke

편집 : , 나는이 프로젝트 문제에 적용되는 중요한 비트에서 확인을 수집합니다 :

callerData 변수는 함수 이름의 문자열 (또는 함수의 해시로 채워야한다

/* 
    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 
    } 
} 

내용을 세미 식별 할 수 있습니다) 선택적으로 함수가 호출 된 매개 변수.

항상 함수 이름을 얻을 수있는 것은 아니지만 해당 함수의 내용을 식별 할 수 있기 때문에 (동일한 상태로 유지해야 함) 전달 된 매개 변수 등에서 유용한 -ish 디버그 정보를 얻을 수 있습니다.

참고 : 실제로 위 코드를 테스트하지는 않았지만 내 repo 코드와 거의 같아야합니다. 작동하지 않는 경우 repo를 참조하여 필요에 맞게 코드를 다시 작성하십시오. :)

도움이 되길 바랍니다.