Отображение ошибок

Slim.js — это легковесная библиотека для создания веб-компонентов и реактивных интерфейсов. Одной из важных задач при работе с динамическими приложениями является корректное отображение ошибок и управление их состоянием в DOM. Этот раздел посвящён методам обработки и визуализации ошибок в компонентах Slim.js.

Управление состоянием ошибок

В Slim.js состояние компонентов обычно хранится в виде свойств класса. Для ошибок принято создавать отдельное свойство, например errorMessage, которое будет хранить текст текущей ошибки:

class UserForm extends Slim {
    errorMessage = '';
    
    constructor() {
        super();
        this.userData = {};
    }

    submitForm() {
        try {
            this.validateData(this.userData);
            this.errorMessage = '';
        } catch (err) {
            this.errorMessage = err.message;
        }
    }

    validateData(data) {
        if (!data.name) throw new Error('Имя обязательно для заполнения');
        if (!data.email) throw new Error('Email обязателен');
    }

    get template() {
        return `
            <form onsub mit="return this.submitForm()">
                <input type="text" placeholder="Имя" value="${this.userData.name || ''}" oncha nge="this.userData.name = this.value">
                <input type="email" placeholder="Email" value="${this.userData.email || ''}" oncha nge="this.userData.email = this.value">
                <button type="submit">Отправить</button>
                ${this.errorMessage ? `<div class="error">${this.errorMessage}</div>` : ''}
            </form>
        `;
    }
}

customElements.define('user-form', UserForm);

Ключевой момент: свойство errorMessage реагирует на изменения и автоматически вызывает повторный рендеринг компонента. Это позволяет отображать ошибки сразу после их возникновения без ручного вмешательства в DOM.

Реактивное обновление ошибок

Slim.js использует реактивность на уровне свойств. Любое изменение свойства, на которое ссылается шаблон, приводит к обновлению DOM. Для ошибок это означает, что достаточно просто обновить значение свойства:

this.errorMessage = 'Ошибка при загрузке данных';

После этого в шаблоне автоматически появится блок с текстом ошибки, если он описан условным рендерингом:

${this.errorMessage ? `<div class="error">${this.errorMessage}</div>` : ''}

Стилизация сообщений об ошибках

Для корректного отображения ошибок рекомендуется использовать отдельный CSS-класс. Это позволяет визуально выделять ошибки и улучшает UX:

.error {
    color: #b00020;
    background-color: #fdd;
    border: 1px solid #b00020;
    padding: 8px;
    margin-top: 5px;
    border-radius: 4px;
    font-size: 14px;
}

Ошибки асинхронных операций

Часто ошибки возникают при работе с асинхронными вызовами, например, при загрузке данных с сервера:

async loadUserData() {
    try {
        const response = await fetch('/api/user');
        if (!response.ok) throw new Error('Не удалось загрузить данные пользователя');
        this.userData = await response.json();
        this.errorMessage = '';
    } catch (err) {
        this.errorMessage = err.message;
    }
}

Особенность: использование try/catch внутри асинхронной функции позволяет централизованно перехватывать ошибки и обновлять реактивное свойство errorMessage. При изменении этого свойства компонент автоматически обновит интерфейс.

Множественные ошибки

Для форм с несколькими полями и валидацией удобно использовать объект для хранения ошибок по полям:

class RegistrationForm extends Slim {
    errors = {};

    validateField(name, value) {
        if (!value) {
            this.errors[name] = 'Поле обязательно';
        } else {
            delete this.errors[name];
        }
    }

    get template() {
        return `
            <input type="text" oncha nge="this.validateField('username', this.value)">
            ${this.errors.username ? `<div class="error">${this.errors.username}</div>` : ''}

            <input type="email" oncha nge="this.validateField('email', this.value)">
            ${this.errors.email ? `<div class="error">${this.errors.email}</div>` : ''}
        `;
    }
}

Такой подход позволяет одновременно отображать ошибки для всех полей и динамически обновлять их состояние.

Логирование и дебаг

Для сложных компонентов полезно сочетать визуальное отображение ошибок с логированием в консоль. Это упрощает отладку и выявление проблем в приложении:

try {
    this.performAction();
} catch (err) {
    console.error(err);
    this.errorMessage = 'Произошла непредвиденная ошибка';
}

Поддержка пользовательских компонентов

Slim.js позволяет создавать переиспользуемые компоненты ошибок, которые можно вставлять в любой интерфейс:

class ErrorBox extends Slim {
    message = '';

    get template() {
        return this.message ? `<div class="error">${this.message}</div>` : '';
    }
}

customElements.define('error-box', ErrorBox);

В другом компоненте:

<error-box message="${this.errorMessage}"></error-box>

Это повышает модульность кода и упрощает поддержку стиля сообщений об ошибках в проекте.

Вывод

Система отображения ошибок в Slim.js строится на реактивных свойствах компонента, условном рендеринге и использовании CSS-классов. Асинхронные операции, множественные поля формы и пользовательские компоненты ошибок позволяют создавать гибкий и масштабируемый интерфейс для обработки исключений и уведомлений пользователя.

Оглавление