JSFiddle - React, Tailwind, and code Playground

by missingno

HTML

<!doctype html>
<h2>dojo.config.deferredOnError variations</h2>
<div id="deferredOnErrorSettings"></div>
<h2>Exception and timing variations</h2>
<div id="testTableArea"></div>
<hr>
<div>
    Here is the deal among the browsers
    <h2>Internet Explorer</h2>
        A pain, the bane of my existence!
        <ul>
            <li>Will not print line numbers on the async cases under the default deferredOnError settings</li>
            <li>Prints the line numbers (but does not halt and show the debugging dialog) if deferredOnError is configured to throw.
                <ul><li>But then, in all browsers, setting deferredOnError to throw breaks Dojo on the then-then case. </li></ul>
                </li>
            <li>I only know how to see line numbers if the errors are not caught and are displayed by IE on the console.
                <ul><li>
                    This is relevant because if I had the line numbers I would at least be able to set appropriate breakpoints by hand.
                    </li></ul>
                </li>
        </ul>
    <h2>Firefox (with firebug)</h2>
        <ul>
            <li>If break on error is set then it halts on normal errors (reference error case). On custom error it shows the line number but does not halt by default.
                <ul><li>I believe it was supposed to halt on them if you clicked on the red dot after they popped up but it doesn't work all the time...
                    </li></ul>
            </li>
        </ul>
    <h2>Opera, Chrome (and I guess Safari too</h2>
        <ul>
            <li>Can break and show line numbers even on the async cases, so I have no problems here.</li>
        </ul>
</div>

JavaScript

require([
    'dojo/_base/array',
    'dojo/_base/Deferred',
    'dojo/dom-construct'
], function(
    array,
    Deferred,
    dom
){

    //============

    var doe_variations = [
        {
            name: 'Log with console.error (default from Dojo)',
            doe: function(err){
                console.error(err);
            }
        },
        {
            name: 'Set a global variable with the error',
            doe: function(err){
                console.log('setting top.lastError');
                console.log(err);
                top.lastError = err;
            }
        },
        {
            name: 'Throw the error again.',
            doe: function(err){
                console.log('throwing err', err);
                throw err;
            }
        }
    ];

    //============

    var id_fn = function(y){return y;};

    var timing_variations = [
        {
            name: 'No deferreds (control)',
            f: function(f){
                return f;
            }
        },
        {
            name: 'Deferred then',
            f: function(f){ return function(x){
                var d = new Deferred();
                var p = d.then(f);
                setTimeout(function(){d.resolve(x);}, 0);
                return p;
            };}
        },
        {
            name: 'Deferred then then',
            f: function(f){ return function(x){
                var d = new Deferred();
                var p = d.then(id_fn).then(f);
                setTimeout(function(){d.resolve(x);}, 0);
                return p;   
            };}
        }
    ];

    //============

    var error_variations = [
        {
            name: 'No error (control)',
            f: function(x){
                console.log('Hello, World!');
            }
        },
        {
            name: 'Throw an Error',
            f: function(x){
                throw new Error('My custom Error');
            }
        },
        {
            name: 'Reference...