13518219792
这篇文章主要介绍“如何做Flutter高可用SDK”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何做Flutter高可用SDK”文章能帮助大家解决问题。
成都创新互联是一家专注于成都网站设计、网站制作与策划设计,霍尔果斯网站建设哪家好?成都创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:霍尔果斯等地区。霍尔果斯做网站价格咨询:028-86922220
移动端APM其实已经是一个很成熟的命题了，在Native世界这些年的发展中，曾经诞生过很多用于监控线上性能数据的SDK。但是由于Flutter相对于Native做了很多革命性的改变，导致Native的性能监控在Flutter页面上基本全部失效了。基于这个背景，我们在去年启动了名为Flutter高可用SDK的项目，目的是让Flutter页面像Native页面一样可以被度量。
性能监控既然是一个成熟的命题，那么意味着我们有着充足的资源可以借鉴。我们借鉴了包括手淘的EMAS高可用、微信的Martix、美团的Hertz等性能监控SDK，并结合Flutter的实际情况我们确定了两个问题，一个是需要收集什么性能指标，一个是SDK需要有什么特性。
性能指标：
页面滑动流畅度：传统体现滑动流畅度主要是通过Fps，但是Fps有个问题是无法区分大量的轻微卡顿和少量的严重卡顿，但是对于用户来说显然体感差异是很大的，所以我们同时引入了Fps、滑动时长、掉帧时长来进行衡量是否流畅。
页面加载耗时：页面加载耗时我们选了更能反映用户体感的可交互时长，可交互时长是指从用户点击发起路由跳转行为开始，到页面内容加载到可以发生交互结束的这一段时长。
Exception：这个指标应该不需要多做解释。
SDK特性：
准确性：准确性是一个性能监控SDK的基础要求，误报或者错报会导致开发者付出很多不必要的排查时间。
线上监控：线上监控意味着收集数据时付出的代价不能太大，不能让监控影响到App原本的性能。
易于拓展：作为一个开源项目，根本目标是希望大家都能参与进来为社区做贡献，所以SDK本身要易于拓展，同时需要一系列的规范来帮助大家进行开发。
首先需要实现一个FpsRecorder，并继承自BaseRecorder。这个类的目的是为了获取到业务层中页面Pop/Push的时机以及FlutterBinding提供的页面开始渲染，结束渲染，发生点击事件的时机，并通过这些时机来计算出源数据。对于瞬时Fps来说源数据即为每帧时长。
class FpsRecorder extends BaseRecorder {
///...
@override
void onReceivedEvent(BaseEvent event) {
if (event is RouterEvent) {
///...
} else if (event is RenderEvent) {
switch (event.eventType) {
case RenderEventType.beginFrame:
_frameStopwatch.reset();
_frameStopwatch.start();
break;
case RenderEventType.endFrame:
_frameStopwatch.stop();
PerformanceDataCenter().push(FrameData(_frameStopwatch.elapsedMicroseconds));
break;
}
} else if (event is UserInputEvent) {
///...
}
}
@override
List subscribedEventList() {
return [RenderEvent, RouterEvent, UserInputEvent];
}
} 我们在beginFrame时打下开始点，在endFrame时打下结束点，即可得到每帧的时长。可以看到我们收集到了每帧时长后，将其封装为了一个FrameData并push到了PerformanceDataCenter中。PerformanceDataCenter会将该数据分发给订阅了FrameData的Processor中，所以我们需要新建一个FpsProcessor订阅并处理这些源数据。
class FpsProcessor extends BaseProcessor {
///...
@override
void process(BaseData data) {
if (data is FrameData) {
///...
if (isFinishedWithSample(currentTime)) {
///当时间间隔大于1s，则计算一次FPS
_startSampleTime = currentTime;
collectSample(currentTime);
}
}
}
@override
List subscribedDataList() {
return [FrameData];
}
void collectSample(int finishSampleTime) {
///...
PerformanceDataCenter().push(FpsUploadData(avgFps: fps));
}
///...
} FpsProcessor将获取到的每帧时长收集起来并计算1s内的瞬时Fps值（具体的统计方法可以参考上文提到的前一篇文章的实现，这里不过多的进行描述）。同样的在计算完Fps值后，我们将其封装为了一个FpsUploadData并再一次push到了PerformanceDataCenter中。PerformanceDataCenter会将FpsUploadData交给订阅了它的Uploader进行处理，所以我们需要新建一个MyUploader订阅并处理这些数据。
class MyUploader extends BaseUploader {
@override
List subscribedDataList() {
return [
FpsUploadData, //TimeUploadData, ScrollUploadData, ExceptionUploadData,
];
}
@override
void upload(BaseUploadData data) {
if (data is FpsUploadData) {
_sendFPS(data.pageInfoData.pageName, data.avgFps);
}
///...
}
} Uploader可以通过subscribedDataList()选择需要订阅的UploadData，并通过upload()接收notify并进行上报。理论上一个Uploader对应一个上传渠道，使用者可以按需实现如LocalLogUploader、NetworkUploader等将数据上报到不同的地方。
SDK总体可以分为4层，并大量的使用了发布-订阅模式利用2个Center进行连接，这种模式的好处在于可以使得层与层之间做到完全的解耦，使得对于数据的处理可以更加灵活多变。
API
这一层中主要是一些对外暴露的接口。比如init()需要使用者在runApp()前进行调用，以及业务层需要调用pushEvent()方法给SDK提供的一些时机。
Recorder
这一层的主要职责是用Evnet所提供的时机进行相应的源数据收集并交给订阅了该数据的Processor进行处理。比如FPS采集中的每帧时长即为源数据。这一层的设计主要是为了使得源数据可以被利用在不同的地方，比如每帧时长除了用于计算FPS，还可以用来计算卡顿秒数。
使用时需要继承BaseRecoder，通过subscribedEventList()选择订阅的Event，在onReceivedEvent()中处理接收到的Event
abstract class BaseRecorder with TimingObserver {
BaseRecorder() {
PerformanceEventCenter().subscribe(this, subscribedEventList());
}
}
mixin TimingObserver {
void onReceivedEvent(BaseEvent event);
List subscribedEventList();
} Processor
这一层主要是将源数据加工为最终可以被上报的数据，并交给订阅了该数据的Uploader进行上报。比如FPS采集中根据收集到的每帧时长进行计算，得到这一段时间内的FPS值。
使用时需要继承BaseProcessor，通过subscribedDataList()选择订阅的Data类型，在process()中对接收到的Data进行处理。
abstract class BaseProcessor{
void process(BaseData data);
List subscribedDataList();
BaseProcessor(){
PerformanceDataCenter().registerProcessor(this, subscribedDataList());
}
} Uploader
这一层主要是由使用者自己去实现，因为每一位使用者希望将数据上报到的地方都不一样，所以SDK内部会提供相应的基类，只需要跟随着基类的规范来写，即可获取到订阅的数据。
使用时需要继承BaseUploader，通过subscribedDataList()选择订阅的Data类型，在upload()中对接收到的UploadData进行处理。
abstract class BaseUploader{
void upload(BaseUploadData data);
List subscribedDataList();
BaseUploader(){
PerformanceDataCenter().registerUploader(this, subscribedDataList());
}
} PerformanceDataCenter
单例，用于接收BaseData（源数据）以及UploadData（加工后的数据），并将这些时机分发给订阅了他们的Processor和Uploader进行处理。
在BaseProcessor和BaseUploader的构造函数中，分别调用了PerformanceDataCenter的register方法进行订阅该操作会把对应的实例存在PerformanceDataCenter的两个Map中，这样的数据结构使得一个DataType可以对应多个订阅者。
