Как настроить автоматическое уведомление в Slack при возникновении ошибки TypeError в логах фронтенд-приложения на JavaScript?

Автоматические уведомления в Slack при возникновении ошибки TypeError в логах фронтенд-приложения на JavaScript можно настроить несколькими способами. Рассмотрим наиболее практичный подход с использованием Slack Incoming Webhooks и глобального перехватчика ошибок.

**Шаг 1: Создание Incoming Webhook в Slack**

1. Перейдите на https://api.slack.com/apps и создайте новое приложение.
2. В разделе «Incoming Webhooks» активируйте функцию и добавьте новый вебхук для нужного канала.
3. Скопируйте URL вебхука вида: `https://hooks.slack.com/services/XXX/YYY/ZZZ`.

**Шаг 2: Глобальный перехват ошибок в JavaScript**

Используйте обработчик `window.onerror` или `window.addEventListener(‘error’, …)` для перехвата необработанных ошибок:

javascript
const SLACK_WEBHOOK_URL = ‘https://hooks.slack.com/services/XXX/YYY/ZZZ’;

window.addEventListener(‘error’, (event) => {
const error = event.error;
if (error instanceof TypeError) {
sendSlackNotification({
message: error.message,
stack: error.stack,
url: window.location.href,
userAgent: navigator.userAgent,
});
}
});

async function sendSlackNotification({ message, stack, url, userAgent }) {
const payload = {
text: `🚨 *TypeError обнаружен в приложении!*`,
attachments: [
{
color: ‘#FF0000’,
fields: [
{ title: ‘Сообщение’, value: message, short: false },
{ title: ‘URL’, value: url, short: false },
{ title: ‘Stack Trace’, value: ««${stack}««, short: false },
{ title: ‘User Agent’, value: userAgent, short: false },
],
ts: Math.floor(Date.now() / 1000),
},
],
};

await fetch(SLACK_WEBHOOK_URL, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify(payload),
});
}

**Шаг 3: Перехват ошибок в промисах**

Для асинхронных ошибок добавьте:

javascript
window.addEventListener(‘unhandledrejection’, (event) => {
if (event.reason instanceof TypeError) {
sendSlackNotification({
message: event.reason.message,
stack: event.reason.stack,
url: window.location.href,
userAgent: navigator.userAgent,
});
}
});

**Шаг 4: Дедупликация и rate limiting**

Чтобы не спамить канал, добавьте кэш уже отправленных ошибок:

javascript
const sentErrors = new Set();

function shouldSend(message) {
if (sentErrors.has(message)) return false;
sentErrors.add(message);
setTimeout(() => sentErrors.delete(message), 60000); // сброс через минуту
return true;
}

**Альтернативные решения**

— **Sentry + Slack-интеграция**: Sentry автоматически отправляет уведомления в Slack при настройке алертов по типу ошибки.
— **LogRocket, Datadog RUM**: имеют встроенные интеграции со Slack.
— **Серверная агрегация логов**: отправлять ошибки на бэкенд, а оттуда — в Slack через Slack API с более гибкой логикой.

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