Some improvements to request error handling and modal error formatting (#1929)

* Use decodeURI instead of unescape & don't close modals

* Add comment

* Don't use a try/catch, clean up the group log code

* Remove double negative

* Format; fix issues from rebasing
This commit is contained in:
David Sevilla Martín 2020-05-12 12:23:13 -04:00 committed by GitHub
parent 37a30b1b81
commit 87a490c83e
2 changed files with 33 additions and 8 deletions

View File

@ -324,12 +324,15 @@ export default class Application {
}
const isDebug = app.forum.attribute('debug');
// contains a formatted errors if possible, response must be an JSON API array of errors
// the details property is decoded to transform escaped characters such as '\n'
const formattedError = error.response && Array.isArray(error.response.errors) && error.response.errors.map((e) => decodeURI(e.detail));
error.alert = new Alert({
type: 'error',
children,
controls: isDebug && [
<Button className="Button Button--link" onclick={this.showDebug.bind(this, error)}>
<Button className="Button Button--link" onclick={this.showDebug.bind(this, error, formattedError)}>
Debug
</Button>,
],
@ -338,6 +341,17 @@ export default class Application {
try {
options.errorHandler(error);
} catch (error) {
if (isDebug && error.xhr) {
const { method, url } = error.options;
const { status = '' } = error.xhr;
console.group(`${method} ${url} ${status}`);
console.error(...(formattedError || [error]));
console.groupEnd();
}
this.alerts.show(error.alert);
}
@ -350,12 +364,13 @@ export default class Application {
/**
* @param {RequestError} error
* @param {string[]} [formattedError]
* @private
*/
showDebug(error) {
showDebug(error, formattedError) {
this.alerts.dismiss(this.requestError.alert);
this.modal.show(new RequestErrorModal({ error }));
this.modal.show(new RequestErrorModal({ error, formattedError }));
}
/**

View File

@ -6,16 +6,26 @@ export default class RequestErrorModal extends Modal {
}
title() {
return this.props.error.xhr ? this.props.error.xhr.status + ' ' + this.props.error.xhr.statusText : '';
return this.props.error.xhr ? `${this.props.error.xhr.status} ${this.props.error.xhr.statusText}` : '';
}
content() {
const { error, formattedError } = this.props;
let responseText;
// If the error is already formatted, just add line endings;
// else try to parse it as JSON and stringify it with indentation
if (formattedError) {
responseText = formattedError.join('\n\n');
} else {
try {
responseText = JSON.stringify(JSON.parse(this.props.error.responseText), null, 2);
const json = error.response || JSON.parse(error.responseText);
responseText = JSON.stringify(json, null, 2);
} catch (e) {
responseText = this.props.error.responseText;
responseText = error.responseText;
}
}
return (