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

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

Обычную электронную почту можно создать с веб-сайта с помощью HTML-тега <a> и атрибута href с определенным синтаксисом mailto.

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

Вот пример ссылки с использованием всех разрешенных параметров:

<a href="mailto:[email protected][email protected]&[email protected]&subject=Some subject&body=Pre-filled body">Send mail!</a>

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

Мне нужно получить дополнительную информацию от пользователя веб-сайта, такую ​​как версия браузера, ОС, ширина экрана и т. д., чтобы получить полное представление об ошибке.

Здесь на помощь приходит JavaScript.

Чтобы получить тело письма с дополнительной информацией, нужно заменить обычное тело, поэтому я использовал onmouseover Событие JavaScript для замены параметра body, но вы можете использовать любые события в зависимости от ваших потребностей. Важно только то, что событие должно быть запущено до того, как ссылка будет нажата.

В моем примере я собираю userAgent информацию, текущий URL и текущую ширину документа, что важно для поиска ошибок в интерфейсе.

<a
  href="mailto:[email protected]?subject=Bug report&body=JavaScript disabled"
  onmouseover="reportBugMouseOver()"
  id="report_bug_link"
>
  Send mail!
</a>
<script>
function reportBugMouseOver() {
  const button = document.getElementById('report_bug_link');
  const newBody = `
Please, write additional information here.%0D%0A
%0D%0A
----- Some text, that asks not to remove the text below. -----%0D%0A
UserAgent: ${navigator.userAgent} %0D%0A
Window width: ${window.innerWidth} %0D%0A
URL: ${document.URL}
`;
  button.setAttribute('href', `mailto:[email protected]?subject=Bug report&body=${newBody}`);
}
</script>

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

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

Спасибо за чтение, и я надеюсь, что эта статья поможет кому-то улучшить качество проекта!

Обновление от 15.04.2020:

Через некоторое время использования этого решения я обнаружил одну неприятность, неожиданную для меня, но, думаю, очевидную: краулеры, которые ищут письма для спама, нашли наше письмо. Эта ситуация вызвала массовую спам-атаку на нашу электронную почту.

Решение здесь довольно простое. Я использовал Невидимую Google ReCaptcha с обратным вызовом, который заменяет свойство mailto правильным адресом электронной почты.

Поэтому всегда заботьтесь о спам-атаках при размещении электронных писем в общедоступной сети. :)