鄂州英文网站建设,wordpress删除无分类文章,做外贸网站用哪些小语种,网站做编辑日志在开发过程中的作用自不必说#xff0c;一旦程序出现问题#xff0c;我们首先想到的是通过日志监控去追查。
好的日志可以通过应用程序执行的历史记录模拟出用户在使用程序的时候操作的完整过程。
想知道发生了什么
为了便于我们分析程序哪里出现问题#xff0c;我们…日志在开发过程中的作用自不必说一旦程序出现问题我们首先想到的是通过日志监控去追查。
好的日志可以通过应用程序执行的历史记录模拟出用户在使用程序的时候操作的完整过程。
想知道发生了什么
为了便于我们分析程序哪里出现问题我们将采用logrock模块并将其链接到ElasticSearchLogStash和Kibana进行进一步分析。
LogRock
logrock模块源于研究Cleverbrush时候的创新。它是一个用于处理矢量图形的软件。使用图形编辑器意味着大量的应用程序用例。为了控制成本不得不优化整个开发测试流程。减少每个环节使用测试用例带来的额外的付出。
该模块可以为您的应用程序组织现代化的日志记录方法。 根据日志我们测试了我们的应用程序。 在本文中我将向您介绍如何组织日志系统以搜索错误。
ElasticStack ElasticSearch是一个功能强大的全文搜索引擎。LogStash是一个用于从各种来源收集日志的系统该系统也可以将日志发送到ElasticSearch。Kibana是ElasticSearch的Web界面版其中包含许多插件。
它是如何工作的 一旦程序出现错误或者用于特殊模拟则应用程序会将日志发送到服务器然后将日志保存到文件中。Logstash将数据增量保存到ElasticSearch数据库。用户登录到Kibana并查看保存的日志。 以上就是一个配置好的Kibana的界面显示了来自ElasticSearch的数据。它可以帮助您分析数据并从中了解程序发生了什么故障。
这里就不一一将如何去设置ElasticStack。
创建日志系统
这里我们将一个日志记录系统集成到基于React开发的单页应用程序中。
Step 1安装
npm install logrock --saveStep 2集成到React应用程序中
import { LoggerContainer } from logrock;LoggerContainerApp /
/LoggerContainerLoggerContainer是一个捕捉应用程序中的错误并将它们形成堆栈的组件。
堆栈是一个对象其中包含有关用户的操作系统浏览器按下的鼠标或键盘按钮的信息当然还有操作相关的子数组其中记录了用户在系统中执行的所有的操作。
LoggerContainer含有配置项可适当考虑更改其中的一些设置。
LoggerContaineractive{true|false}limit{20}onError{stack {sendToServer(stack);}}
App /
/LoggerContaineractive 开启关闭日志功能limit 设置最近用户操作的最大阙值。如果超过这个值那么数组中的第一个值将会被删除。数组中始终保持最近的20个操作信息。onError 当错误出发时的一个回调。返回参数stack对象包含环境用户操作等信息。在回调中我们需要将这些信息上传到ElasticSearch云端或者保存到本地文件中为后面进行数据分析和监控做准备。
打印日志
为了生产高质量的用户操作日志我们将日志代码覆盖到所有需要打印日志的地方
logrock模块附带一个与 LoggerContainer 连接的记录器。
例如我们有以下这样一个组件
import React, { useState } from react;export default function Toggle(props) {const [toggleState, setToggleState] useState(off);function toggle() {setToggleState(toggleState off ? on : off);}return div className{switch ${toggleState}} onClick{toggle} /;
}为了能让日志正确覆盖到我们需要修改toggle方法
import React, { useState } from react;
import logger from logrock;export default function Toggle(props) {const [toggleState, setToggleState] useState(off);function toggle() {let state toggleState off ? on : off;logger.info(React.Toggle|Toggle component changed state ${state});setToggleState(state);}return div className{switch ${toggleState}} onClick{toggle} /;
}我们添加了一个logger方法其中的信息分为两部分。‘React.Toggle’用于显示该动作发生在React的Toggle组件级别。后面是对该动作和发生所在组件的一些描述信息。日志级别划分不是必须的但是这样有助于我们快速定位错误发生的有关代码。
我们还可以使用 React 16 中引入的“componentDidCatch”方法来捕获异常。
日志上传
假设我们有一个从后端收集用户数据的方法。该方法是异步的部分逻辑隐藏在后端中。看看如何将日志添加到代码中
首先由于我们有一个客户端应用程序所有发送到服务器的请求都将在一个用户会话内传递而无需重新加载页面。 为了将客户端上的操作与服务器上的操作相关联我们必须创建一个全局SessionID并将其添加到针对服务器的每个请求头的标记中。 在服务器上我们可以使用任何记录器来记录我们的逻辑如前端示例所示如果发生错误请将带有附加sessionID的数据发送到ElasticSearch发送到后端。
Step 1客户端生成SessionID
window.SESSION_ID sessionid-${Math.random().toString(36).substr(3, 9)};Step 2封装请求
我们需要将SessionID添加到请求头中。如果我们使用以及封装好的请求库很容易将声明好的SessionID添加到所有的请求中。
let fetch axios.create({...});fetch.defaults.headers.common.sessionId window.SESSION_ID;Step 3将SessionID和日志堆栈绑定
LoggerContainer有专门的sessionID字段
LoggerContaineractive{true | false}sessionID{window.SESSION_ID}limit{20}onError{stack {sendToServer(stack);}}
App /
/LoggerContainerStep 4请求后端接口
前端请求类似下面
logger.info(store.getData|User is ready for loading... User ID is ${id});getData(/api/v1/user, { id }).then(userData {logger.info(store.getData|User have already loaded. User count is ${JSON.stringify(userData)});}).catch(err {logger.error(store.getData|User loaded fail ${err.message});});它是怎么运行的呢
我们在客户端请求之前写一个日志。 从我们的代码中我们可以看到现在开始从服务器下载数据。 我们已将SessionID附加到请求。 如果我们的后端日志包含此SessionID的添加而请求失败那么我们可以看到后端发生了什么。
因此我们不仅在客户端而且还在服务器上监视应用程序的整个周期。
用户交互
有些日志对用户是有帮助的。向用户输出必要的信息可以采用 stdout 方法
LoggerContaineractive{true | false}limit{20}bsodActive{true}bsod{BSOD}onError{stack {sendToServer(stack);}}stdout{(level, message, important) {console[level](message);if (important) {alert(message);}}}
App /
/LoggerContainerstdout 方法用于打印提示信息到页面中
我们通过logger传递的第二个参数的值为true来声明这是一个重要的信息需要通过pop-up窗口显示给用户看比如在数据加载的时候失败了我们将输出以下错误信息
logger.log(Something was wrong, true);一些注意项
日志监控包括生产环境因为测试人员永远无法覆盖所有的测试用例完全模拟到用户操作不要忘记在许可协议中提及日志收集。不要在日志中记录用户密码银行详情地址等敏感的个人信息。避免在日志中添加冗余信息尽量保证简洁有用
总结
当我们完成编码对外发布应用程序的时候如果把程序比作一个生命那么这个生命才刚刚开始。收集并监视日志可以获得产品的反馈帮助更好的改善。
欢迎关注公众号“太空编程”带你了解硬核的编程知识
