日志在开发过程中的作用自不必说，一旦程序出现问题，我们首先想到的是通过日志监控去追查。
好的日志可以通过应用程序执行的历史记录模拟出用户在使用程序的时候操作的完整过程。
想知道发生了什么
为了便于我们分析程序哪里出现问题，我们将采用logrock模块并将其连接到ElasticSearch，LogStash和Kibana进行进一步分析。
LogRock
logrock模块源于研究Cleverbrush时候的创新。它是一个用于处理矢量图形的软件。使用图形编辑器意味着大量的应用程序用例。为了控制成本，不得不优化整个开发测试流程。减少每个环节使用测试用例带来的额外的付出。
该模块可以为您的应用程序组织现代化的日志记录方法。根据日志，我们测试了我们的应用程序。在本文中，我将向您介绍如何组织日志系统以搜索错误。
ElasticStack
ElasticSearch是一个功能强大的全文搜索引擎。
LogStash是一个用于从各种来源收集日志的系统，该系统也可以将日志发送到ElasticSearch。
Kibana是ElasticSearch的Web界面版，其中包含许多插件。
它是如何工作的
一旦程序出现错误（或者用于特殊模拟），则应用程序会将日志发送到服务器，然后将日志保存到文件中。Logstash将数据增量保存到ElasticSearch数据库。用户登录到Kibana并查看保存的日志。
以上就是一个配置好的Kibana的界面，显示了来自ElasticSearch的数据。它可以帮助您分析数据并从中了解程序发生了什么故障。
这里就不一一将如何去设置ElasticStack。
创建日志系统
这里我们将一个日志记录系统集成到基于React开发的单页应用程序中。
Step1：安装
npminstalllogrock--save
Step2：集成到React应用程序中
import{LoggerContainer}from"logrock";LoggerContainerApp//LoggerContainer
LoggerContainer是一个捕捉应用程序中的错误并将它们形成堆栈的组件。
堆栈是一个对象，其中包含有关用户的操作系统，浏览器，按下的鼠标或键盘按钮的信息，当然还有操作相关的子数组，其中记录了用户在系统中执行的所有的操作。
含有配置项，可适当考虑更改其中的一些设置。
LoggerContaineractive={true
false}limit={20}onError={stack={sendToServer(stack);}}App//LoggerContainer
active开启关闭日志功能
limit设置最近用户操作的最大阙值。如果超过这个值，那么数组中的第一个值将会被删除。数组中始终保持最近的20个操作信息。
onError当错误出发时的一个回调。返回参数stack对象包含环境，用户操作等信息。在回调中我们需要将这些信息上传到ElasticSearch，云端，或者保存到本地文件中，为后面进行数据分析和监控做准备。
打印日志
为了生产高质量的用户操作日志，我们将日志代码覆盖到所有需要打印日志的地方
模块附带一个与连接的记录器。
例如，我们有以下这样一个组件：
importReact,{useState}from"react";exportdefaultfunctionToggle(props){const[toggleState,setToggleState]=useState("off");functiontoggle(){setToggleState(toggleState===?"on":);}returndivclassName={`switch${toggleState}`}onClick={toggle}/;}
为了能让日志正确覆盖到，我们需要修改toggle方法：
importReact,{useState}from;importloggerfrom;exportdefaultfunctionToggle(props){const[toggleState,setToggleState]=useState();functiontoggle(){letstate=toggleState===?:;logger.info(`React.Toggle
Toggle