Регистрация сетевых ошибок?
Если вы никогда раньше не слышали о регистрации сетевых ошибок (NEL) и работаете в Интернете, вы можете быть очень взволнованы, как и я, когда прочитал спецификацию О предоставляемых им возможностях. Мы не будем вдаваться в введение в эту спецификацию (в этой статье), а лишь несколько слов, чтобы подогреть ваш аппетит.
Если вам интересна тема и вы хотите следить за ней вместе с тем сначала ознакомьтесь со спецификацией или вводными статьями.
NEL позволяет операторам веб-служб видеть проблемы, связанные с надежностью сети, с которыми сталкиваются пользователи этих служб.
На мой взгляд, самая захватывающая часть NEL - это часть «пользователи».
Место, где отчеты хранятся и передаются в вашу службу сбора данных NEL, - это клиентский браузер.
Говоря более системным языком, агент NEL - это браузер пользователя. Это делает отчеты NEL достоверной информацией о том, влияют ли проблемы на ваших пользователей в любой момент сетевого взаимодействия HTTP-запроса.
Потрясающая возможность, не требующая специального оборудования, специализированной инфраструктуры или новых инструментов для начала работы.
Возможность отслеживать «отказ»
За исключением всех ошибок TCP, DNS, TLS и HTTP, о которых сообщает NEL, вот уже более года тип ошибки «прекращение» доступен для Chromium. браузеры.
«отказ», , еще недостаточно хорошо описанный в официальной документации, закрывает значительное слепое пятно, которое, если я могу говорить с точки зрения маркетинга, находится на нижнем уровне воронки конверсии возможно в отношении пользователя, достигшего нашего продукта.
Тип ошибки «отказ» генерируется, когда пользователь закрывает страницу и выполняются следующие требования:
- В ответе сервера принимаются правильные, а не ошибочные (400–500) или перенаправленные заголовки.
- Браузеру не удалось полностью прочитать тело ответа с сервера.
Простым английским языком:
Для запроса ресурса возьмем в качестве примера основной документ, который, вероятно, является наиболее важным, этот отчет об ошибках охватывает случаи, когда вся сетевая инфраструктура выполнила свою работу, но теперь это связано с сервером или CDN. обслуживание запроса выполняется медленно, пользователь ушел.
Эту медлительность в большинстве случаев можно отнести к следующим причинам:
1. Медленное время до первого байта (ttfb)
2. Время для генерации и передачи полного ответа тела. На ум приходит рендеринг на стороне сервера, медленные запросы к базе данных.
Важность
Это место чрезвычайно важно для веб-инженеров, аналитиков поведения пользователей и инженеров по веб-производительности, если не сказать нескольких.
- На стороне клиента аналитика не работает, так как весь текст ответа еще не полностью передан, не говоря уже о запущенных сценариях аналитики.
- Журналы сервера, в зависимости от вашей инфраструктуры, в худшем случае содержат код состояния 200 или вообще ничего . Когда CDN обслуживает ваши страницы, вы обычно даже не имеют доступ к своим журналам.
Распространенные способы мониторинга делают этот диапазон поведения трудно отслеживаемым, но, тем не менее, имеющим решающее значение для получения прибыли .
Теперь, используя тип ошибки NEL брошенный, вы можете узнать об этой проблеме и действовать в зависимости от вашего приложения.
Пример реализации Node.js
Чтобы продемонстрировать, как можно достичь функциональности отчетов NEL, и понять, какие сбои считаются заброшенными, мы собираемся реализовать пример веб-сервера Node.js с помощью пары вспомогательных библиотек и инструментов.
В этом примере мы будем использовать:
- Express.js для фреймворка веб-сервера.
- nodemon, чтобы избежать постоянного перезапуска локального сервера.
- ngrok для легкого доступа к общедоступному защищенному URL. (NEL не работает для незащищенных конечных точек localhost)
Простой веб-сервер
Начнем с создания нашего простого проекта веб-сервера:
$ mkdir nel-abandoned && cd nel-abandoned $ npm init -y $ npm install express $ touch app.js
Откройте app.js в своем любимом текстовом редакторе и добавьте необходимые настройки для запуска экспресс-веб-сервера:
const express = require("express");
const app = express();
const PORT = 3000;
/*
Allow express to parse the special content type
of the NEL report.
*/
app.use(express.json({ type: "application/reports+json" }));
/* Home route just sending nothing back*/
app.get("/", async (req, res) => {
res.end();
});
/*
NEL collector endpoint.
In a real environment, the reporting endpoint would be
in a completely different server IP, domain and CDN.
*/
app.post("/report", (req, res) => {
// Log the reports received on the terminal
console.log(JSON.stringify(req.body));
});
app.listen(PORT, () => {
console.log(`Listening on ${PORT}`);
});
Теперь запустите свой сервер и ngrok на разных терминалах.
$ npx nodemon app.js // On different terminal now $ ngrok http 3000
Чтобы клиенты знали, что вы хотите использовать NEL и отправлять отчеты на конкретную конечную точку, вы хотите отправить клиенту требуемые заголовки Reporting API / NEL.
Для этого мы создадим NelMiddleware, который будет отправлен на каждый запрос заголовки NEL мы определили обратно клиенту.
const NelMiddleware = function (req, res, next) {
res.setHeader(
"Report-To",
JSON.stringify({
group: "network-errors",
// Expire in day
max_age: 86400,
// Here use the secure URL you are gonna get from ngrok
endpoints: [{ url: "NGROK_URL/report" }],
})
);
res.setHeader(
"NEL",
JSON.stringify({
report_to: "network-errors",
// Cache the policy for a day
max_age: 86400,
})
);
next();
};
/* Use the middleware before registering the routes */
app.use(NelMiddleware);
Если все пойдет хорошо, попробовав домашний маршрут вашего приложения и проверив сетевую панель DevTools, вы сможете увидеть заголовки NEL, включенные в запрос документа.
Моделирование и отслеживание ошибки отказа
Чтобы помочь нам в анализе и моделировании нашего эксперимента, мы можем использовать панель отчетов ngrok, открыв http://localhost:4040, где мы получаем бесплатный инспектор трафика запросов. Позже мы сможем проверить отчеты, отправленные в нашу службу агентом NEL.
Чтобы смоделировать случай отказа, как мы описали ранее, вы можете попробовать просто добавить искусственную задержку к домашнему маршруту. Это был бы случай медленного времени до первого байта.
app.get("/", async (req, res) => {
setTimeout(() => res.end(), 10000);
});
Откройте защищенный URL-адрес ngrok на домашнем маршруте и до истечения 10-секундного тайм-аута закройте текущую вкладку. Вы можете сделать это несколько раз, чтобы заполнить больше отчетов.
Через несколько минут вы увидите либо в инспекторе ngrok, либо в регистраторе консоли конечной точки / report, некоторые отчеты, поступающие из браузера с типом ошибки брошен .
Случай неполностью доставленного тела ответа
Второй распространенный случай, который может вызвать отказ, - это когда часть тела ответа запускается медленно, а пользователь покидает страницу до полного завершения.
/* Helper for artificial delay */
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
app.get("/", async (req, res) => {
res.setHeader("Content-Type", "text/html");
await res.write(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
`);
await delay(5000);
res.write(`<p>Hello World</p></body>`);
await delay(5000);
res.write(`</html>`);
res.end();
});
Что делает эта функция, так это то, что она доставляет части ответа HTML в потоке ответа, но не полностью завершает тело после двух вызовов задержки по 5 секунд каждый.
Попытка применить тот же трюк: открыть страницу на пару секунд, а затем закрыть ее, вызовет появление новых отчетов типа отказ.
Вот и все 🎉
Заключительные примечания
Спасибо, что дошли до этой статьи. Здесь я хочу еще раз подчеркнуть, насколько важна эта возможность предложения NEL в моих глазах. Поздравляем команду Google, которая изначально представила эту идею, а также людей из Рабочей группы по веб-производительности за то, что они позаботились об этой спецификации.
Как и во всем в жизни, на данный момент есть некоторые предостережения, о которых вам, возможно, нужно знать. В настоящее время NEL поддерживается только в браузерах на основе Chromium, таких как Chrome, Edge и Opera, но, надеюсь, со временем это будет увеличиваться.
Надеюсь, вы нашли что-то интересное и полезное с помощью этой относительно новой возможности отчетности отказа, и если вам понравилась статья, было бы неплохо попытаться распространить информацию!
Не стесняйтесь обращаться ко мне в любой из моих социальных сетей по любым вопросам 😊
