github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-01 01:51:45 +08:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
framework/core/js/src/common/Application.js
View File

@ -324,12 +324,15 @@ export default class Application {
} }
const isDebug = app.forum.attribute('debug'); 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({ error.alert = new Alert({
type: 'error', type: 'error',
children, children,
controls: isDebug && [ 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 Debug
</Button>, </Button>,
], ],
@ -338,6 +341,17 @@ export default class Application {
try { try {
options.errorHandler(error); options.errorHandler(error);
} catch (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); this.alerts.show(error.alert);
} }
@ -350,12 +364,13 @@ export default class Application {
/** /**
* @param {RequestError} error * @param {RequestError} error
* @param {string[]} [formattedError]
* @private * @private
*/ */
showDebug(error) { showDebug(error, formattedError) {
this.alerts.dismiss(this.requestError.alert); this.alerts.dismiss(this.requestError.alert);
this.modal.show(new RequestErrorModal({ error })); this.modal.show(new RequestErrorModal({ error, formattedError }));
} }
/** /**

20
framework/core/js/src/common/components/RequestErrorModal.js
View File

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