Фронтенд-мониторинг

Мониторинг фронтенда: играючи после работы. На данный момент добавлены мониторинг состояния памяти, асинхронных запросов, статических ресурсов, загрузки, выполнения и системных аномалий. Тестируются только axios, jQuery Ajax(), собственные fetch и XHR, тестирование остальных асинхронных запросов пока не проводилось. На данный момент добавлен только простой сервер и визуализация интерфейса [в конце документа есть скриншот интерфейса].

Среда

компьютер
node
terminal | cmd
редактор
MongoDB

Клонируйте код на локальный компьютер.
Запустите серверный код nmps-server.

Доступ к http://localhost:3000 откроет основной интерфейс.

Откройте nmps-tools и запустите index.html.

Этот файл используется для отправки отчётов об аномалиях.

Структура папок

nmps-client

Простой веб-интерфейс, написанный на Vue.

nmps-client

Простой сервер, написанный с использованием node и koa.

nmps-tools

Инструменты, написанные с помощью webpack, для мониторинга аномалий, статической загрузки ресурсов, информации о памяти, XHR-аномалий и выполнения, а также для сбора данных. Фокус: мониторинг аномалий, отправка отчётов и т. д. — всё это происходит в этой папке. В подпапке dist находятся файлы, упакованные с помощью webpack. Оптимальное место для включения этого файла — перед всеми статическими ресурсами, как показано ниже (если он включён после статических ресурсов или до закрытия тега body, некоторые аномалии могут быть пропущены).

<!DOCTYPE html>
<html lang="zh-CN-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Фронтенд-мониторинг</title>
    <script type="text/javascript" src="un-watch.min.js"></script>
    <script>
        unWatch.init({
            time: 10000,
            callback: (data) => {
                // Функция обратного вызова, которая выполняет отправку отчётов об аномалиях
                new Image().src = 'http://localhost:3000/report?' + JSON.stringify(data);
            }
        });
    </script>
    <!-- Отсутствует этот файл — тестирование отправки отчётов -->
    <link rel="stylesheet" href="./style.css">
    <!-- Только для тестирования — добавление S -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css">
    <!-- Только для тестирования — добавление E -->
    <link rel="shortcut icon" href="favicon.ico">
</head>

<body>
    <h1>SayHi()</h1>
    <!-- Только для тестирования — добавление S -->
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://unpkg.com/axios@0.19.0/dist/axios.min.js"></script>
    <!-- Только для тестирования — добавление E -->
    <!-- Не существует этого изображения — только для тестирования мониторинга аномалий -->
    <img src="./example.png" alt="">
    <!-- Не существует этого файла — только для тестирования мониторинга аномалий -->
    <script src="./example.js"></script>
    <script>
        // Тестирование
        setTimeout(() => {
            let el = document.createElement('img');
            // Не существует этого изображения — только для тестирования мониторинга аномалий
            el.setAttribute('src', './example.png');
            document.body.append(el);
            // Не существует этого интерфейса — только для тестирования мониторинга аномалий
            axios.get('http://localhost:3000/test').then(res => {
                console.log(res)
            })
        }, 5000)
        // Тестирование отправки отчётов о выполнении
        console.log(test)
    </script>
</body>
</html>