# 介绍

# 1. 背景

开发这个组件的初衷是为了满足各大游戏快速接入页面上报需求。但后来发现不仅在咱们技术中心,几乎所有的前端团队都有快速简单接入上报的隐性需求。前端同学开发一个项目,往往需要花费大量的时间接入和维护各式各样的上报,简直苦不堪言。

在咱们公司内部,不仅需要上报的平台居多,需要上报的需求、接口、时机、参数逻辑也是五花八门:像运营数据上报,用户行为上报,页面性能上报,页面异常监控等等,各式各样。此外,各个上报还要分别进行处理:点击时间绑定、曝光区域判断、路由注入、dom 对象绑定、参数格式过滤等;逻辑数不胜数,烦不胜烦。

但实际上我对各个上报平台规则进行了解发现,许多上报准备工作和上报逻辑都可以进行合理的封装,而许多上报工作都可以通过巧妙的逻辑自动完成。开发人员只需要在具体的位置添加一个简单的数据埋点即可。

于是我想,如果能构建一个集成化的上报工具,咱们开发接入上报的效率将会获得巨大的提升。

于是构造一个集成化的上报工具的想法应运而生。

# 2. 组件的诞生

一个组件的诞生要吸收天地日月之精华,这个组件也不例外。

组件的接口设计、模块设计、构建设计和逻辑实现和技术中心成员进行过大量讨论。

并且借鉴了许多行业内优秀的组件化方案,最终构造出了一个高可用、灵活的、可扩展性强的集成上报组件——SlugReport

# 3. 组件简介

SlugReport 是一款前端集成上报的杀器级组件,它里面集成了众多业务必须及常用的数据上报接口与功能,目前已支持 IEG 常用的 5 大数据平台:

# Mosso / Tcss

image image

# Dmp - 营销数据系统

image

# emonitor - 啄木鸟数据监控告警

image

# sentry - js 脚本错误上报

image

# habo - 哈勃性能监控

image

后续将会接入更多有用的上报平台,也欢迎有兴趣的同学加入模块化开发和维护,共同建设开源上报组件。

# 4. 特性

SlugReport 的开发模式是代码未动,文档先行。在开发之前我们就已经定好原则,要求组件必须满足以下三个特性:

# 简单易用

# 自动上报

# 按需加载