B
B
blabs2019-08-15 10:00:23
User interface
blabs, 2019-08-15 10:00:23

How do you beat the 500 error in UI/UX?

How do you play with 500 errors in the interface? We are developing CRM, the question arises of what the world practice of working with 500 errors looks like.
we have identified the following options for ourselves, when such errors occur:
1. We display a modal window in which we notify that the request cannot be processed at the current moment and it’s easy to try again after a while
2. On important API methods (authorization, registration, etc.) immediately transfer to the page of technical works
What experience do you have?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
Ilya Sviridov, 2019-08-16
@IU_Sviridov

Option 1, but adjusted for the fact that in ui / ux it is displayed in the lower right corner and nothing else happens. The user realizes that he has entered incorrect credits or there is a problem with the server and does not try to do anything anymore. But our users are quite advanced and will understand that if the server fails, they will not try to do something further and waste their time.
Technically, it looks like this:
- There is an errorService - which is called globally in the place you need in the code.
- It takes 4 parameters in the following form: errorService (statusCode, title, description, source)
- async handleError(statusCode, title, description, source), generates something like a userAnswer string depending on the statusCode and passes it on (this.__handleUserResponse({ title, description, userAnswer, source }))
Here is an example of further processing:

__handleUserResponse(response) {
        switch (response.userAnswer) {
            case 'toLogin':
                window.location = '/Home/Login/';
                break;
            case 'reload':
                location.reload(true);
                break;
            case 'goBack':
                Backbone.history.history.back();
                break;
            case 'showLoginPopup':
                LoginService.showLoginPopup();
                break;
            case 'close':
                break;
            case 'showNotification': {
                let text = null;
                const title = this.__filterServiceMessageText(response.title);

                try {
                    let parsedDescription;
                    if (response.source) {
                        parsedDescription = response.source;
                    } else if (response.description) {
                        parsedDescription = JSON.parse(response.description);
                    }
                    if (parsedDescription) {
                        if (Array.isArray(parsedDescription.extraData)) {
                            parsedDescription.extraData.forEach(item => {
                                text = item.message || item.Message || parsedDescription.message || '';
                                if (text) {
                                    this.showNotification({ text });
                                }
                            });
                        } else if (parsedDescription.extraData) {
                            if (typeof parsedDescription.extraData === 'string') {
                                text = parsedDescription.extraData;
                            } else {
                                text = Object.values(parsedDescription.extraData).join('\n');
                            }

                            if (text || title) {
                                this.showNotification(text ? { text, title } : title);
                            }
                        } else if (parsedDescription.message) {
                            text = parsedDescription.message;

                            if (text || title) {
                                this.showNotification(text ? { text, title } : title);
                            }
                        }
                    }
                } catch (e) {
                    if (text || title) {
                        this.showNotification(text ? { text, title } : title);
                    }
                }
                break;
            }
            default:
                break;
        }
    }

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question