Легкий доступ к журналам ошибок с помощью уже имеющегося у вас инструмента.

Если вы используете Slack в своей компании, скорее всего, у вас есть клиент Slack, работающий на вашем настольном компьютере и телефоне. Если ваши ошибки будут более заметными в канале Slack, их будет легче найти и заметить.

Это решение лучше всего подходит для внутреннего инструмента меньшего размера. Когда решения растут, им требуются более совершенные инструменты для отслеживания ошибок. Но перенос ваших ошибок в Slack - это простой способ начать работу. Если вы не используете Slack, вы можете преобразовать идеи, лежащие в основе этой статьи, в свой инструментарий.

В этой статье я создам красивое сообщение и отправлю его в канал Slack. Я также покажу шаги, необходимые для запуска вашего канала.

Я использую Angular, но с таким же успехом это мог быть обычный JavaScript или любой другой фреймворк.

Пример кода находится на Github.

Что такое Slack?

Название является аббревиатурой от «S Earchable L og of A ll C onversation и K nowledge ».

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

Также существует множество различных приложений и интеграций. Например, вы можете размещать свои сборки в одном канале и развертывать их в другом, отправляя данные в Slack из выбранного вами инструмента.

Или, как говорит Slack: «Где работа»

Зачем использовать Slack для устранения ошибок?

Если ваша компания использует Slack в качестве инструмента коммуникации, имеет смысл интегрировать его с вашими инструментами. Вы можете, например, записывать свои неудачные сборки и развертывать их там. И почему бы тогда не записать туда и свои ошибки?

Поскольку у вас, вероятно, уже открыт Slack на рабочем столе и, возможно, на телефоне, все эти журналы будут более доступны для людей.

Если Slack открыт на всех устройствах, легче заметить, что происходит что-то плохое.

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

Аккаунт Slack

Если вы уже используете Slack, вы можете пропустить эти следующие шаги и сразу перейти к части кодирования.

Чтобы иметь возможность протестировать наш код, нам нужен канал Slack, куда отправлять ошибки.

Следуйте этому 5-ступенчатому рецепту:

  1. Посетите страницу создания рабочего пространства: slack.com/create.
  2. Введите свой адрес электронной почты. Убедитесь, что это почтовый ящик, к которому вы можете получить доступ, чтобы перейти к следующему шагу!
  3. Slack отправит код подтверждения на введенный вами адрес электронной почты. Следите за своим почтовым ящиком, чтобы получить электронное письмо.
  4. Когда придет письмо, введите код подтверждения, чтобы продолжить.
  5. Следуйте инструкциям на каждой странице. У вас будет возможность выбрать отображаемое имя, пароль и название рабочей области.

Для этого примера я создал рабочее пространство Angular Avengers и получил URL-адрес: https://angular-avengers.slack.com/.

Webhook

Прежде чем мы начнем кодировать, нам нужен адрес, по которому мы будем отправлять наши ошибки. Для этого нам понадобится приложение Slack с Webhook. Таким образом мы добавляем инструменты в нашу рабочую область.

Входящие веб-перехватчики - это простой способ публиковать сообщения из приложений в Slack. Создание входящего веб-перехватчика дает вам уникальный URL-адрес, на который вы отправляете полезные данные JSON с текстом сообщения и некоторыми параметрами.

  1. Создайте приложение Slack (если у вас его еще нет).
  2. Включите Входящие веб-перехватчики на странице настроек.
  3. После обновления страницы настроек нажмите Добавить новый веб-перехватчик в рабочую область.
  4. Выберите канал, на котором приложение будет публиковать сообщения, и нажмите Авторизовать.
  5. Используйте свой URL-адрес входящего веб-перехватчика, чтобы отправить сообщение в Slack.

Хорошо, теперь, когда у нас есть вся инфраструктура Slack, мы можем начать кодирование нашего приложения Angular.

Понравился этот пост в блоге? Поделись в Твиттере! 🐦

Приложение

Приложение - это просто кнопка, которая отправляет ошибки в канал Slack.

Не забудьте добавить HttpClientModule в импорт app.module, чтобы иметь возможность использовать HttpClient для публикации ошибок в Slack.

Сервис Slack должен позаботиться о трех вещах, прежде чем он сможет опубликовать ошибки.

  1. Установите веб-перехватчик
  2. Определите сообщение Slack
  3. Установить заголовок типа содержимого

У нас уже есть URL-адрес веб-перехватчика, так что теперь пора его использовать.

const webHook = 'your-webhook-url';

Отправка сообщения

Сообщения - это основной строительный блок всех разговоров в Slack. Минимальное жизнеспособное сообщение состоит из канала и текста.

const message = {
  channel: '#angular',
  text: error.message
}

Нам также необходимо установить заголовок типа содержимого, иначе мы столкнемся с ошибкой CORS. Текст / HTML, который используется по умолчанию, Slack не принимает.

const options = {
  headers: new HttpHeaders(
    { 'Content-Type': 'application/x-www-form-urlencoded' }
  )
};

Теперь у нас есть все три части, и мы готовы размещать их в Slack.

this.http.post(webHook, message, options).subscribe();

Когда мы нажимаем кнопку, в канале Slack появляется ошибка! 🎉

Это здорово, но это сообщение не дает нам достаточно информации. Посмотрим, что мы можем сделать, чтобы его улучшить.

Вложения к сообщениям

Мы можем добавить к сообщению дополнительный контекст, добавив к нему вложение. Я не буду вдаваться в подробности оформления сообщений, но в документации по Slack API есть отличная информация.

attachments: [
  {
    author_name: window.location.href,
    color: 'danger',
    title: 'Trace',
    text: error.stack
  }
]

Теперь сообщение выглядит лучше.

Я думаю, этого было бы достаточно, чтобы мы начали поиск ошибки.

Слишком много ошибок

Что делать, если вы столкнетесь с зацикленной ситуацией, которая бросает в вас ошибки и просто не останавливается. Это очень быстро затопит ваш канал. 😨

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

Безопасность

Вы будете подвергать свою клиентскую сторону Webhook. Кто угодно мог получить его и опубликовать на нем. Поэтому лучшим решением может быть первая отправка ошибок в безопасный API. И если на стороне сервера возникают ошибки, вам следует подумать о том, чтобы не совершать обратный путь, а сразу же отправлять их в Slack.

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

Подсказки

  • Установите правильный заголовок типа содержимого.
  • Исключите заголовок авторизации из вызовов Slack.
  • Сохраняйте конфиденциальность каналов ошибок.
  • Подумайте о безопасности, отправив ошибку на стороне сервера.

Другие варианты использования

Могут быть другие варианты использования, которые лучше подходят, чем ведение журнала ошибок. Например, вы можете отправлять уведомление каждый раз, когда продаете определенный товар в своем интернет-магазине. Или когда используется новая функция. Прокомментируйте, если у вас есть хорошие идеи.

Заключение

Slack - отличный способ легко централизовать ошибки. Если у вас уже есть рабочее пространство компании в Slack, легко начать регистрировать свои ошибки в частных каналах.

Когда ваше приложение разрастется, вы можете подумать о переходе на более продвинутые инструменты отслеживания ошибок, такие как Sentry, TrackJS и т. Д.

Пример кода есть на Github.

Призыв к действию

Мне всегда нравятся отзывы, поэтому, пожалуйста, 👏, 📝 и твитните 🐦.
Следите за мной в Twitter и Medium, чтобы следить за обновлениями блога.