Как вы обыгрываете 500 ошибку в UI/UX?

Question

[blabs]

Как вы обыгрываете в интерфейсе 500 ошибки? Мы разрабатываем CRM, возникает вопрос как выглядит мировая практика работы с 500 ошибками.

для себя выделили следующие варианты, при возникновений таких ошибок:
1. Выводим модальное окно, в котором уведомляем, что запрос не может быть обработать в текущий момент и простой попробовать снова через некоторое время
2. На важные API методы (авторизация, регистрация и тд) сразу переводить на страницу технических работ

А какой у вас опыт?

Comments

[Модератор]

blabs дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

Answer 1

[Илья Свиридов]

1 вариант, но с поправкой на то, что в ui/ux оно выводится в правом нижнем углу и ничего не происходит более. Пользователь понимает, что он ввел некорректные креды или проблема с сервером и больше не пытается что-то сделать. Но у нас пользователи достаточно продвинутые и поймут, что при условии что сервак сбоит - не будет пытаться делать что-то дальше и тратить свое время.
Технически выглядит следующим образом:

- Есть errorService - который вызывается глобально в необходимом вам месте в коде.
- Принимает 4 параметра в следующем виде: errorService (statusCode, title, description, source)
- async handleError(statusCode, title, description, source), формирует что-то вроде строки userAnswer в зависимости от statusCode и передает ее дальше (this.__handleUserResponse({ title, description, userAnswer, source }))
Вот пример дальнейшей обработки:

__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;
        }
    }