监控平台之nodejs模拟后端接口

github:可以下载进行实验

https://github.com/Mr-Shi-root/sdk-platform/tree/master

1.配置node环境,安装express cors body-parser babel/cors

  • body-parser - node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据。
  • cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。
  • multer - node.js 中间件,用于处理 enctype="multipart/form-data"(设置表单的MIME编码)的表单数据。
  • CORS (Cross-Origin Resource Sharing) 是一种允许服务器控制允许跨源请求的机制。它帮助解决 Web 浏览器的同源策略问题,使得前端应用可以安全地从不同的源(例如不同的域名、协议或端口)请求资源。

2.创建server.js,写服务,并且启动

node server.js

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();

// Cors配置
// const corsOptions = {
//     origin: 'http://example.com', // 允许来自 http://example.com 的请求
//     methods: ['GET', 'POST'], // 只允许 GET 和 POST 请求
//     allowedHeaders: ['Content-Type', 'Authorization'] // 允许的请求头
// };
// app.use(cors(corsOptions));

//  Express 应用中的一个中间件函数,负责将请求中的各种类型数据解析为 JavaScript 对象,方便在路由处理函数中访问。
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(bodyParser.text());

// reportData接口,上报后进行请求,后续可用java数据库进行请求存储
app.post('/reportData', (req, res) => {
    console.log('server-reportData', req.body);
    res.status(200).send('success');
})

app.listen(3000, () => {
    console.log('server start at 3000');
}) 
  1. 写demo.html, mock一些图片,promise,js的错误,用于测试错误上报

4.引入WebEyeSDK包,初始化(init)上报接口,获取请求的上报数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入sdk包 -->
    <script src="../../dist/webEyeSDK.js"></script>
    <script>
        WebEyeSDK.init({
            url: 'http://127.0.0.1:3000/reportData'
        })
    </script>
</head>
<body>
    <!-- 图片加载错误 -->
    <img src="http://toutiao.com/x.png" alt="">
    <img src="http://toutiao.com/x2.png" alt="">
    <img src="http://toutiao.com/x3.png" alt="">
    <img src="http://toutiao.com/x4.png" alt="">
    <script>
        // promise抛出的error
        function test() {
            return Promise.reject(Error("promise"))
        }
        function test2() {
            return Promise.reject(Error("async"))
        }
        test()
        test2()
        // 普通js抛出的error
        throw Error("test")
    </script>
</body>
</html>

5.config.js中满5上报,node服务上报后,打印请求体

到此为止,整个流程的雏形已经跑通,

期间发现了一个面试知识点

Q:是怎么解决频繁上报的?

A:批量上报,巴拉巴拉(前面说过)

Q:那么最后一次数组里的数据,怎么办?

分析:这里对于真正做过监控的人来说,会回答直接忽略掉,不上报,不统计,因为上报丢失很正常,不可能一条不差,而且对于大数据量的上报来说,这些是不会影响全局的数据准确性的,如果在面试中针对这个去说解决方法,会有点本末倒置,注意!

期间遇到了很多小问题,这里简单说下,后续开发注意

(改死我了)

1.重写方法一定用call传当前作用域 eg:handler.call(this, err, vm, info);

2.注意三种上报方法的顺序,

3.了解一下window.fetch

4.还有一些语法写法上的细节,调用时机,封装的函数,检查是否遗漏

相关推荐
我要洋人死14 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人26 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人26 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR32 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香34 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969337 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai42 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#