title: Get all javascript errors on page/javascript error handling
body: <p>I want to be able to send myself all the javascript errors on a page. I am an extension developer, so the following has an emphasis on making sure the dom is ready before making calls to it. </p>
  
  <p>I investigated adding some functionality to the <code>throw</code> to also send or mail the exceptions, but I didn't find this to be possible.</p>
  
  <p>1:main solution to this, a <em>window.onerror handler</em>:</p>
  
  <pre><code>window.onerror = function(e, url, line){
    mailError('onerror: ' + e + ' URL:' + url + ' Line:' + line);
    console.error('\nLine ' + line + ':');
    setTimeout(function(){retry();}, 100); //mainly useful in content scripts for extensions, 
    return true; 
  }
  </code></pre>
  
  <p>May also need to do same thing via jQuery:</p>
  
  <pre><code>$(window).error( 
    function(e, url, line){
      //handle error
    }
  );
  </code></pre>
  
  <p>The downfall of this is that your code has stopped executing. </p>
  
  <p>To avoid errors stopping execution, it's best to use callbacks to make sure code executes in a certain sequence, and to utilize events wherever possible. You can also protect dom calls with a few techniques</p>
  
  <pre><code>$(document).ready({
    //you usually won't get bad dom calls wrapping your code in this
  });
  </code></pre>
  
  <p>You can also consider running code on window.onload</p>
  
  <pre><code>window.onload = function(){
    //you page will probably twitch upon executing code at this time
    //but you will almost never have a bad dom call
  };
  </code></pre>
  
  <p>Another technique</p>
  
  <pre><code>if (document.getElementById('iNeedThisElement')) {
    //doin work!
    document.getElementById('iNeedThisElement').style.display = 'block';
  } else {
    var stillNeedToTakeCareOfX = true; //false otherwise since it's undefined
    mailError('iNeedThisElement was unavailable...');
  }
  </code></pre>
  
  <p>Using these techniques and just debugging your application, you should be fairly well off. Since console.error, .warn, and .log statements cannot be retrieved and reported back to your, a small alternative suite is provided below:</p>
  
  <pre><code>var Xe = { }; //Extreme error suite
  
  function extraInfo(e){
     //e optional
     if(!e)e = true;
  
     //add an extra debug info, such as navigator or current URL
     return ' currentURL: '+ document.URL + 
          '\n userAgent: ' + navigator.userAgent + 
          '\n platform: '  + navigator.platform + 
          '\n userid: '    + localStorage.userid + 
          '\n language: '  + navigator.langauge + 
          '\n cookies?: '  + navigator.cookiesEnabled;
  }
  
  Xe.error = function(e){
    console.error(e); //maintain original functionality
    mailError('Xe err: ' + e + extraInfo() );
  }
  
  
  Xe.warn = function(e){
    console.warn(e);
    mailError('Xe warn: ' + e + extraInfo() );
  }
  
  
  Xe.log = function(e){
    console.log(e);
    mailError('Xe log: ' + e + extraInfo() );
  }
  </code></pre>
  
  <p>As a last ditch, you can continually attempt to execute a chunk of code until it executes without errors. This is "2" below.</p>
  
  <p>2:group code in large chunks and attempting to re-execute x seconds later after catching an error, or continue to next chunk of code</p>
  
  <pre><code>//defExe = DEFinitely EXEcute this code
    //functionArg, reference to a function holding a large chunk of code
    //seconds, timeout in milliseconds to re-attempt error free execution of this function
  function defExe(functionArg, seconds) {
    //seconds is optional
    if (!seconds)seconds = 300;
  
    try {
      functionArg();
    } catch(e) {
      //mail the error plus extra info
      mailError('caught ' + e + ' attempting to re-execute ' + functionArg.name + ' in ' + seconds + ' milliseconds');
  
      //re-attempt to execute this code
      setTimeout(function(){ 
         defExe(functionArg, seconds); 
      }, seconds);
    }
  }
  </code></pre>
  
  <p>this it is then used like</p>
  
  <pre><code>//array to group function chunks
  var fn = [ ];
  
  fn[1] = function (){
    //a large chunk of javascript
  }
  defExe(fn[1]);
  
  fn[2] = function(){
    //another chunk of your program
  }
  defExe(fn[2]);
  </code></pre>
  
  <p>#2 Summary: Group code in functions and run in try-catch block, repeating if an errors are caught</p>