Логирование из браузера через REST API
Отправляйте ошибки и события фронтенда в Logger прямо из браузера. Один fetch — и событие появляется в клиенте Logger, пока вы смотрите на экран.
Отправка события из браузера
Отправьте первое событие из JavaScript за пару минут. Consumer Key выдаётся после регистрации в веб-интерфейсе.
const URL = "https://logger.dp-projects.ru/sendmess";
async function log(module, mess) {
try {
await fetch(URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
key: 'ваш-consumer-key',
module,
mess,
}),
});
} catch (e) {
// логирование не должно ломать интерфейс
}
}
log('checkout', { event: 'button_click', button: 'pay' });
Перехват необработанных ошибок
Подпишитесь на window.onerror и unhandledrejection, чтобы ошибки фронтенда попадали в Logger автоматически — без ручных вызовов log() в каждом месте.
window.addEventListener('error', (e) => {
log('frontend', {
type: 'error',
message: e.message,
source: e.filename,
line: e.lineno,
});
});
window.addEventListener('unhandledrejection', (e) => {
log('frontend', { type: 'unhandledrejection', reason: String(e.reason) });
});
Особенности логирования из JavaScript
- 01
CORS настроен
Домен приложения из CORS_ORIGIN получает доступ к API Logger, поэтому браузерные запросы проходят без прокси.
- 02
Не блокируйте UI
Отправляйте логи без await там, где задержка критична: доставка важна, но не должна ждать пользователя.
- 03
Не логируйте секреты
Consumer Key виден во фронтенде — не передавайте в логах пароли, токены и персональные данные.
Частые вопросы
Можно ли отправлять логи из браузера напрямую?
Да, если домен разрешён в CORS_ORIGIN. Запросы идут напрямую на /sendmess и не требуют промежуточного бэкенда.
Не замедлит ли это сайт?
Сам запрос асинхронный и выполняется в фоне. Для критичных мест не используйте await и не ставьте логирование в цепочку загрузки страницы.
Логи из браузера где-то хранятся?
Сервер Logger не ведёт архив — он доставляет сообщение подключённому клиенту. Держите клиент открытым, чтобы видеть события.
Отправка логов из других языков
Поймайте следующее событие.
Откройте клиент, получите Consumer Key и отправьте первый лог из JavaScript.