建议你在阅读前，先读下前面的文章： https://www.v2ex.com/t/927318

前面的文章我们讨论了产品设计的部分，这里说下架构设计。但在此之前，我想讨论用户是如何使用产品的。

产品使用

如何部署

产品应该要一分钟内部署完成。后续运维的成本应极低。

登陆后台

在产品部署完成后，我们会默认注册管理员。

用户可以通过管理员用户进入后台，并配置 SDK

配置 SDK

在后台，用户可复制 SDK 代码并粘贴到前端项目中，在前端项目发布后，SDK 会自主采集错误、性能等日志。用户可以在后台查看数据。

SDK 上报数据

SDK 初始化后，会自行监听事件并上报数据。

每次打开或刷新页面都会产生一条 session ，错误、性能等数据上报会附上当前的 sessionId 。session 会存储页面会话的上下文信息，如设备信息和 ip 等。你也可以向 session 追加你关心的元数据。

你也可以借助 SDK 上报自定义的数据。比如用户的关键路径和关键交互数据。

后台管理

用户分为管理员和普通用户。管理员可以在后台新增、删除用户。

架构设计

目标：易部署、简洁的架构

数据模型

数据库：采用 sqlite ，一个文件存储所有数据，完美符合我们的架构目标。

user 存储 dashboard 的用户的信息，分为两种角色：管理员和普通用户

session ，存储页面会话的上下文信息，如设备信息和 ip 等。以下表都会存储 sessionId

js_error ，js 错误

http_metric ，接口错误的数据

performance_metric ，web-vitals 的性能指标

event ，存储用户的自定义事件

当然，所有表会附上 create_at update_at 等信息。

附上数据库设计：

BEGIN TRANSACTION;
CREATE TABLE IF NOT EXISTS "user" (
	"id"	INTEGER,
	"name"	TEXT NOT NULL UNIQUE,
	"password"	TEXT NOT NULL,
	"role"	INTEGER NOT NULL,
	PRIMARY KEY("id" AUTOINCREMENT)
);
CREATE TABLE IF NOT EXISTS "session" (
	"id"	INTEGER,
	"uuid"	TEXT NOT NULL UNIQUE,
	"ua"	TEXT NOT NULL,
	"language"	TEXT NOT NULL,
	"ip"	TEXT NOT NULL,
	"app_version"	TEXT,
	"meta"	TEXT,
	PRIMARY KEY("id" AUTOINCREMENT)
);
CREATE TABLE IF NOT EXISTS "js_error" (
	"id"	INTEGER,
	"session_id"	INTEGER NOT NULL,
	"error"	TEXT NOT NULL,
	PRIMARY KEY("id" AUTOINCREMENT),
	FOREIGN KEY("session_id") REFERENCES "session"("id")
);
CREATE TABLE IF NOT EXISTS "http_metric" (
	"id"	INTEGER,
	"session_id"	INTEGER NOT NULL,
	"url"	TEXT NOT NULL,
	"method"	TEXT NOT NULL,
	"data"	TEXT,
	"headers"	TEXT NOT NULL,
	"status"	INTEGER NOT NULL,
	"response"	TEXT,
	PRIMARY KEY("id" AUTOINCREMENT),
	FOREIGN KEY("session_id") REFERENCES "session"("id")
);
CREATE TABLE IF NOT EXISTS "event" (
	"id"	INTEGER,
	"session_id"	INTEGER NOT NULL,
	"name"	TEXT NOT NULL,
	"value"	TEXT NOT NULL,
	PRIMARY KEY("id" AUTOINCREMENT),
	FOREIGN KEY("session_id") REFERENCES "session"("id")
);
CREATE TABLE IF NOT EXISTS "performance_metric" (
	"id"	INTEGER,
	"session_id"	INTEGER NOT NULL,
	"name"	TEXT NOT NULL,
	"value"	REAL NOT NULL,
	PRIMARY KEY("id" AUTOINCREMENT),
	FOREIGN KEY("session_id") REFERENCES "session"("id")
);
COMMIT;

框架层

golang + typescript + react ，因为

这是个业余项目，我希望它有一些乐趣。
golang 的零运行时，部署更简单

部署

提供 CLI ，一键启动，暂时不提供 docker 。

可观测的前端应用-架构设计