{# This block is part of it's own script tag, that way it is parsed and #}
{# executed before any potentially buggy code. When using this, order #}
{# matters - try to include this as high up as possible in the calling #}
{# template, that way this handler can catch as much as possible. #}
<script type="text/javascript">
  function handleErrors(errors, element, msg) {
    console.error(errors);
    msg = msg === undefined ? '' : msg + '<br><br>';
    var helpMsg = '<p class="alert alert-danger"> \
                   There was an error loading and rendering the \
                   visualization.<br><br>' + msg + 'Please \
                   copy-and-paste the following error messages when \
                   reporting this error (please be aware that the content \
                   of your analysis data and/or metadata is included in \
                   these messages):</p>';
    var helpMsgDiv = $('<div></div>');
    helpMsgDiv.append(helpMsg);
    helpMsgDiv.append('<pre><code>' + errors.join('\n\n') + '</code></pre>');
    element.replaceWith(helpMsgDiv);
  }
  window.onerror = function(error) {
    handleErrors([error], $('{{ loading_selector }}'));
  };
</script>