V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
luvsic
V2EX  ›  程序员

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

  •  
  •   luvsic · 2023-03-27 21:09:01 +08:00 · 1129 次点击
    这是一个创建于 388 天前的主题,其中的信息可能已经有所发展或是发生改变。

    建议你在阅读前,先读下前面的文章: 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 。

    2 条回复    2023-03-28 12:32:40 +08:00
    mrxiehuang
        1
    mrxiehuang  
       2023-03-28 11:41:41 +08:00
    康康代码?
    luvsic
        2
    luvsic  
    OP
       2023-03-28 12:32:40 +08:00
    @mrxiehuang #1
    昨天刚设计完,还没开始写代码。
    可以关注下 twitter ,代码最终会开源
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5580 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 02:55 · PVG 10:55 · LAX 19:55 · JFK 22:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.