我的第一个全栈项目！！！

前言

距离上次写博客已经过去一段时间了，一直没找到合适的主题。这次借着字节跳动青训营的机会，我开始了一个新的项目——TrackPoint，并决定记录下整个开发过程。

背景

在寒假前，我报名参加了字节跳动青训营，希望能通过这个机会完成一个有实际意义的项目。青训营大项目公布后，我选择了 TrackPoint 作为我的项目。项目地址：MeowTrackPoint。

最初，我对“埋点 SDK”这个概念还不太清楚，以为它是某个现成的第三方库，结果发现这个 SDK 其实是需要自己开发的，并且还需要配套后端服务进行数据存储和管理，为埋点管理面板提供数据分析和可视化展示。

项目架构设计

在确定需求后，我对 TrackPoint 进行了架构设计，项目主要分为三个部分：

前端 SDK（埋点库）：负责埋点数据的采集、批量上报等核心逻辑。
后端服务：使用 Express 搭建，负责存储和管理埋点数据。
埋点管理面板：基于 React + TypeScript 开发，结合 ECharts 进行数据可视化。

1. 前端 SDK

埋点 SDK 需要解决以下问题：

用户行为采集：监听用户的点击、页面访问、输入等行为。
性能监控：监控用户从在开始访问这个网页到真正看到网页内容时的时间
数据上报：支持 批量上报 机制，提高效率并减少服务器压力。
错误监控：捕获JS 异常，包括 async 函数抛出的错误、被拒绝的 Promise 以及资源加载失败的错误，并将这些错误记录在埋点数据中

2. 后端服务

后端采用 Express + MySQL，主要功能包括：

接收埋点数据并存储到数据库。

提供 API，供前端管理面板获取数据。

import express from 'express';
import baseInfo from "./API/baseInfo";
import demo from "./API/demo";
import timing from "./API/timing";
import error from './API/error'

const app = express();

app.use(express.json());  // 解析 JSON 请求体
app.use(express.urlencoded({ extended: true }));  // 解析 URL-encoded 请求体

//Router引入
app.use('/baseInfo', baseInfo);
app.use('/demo', demo);
app.use("/timing", timing);
app.use('/error', error);
app.use('/check', check);

app.get('/', (req, res) => {
  res.send('Welcome to Meow Backend !✨');
});

//监听端口
const port = 5927
export const server = app.listen(port, () => {
  console.log(Server is running at http://localhost:${port});
});