当前位置：首页 > article >正文

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

article 2024/12/21 22:33:01

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');
})

3. 写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服务上报后，打印请求体