Когда вы запускаете 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 правильным адресом электронной почты.
Поэтому всегда заботьтесь о спам-атаках при размещении электронных писем в общедоступной сети. :)