webui: better error reporting

On page:
- styled to use proper line breaks
- "centered" by .container class and not by huge padding

Console:
- proper line breaks
- links in stack trace are clickable(Chrome)

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>
This commit is contained in:
Petr Vobornik 2014-07-29 14:13:10 +02:00
parent 359dfe58b9
commit 23413e9daa
2 changed files with 14 additions and 12 deletions

View File

@ -189,7 +189,6 @@ div[name=settings].facet-group li a {
/* --- Facet error --- */ /* --- Facet error --- */
.facet-error { .facet-error {
padding: 2em 15em;
background-color: white; background-color: white;
} }
@ -199,7 +198,10 @@ div[name=settings].facet-group li a {
.facet-error .error-details { .facet-error .error-details {
margin-top: 2em; margin-top: 2em;
font-family: monospace; }
.facet-error .error-details code {
white-space: pre;
} }
/* ---- Search Facet ---- */ /* ---- Search Facet ---- */

View File

@ -247,26 +247,26 @@ define([
on_phase_error: function(error) { on_phase_error: function(error) {
window.console.error(error);
error = error || {}; error = error || {};
var name = error.name || 'Runtime error'; var name = error.name || 'Runtime error';
var error_container = $('<div/>', { var error_container = $('<div/>', {
'class': 'facet-content facet-error' 'class': 'container facet-content facet-error'
}).appendTo($('.content').empty()); }).appendTo($('.app-container .content').empty());
error_container.append('<h1>'+name+'</h1>'); error_container.append('<h1>'+name+'</h1>');
var details = $('<div/>', { var details = $('<div/>', {
'class': 'error-details' 'class': 'error-details'
}).appendTo(error_container); }).appendTo(error_container);
details.append('<p> Web UI got in unrecoverable state during "'+error.phase+'" phase.</p>'); details.append('<p> Web UI got in unrecoverable state during "'+error.phase+'" phase.</p>');
if (error.name) window.console.error(error.name);
if (error.results) { if (error.results) {
var msg = { var msg = error.results.message;
message: error.results.message, var stack = error.results.stack.toString();
stack: error.results.stack window.console.error(msg);
}; window.console.error(stack);
details.append('<strong>Technical details:</strong>'); details.append('<h3>Technical details:</h3>');
details.append('<p>'+JSON.stringify(msg)+'</p>'); details.append($('<div/>', { text: error.results.message }));
details.append($('<div/>').append($('<code/>', { text: stack })));
} }
}, },