Когда и как использовать navigator.sendBeacon?
#web_api

Сегодня обсудим Web API navigator.sendBeacon. Beacon API используется для отправки асинхронного и неблокирующего запроса на веб-сервер. Запрос не ожидает ответа. В отличие от XMLHttpRequest или Fetch-based запросов, браузер гарантирует отправку запрос до закрытия страницы или перехода на другую. Поэтому данный API рекомендованный способ для отправки аналитических данных. Его синтаксис:
navigator.sendBeacon(url);
navigator.sendBeacon(url, data);
На данный url будет отправлен POST запрос. Его Content-Type будет зависит от аргумента data. По умолчанию это 'text/plain; charset=UTF-8'. Чтобы #nodejs код мог работать с таким типом контента необходимо включить соотвествующий парсер. В express это app.use(bodyParser.text());. Данные необходимо будет десерилизовать из текста.

Чтобы работать с application/json, клиент должен использовать такой код:
const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
navigator.sendBeacon(url, blob);
Тогда на сервере мы сразу получаем JSON, с которым удобно работать.

Используйте данное API для построение своей системы аналитики.

Ссылки:
🔗 MDN
🔗 Can I use

Как отследить работу Garbage Collector?
#web_api #nodejs_api

Плохая организация JavaScript кода может привести к утечке памяти. Для отслеживания утечки ресурсов в ES2021 появился FinalizationRegistry. Так можно вызвать callback после отработки Garbage Collector по указанному ресурсу:
const registry = new FinalizationRegistry((startTime) => {
const delay = ((Date.now() - startTime) / 1000).toFixed(1);
console.log(`foo was garbage collected after ${delay}s`);
});
let foo = {};
registry.register(foo, Date.now());
foo = undefined; // Clear strong reference

⚠️Пример максимально упрощен. При запуске без массового создания новых объектов ждать сборки мусора придется долго.

Авторы не рекомендует использовать для построение бизнес логики, реализация сборки мусора, зависит от реализации любого конкретного движка JavaScript.

Работает в #nodejs 14.6.0 и новее. Для работы в TypeScript необходимо включить es2021.weakref.

Ссылки:
🔗 пример для запуска в браузере
🔗 MDN
🔗 TC39
🔗 Can I use