TrackPoint

中文文档

Project Overview

TrackPoint is a front-end tracking and monitoring project for collecting, reporting, analyzing, and visualizing web application data. It includes a Web SDK, a visualization platform, a backend service, and a React demo application.

The project focuses on common front-end observability scenarios, including user behavior tracking, performance analysis, error monitoring, and tracking data reporting.

Features

• Tracking data reporting: collects client-side tracking data and reports it to the backend service.
• User behavior analysis: tracks manual events, automatic click events, PV/UV data, route changes, and page dwell time.
• Performance analysis: collects and visualizes Web Vitals metrics, including FP, FCP, LCP, and CLS.
• Error monitoring: captures JavaScript errors, unhandled promise rejections, resource loading errors, manual errors, and blank screen events.
• Data visualization: provides dashboards for behavior analytics, performance analytics, and exception analytics.
• Backend storage and statistics: stores tracking data in MySQL and provides APIs for reporting and statistical queries.

Tech Stack

SDK

• TypeScript
• Webpack
• PerformanceObserver
• Navigator.sendBeacon
• LocalStorage
• Browser event listeners

Platform

• React
• TypeScript
• React Router
• Ant Design
• ECharts / echarts-for-react
• Axios / Fetch
• Sass
• dayjs

Server

• Node.js
• Express
• MySQL
• Sequelize
• Jade

Example

• React
• TypeScript
• Webpack

Project Structure

TrackPoint
├── SDK/                  # Web tracking SDK
├── platform/             # Data visualization platform
├── server/               # Backend service and API layer
├── example/react-demo/   # Demo application for SDK integration
├── README.md             # English documentation
└── README-cn.md          # Chinese documentation

Getting Started

SDK

cd SDK
pnpm install
pnpm build

The SDK is built into dist/monitor_sdk.js as a UMD module.

Platform

cd platform
pnpm install
pnpm start

The platform provides dashboards for behavior analysis, performance analysis, and exception analysis.

Server

cd server
npm install
npm start

Before starting the server, configure the database connection and initialize the MySQL schema using the SQL files in server/schema/.

Modules

Web SDK

The SDK provides configurable tracking capabilities through an initialization API. It supports application ID, user ID, report URL, delayed reporting, automatic tracking, route tracking, error monitoring, blank screen detection, PV/UV tracking, and Web Vitals reporting.

Visualization Platform

The platform visualizes tracking data reported by the SDK. It contains three main modules:

• Behavior Analysis: displays user behavior trends and PV/UV statistics within a selected time range.
• Performance Analysis: displays FP, FCP, LCP, and CLS metrics with simplified and detailed chart views.
• Exception Analysis: displays exception records in a table with URL, type, time, message, and alert action.

Backend Service

The backend service receives tracking data, stores it in MySQL, and exposes APIs for behavior statistics, performance data, and error monitoring data.

React Demo

The demo application is used to verify SDK integration and tracking behavior in a React project.