Пользовательские страницы ошибок

Page.js предоставляет возможность эффективно управлять маршрутизацией в одностраничных приложениях (SPA). Одной из ключевых особенностей является обработка ситуаций, когда пользователь попадает на несуществующий маршрут. Такие случаи требуют настройки пользовательских страниц ошибок, чтобы приложение оставалось удобным и информативным.

Определение «страницы ошибки» в контексте Page.js

В Page.js страница ошибки — это маршрут, который срабатывает, когда ни один из зарегистрированных маршрутов не совпал с текущим URL. Обычно используется для отображения сообщений типа 404 Not Found, но может включать и другие состояния ошибок, например, 500 Internal Server Error, если маршрут вызывает исключение.

Основная идея заключается в том, чтобы задать маршрут, который будет перехватывать все неопределённые пути.

Регистрация маршрута для страницы ошибки

Page.js обрабатывает маршруты в порядке их объявления. Для создания страницы ошибки необходимо зарегистрировать маршрут с шаблоном, который соответствует всем оставшимся URL. Чаще всего используется wildcard (*) или /:path*.

Пример регистрации пользовательской страницы ошибки:

// Импорт Page.js
import page from 'page';

// Основные маршруты
page('/', () => {
    document.body.innerHTML = '
Главная страница
';
});

page('/about', () => {
    document.body.innerHTML = '
О нас
';
});

// Маршрут для страницы ошибки
page('*', () => {
    document.body.innerHTML = `
        
404 - Страница не найдена

        
Извините, запрашиваемая страница не существует.

    `;
});

// Инициализация маршрутизации
page();

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

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

Страницы ошибок можно делать динамическими, используя параметры URL или состояние приложения. Например, можно передавать дополнительную информацию о причине ошибки:

page('*', (ctx) => {
    const attemptedPath = ctx.path;
    document.body.innerHTML = `
        
404 - Страница не найдена

        
Вы пытались открыть: ${attemptedPath}

        Вернуться на главную
    `;
});

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

Комбинация с middleware для универсальной обработки ошибок

Page.js поддерживает middleware, что позволяет перехватывать ошибки до рендеринга страницы. Это особенно полезно, если приложение динамически загружает данные.

Пример использования middleware для ошибок:

// Middleware для проверки маршрута
function checkRoute(ctx, next) {
    const validRoutes = ['/', '/about', '/contact'];
    if (!validRoutes.includes(ctx.path)) {
        ctx.error = 404;
    }
    next();
}

page(checkRoute);

// Основные маршруты
page('/', () => document.body.innerHTML = '
Главная
');
page('/about', () => document.body.innerHTML = '
О нас
');

// Middleware для отображения страницы ошибки
page((ctx) => {
    if (ctx.error) {
        document.body.innerHTML = `
${ctx.error} - Страница не найдена
`;
    }
});

page();

Особенность: middleware позволяет централизованно управлять ошибками, не дублируя код для каждого маршрута.

Стиль и интерфейс страниц ошибок

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

page('*', () => {
    document.body.innerHTML = `
        

            
404

            
Запрашиваемая страница отсутствует

            На главную
        

    `;
});
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    font-family: Arial, sans-serif;
}

.error-page h1 {
    font-size: 6rem;
    margin: 0;
}

.error-page p {
    font-size: 1.5rem;
    margin: 10px 0 20px;
}

.btn-home {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

Результат: страница ошибки выглядит как полноценный элемент интерфейса, а не простое текстовое сообщение.

Советы по организации страниц ошибок

  1. Всегда регистрировать маршрут ошибки последним.
  2. Использовать middleware для глобальной обработки исключений и ошибок.
  3. Динамически показывать путь или причину ошибки, чтобы облегчить отладку и информирование пользователя.
  4. Стилизовать страницу ошибки в соответствии с дизайном приложения, чтобы не нарушать визуальную целостность.
  5. Добавлять навигацию на другие страницы для возврата пользователя в безопасную область приложения.

Поддержка разных типов ошибок

Page.js не ограничивается только 404. Можно создавать маршруты для других состояний:

page('/error/500', () => {
    document.body.innerHTML = `
        
500 - Внутренняя ошибка сервера

        
Произошла ошибка на сервере. Попробуйте позже.

    `;
});

page('/error/403', () => {
    document.body.innerHTML = `
        
403 - Доступ запрещён

        
У вас нет прав для просмотра этой страницы.

    `;
});

Вывод: сочетание wildcard маршрутов и отдельных страниц ошибок позволяет гибко управлять любыми ошибочными состояниями приложения.

Оглавление