JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="results">
</ul>

CSS

.results li {
    font-family: sans-serif;
    border: solid 1px #ccc;
    margin: 1em;
    padding: 0.25em;
}

.results h3 {
    font-weight: bold;
}
.results .success {
    border-color: green;
}

.results .error {
    border-color: red;
}

JavaScript

function show(text, cname) {
    return function(res) {
        $('<li>')
            .append("<h3>" + text + "</h3>")
            .append("" + res)
            .addClass(cname)
            .appendTo('.results');
    }
};
    
var died,
    die = function() { throw new Error("Boom!");},
    done = $.Deferred().resolve("done").promise(),
    thenned = done.then(function(res) { return res + " and then"}),
    removeCounterClaim = function() { $('.null-hypothesis').remove() };
                                        
    
done.then(show("original", 'success'));
thenned.then(show("thenned", 'success'));
done.then(show('Should be untouched', 'success'), show('Was infected', 'error'));

/**
*  Demonstrating that errors are not caught by callbacks, and that errors are thrown in the
*  current context of execution.
**/
                          
try {                       
    died = done.then(die);
} catch (e) {
    show("It makes no sense whatsoever to die here - cb should be async.", 'error')(e);
}
                       
try {
    died.then(show('Should be a failure', 'error'), show('Caught thrown error - cool!', 'success'));
} catch (e) {
    show("died should be a functional promise", 'error')(e);
}
                       
/**
* Demonstrating that the original promise is now irredemably broken.
**/
     
show('Done is now broken.', 'error')('Neither callback fired');                                       
done.then(removeCounterClaim, removeCounterClaim);
done.then(show('Should be untouched', 'success'), show('Was infected', 'error'));