古茗是如何做前端数据中心的
简介
古茗的前端数据中心包含了前端监控、性能、日志、埋点等能力，还支持错误分析、埋点分析报表等功能 不仅支持小程序、web 还支持客户端 flutter、服务端 nodejs 等。由于我们有不少的 nodejs 应用，所以 nodejs 的监控也是必不可少的。
功能设计
在功能设计上分为了 8 个大模块，包含了前端所有需要的数据，故命名为大前端数据中心。
架构设计
由于平台设计包含了大量数据上报/分析的能力，所以架构设计上需要满足以下一些要求：
实时性：异常发现、异常告警需要较高的实时性 高可用：服务集群需要具有较高的可靠性，具备快速恢复、容灾等能力 稳定性：具备一定弹性、有处理高并发、高峰值、流量波动的能力 高吞吐：服务有接收大量数据日志和埋点数据，需要具备大量吞吐能力 客户端容错：服务故障/SDK 报错，不应该影响业务正常运行
所以我们初版架构设计如下：
客户端
客户端 SDK 中，我们设计了部分资源采样能力，这是因为我们监控了资源加载、请求、性能等数据，对于正常的数据，例如正常请求、正常加载的资源、正常性能数据，我们可以配置开启采样来减少服务端压力、当然也可以根据业务需求开启全量上报。
另外我们还支持了配置下发能力，例如采样率，上报开关、上报队列、上报通道等等。
数据网关
在数据网关中，我们也支持采样（服务端采样），用户可以选择其中之一开启，与客户端采样的区别是服务端采样更加精确和实时。
数据分流
我们将数据分流为3个通道，大数据通道、持久化通道和实时计算通道，用于满足不同的业务需求：
大数据通道：用于埋点业务分析、商业分析等 实时计算通道：用于实时计算指标，例如产品创建的分析图表、平台内置的指标等等 持久化通道：用于将数据写入 ES 集群，便于后置的查询和分析原始数据
埋点分析
对于错误和性能等等常规监控，大家一般都大同小异，这里介绍一下我们是如何做埋点分析的。
对于上报的埋点数据，不管是无痕埋点还是手动埋点，我们要分析就需要去查看各种图表，所以我们设计了自定义图表创建功能，可以让产品主动创建分析图表，要达到这个目的我们就需要走一个埋点的流程。
在这之前我们的流程是这样的：产品需要先和开发者提出埋点的需求，等埋点上线后，再和大数据提出数据分析的需求，最后才能根据需求定制图表。
但是在数据平台上我们就变成了这样：产品自助创建埋点需求（直接创建点位指定给对应开发者），然后产品可以同时根据点位创建图表，上线后就可以直接查看图表了。
那么，在技术上我们做了哪些能力来支持这个功能呢：
预解析：我们对每个图都做了实时计算指标，可以做到创建后即可以查看，因为是计算好的指标，出图速度可以达到几十毫秒左右（直接查询 influxdb） 历史数据分析：对于没有事先计算好指标的历史数据，我们也提供了速度较慢的实时分析能力（查询ES） 另外，对于 web 端，我们支持了点位管理、事件管理、属性管理等等能力
日志查询
在 SDK 侧我们可以通过调用 logger API 来上报数据，SDK 会自动采集上下文和环境信息并且还可以关联用户埋点数据：
logger().debug(`xxxxx`)
logger().warn(`xxxxx`)
logger().error(`xxxxx`)
logger().info(`xxxxx`)
在平台侧我们就可以通过事件、环境信息、用户信息、日志内容等等维度来搜索日志，还可以直接指定设备来实时输出日志（规划中）。
数据串联
我们对所有数据都进行了关联，例如查询日志的时候可以通过 userId/traceid 等标记信息来串联日志、请求、埋点、错误等等。
所以不管是发现了日志不对、代码错误、请求错误等信息，我们就可以将所有链路串联起来排查问题。
Nodejs
Nodejs 模块是一个相对独立的模块，我们的 SDK 也是直接整合在框架内部，由于 nodejs 是服务端应用，所以我们针对 nodejs 做了很多单独的模块，例如 cpu 分析、GC 监控分析、服务数据监控等等。
CPU分析
主要是用包 GitHub - davidmarkclements/0x: 🔥 single-command flamegraph profiling 🔥 来进行 cpu 火焰图分析，cpu 数据使用 c++ 编写的扩展（调用 v8 api）来实现，直接使用 node node_modules/0x/cmd.js --visualize-cpu-profile 命令来生成图表（需要收集的 cpu 数据符合 0x 的格式）。
收集流程如下：
// v8::CpuProfiler 实例
static CpuProfiler *current_cpuprofiler = CpuProfiler::New(Isolate::GetCurrent());
// 启动 v8 cpu profiling
void StartCpuProfiling(const FunctionCallbackInfo<Value> &info) {
HandleScope scope;
Local<String> profilerTitle = New<String>("cpu_profiler").ToLocalChecked();
current_cpuprofiler->StartProfiling(profilerTitle, true);
}
// 停止 v8 cpu profiling
void StopCpuProfiling(const FunctionCallbackInfo<Value> &info) {
HandleScope scope;
const CpuProfile *profile = current_cpuprofiler->StopProfiling(profilerTitle);
/// - 后续对 profile 数据进行解析写入等等操作
}
GC 分析
GC 数据也是使用 c++ 编写的扩展（调用 v8 api）来实现：
NAN_GC_CALLBACK(GCTracerPrologueCallback) {
/// - 记录GC
}
NAN_GC_CALLBACK(GCTracerEpilogueCallback) {
/// - 记录GC
}
void StartGC(const FunctionCallbackInfo<Value> &info) {
/// - 做一些初始化操作
/// - 例如判断文件在不在什么的
InitGcStatusHooks(); /// - 初始化
AddGCPrologueCallback(GCPrologueCallback);
AddGCEpilogueCallback(GCEpilogueCallback);
}
void StopGC(const FunctionCallbackInfo<Value> &info) {
RemoveGCPrologueCallback(GCPrologueCallback);
RemoveGCEpilogueCallback(GCEpilogueCallback);
RemoveGcStatusHooks();
/// - 做一些收尾操作
/// - 比如重置数据之类的
}
和 cpu 数据一样，收集完成后上传到 oss 保存，然后解析数据进行图表等等分析。
结尾
古茗大前端数据平台才刚上线不久，已经扮演了不可或缺的角色，但是还需要不断打磨，希望后续可以在业务治理当中发挥重要的作用，由于平台功能繁多，架构复杂，这篇文章也是做一个简简单单的介绍，如果有什么问题欢迎大家提问和讨论。
最后
📚 小茗文章推荐：
关注公众号「Goodme前端团队」，获取更多干货实践，欢迎交流分享~