用户情景重现系统的构建思路

项目上线之后，自然会有用户在使用过程中，发现这样或者那样的问题。此时我们需要尽快的定位问题所在，为此可能需要客服、前端、后端、产品等多个团队的同事一起重现和排查，响应速度难免不够理想（特别是非工作时间），那有什么办法可以提高排查速度，尽量减少不必要的人参与呢？这就是我想要构建用户情景重现系统的初衷。

Web前端应用的组成要素

开始之前，先看一下，Web前端应用是有3个要素组成：

• 逻辑
• 数据
• 交互

逻辑

就是我们的Web前端代码三剑客——HTML、CSS、JS，以及其他的静态资源，例如图片、字体、媒体等。

数据

顾名思义，就是服务器返回的数据。

交互

用户在浏览器进行的交互，诸如鼠标的点击、滚动，键盘的输入等。

生命周期

这三者构成了一个Web前端应用的生命周期，

1. 浏览器加载代码逻辑
2. 代码逻辑请求获取服务器数据，再根据代码逻辑把相关内容呈现
3. 用户交互触发
4. 代码逻辑运行，改变展示内容或触发第1、2步