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');
})
- 写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.还有一些语法写法上的细节,调用时机,封装的函数,检查是否遗漏