前端如何进行日志驱动开发

日志在开发过程中的作用自不必说，一旦程序出现问题，我们首先想到的是通过日志监控去追查。

好的日志可以通过应用程序执行的历史记录模拟出用户在使用程序的时候操作的完整过程。

想知道发生了什么

为了便于我们分析程序哪里出现问题，我们将采用logrock模块并将其链接到ElasticSearch，LogStash和Kibana进行进一步分析。

LogRock

logrock模块源于研究Cleverbrush时候的创新。它是一个用于处理矢量图形的软件。使用图形编辑器意味着大量的应用程序用例。为了控制成本，不得不优化整个开发测试流程。减少每个环节使用测试用例带来的额外的付出。

该模块可以为您的应用程序组织现代化的日志记录方法。 根据日志，我们测试了我们的应用程序。 在本文中，我将向您介绍如何组织日志系统以搜索错误。

ElasticStack

  • ElasticSearch是一个功能强大的全文搜索引擎。
  • LogStash是一个用于从各种来源收集日志的系统，该系统也可以将日志发送到ElasticSearch。
  • Kibana是ElasticSearch的Web界面版，其中包含许多插件。

它是如何工作的

一旦程序出现错误（或者用于特殊模拟），则应用程序会将日志发送到服务器，然后将日志保存到文件中。Logstash将数据增量保存到ElasticSearch数据库。用户登录到Kibana并查看保存的日志。

以上就是一个配置好的Kibana的界面，显示了来自ElasticSearch的数据。它可以帮助您分析数据并从中了解程序发生了什么故障。

这里就不一一将如何去设置ElasticStack。

创建日志系统

这里我们将一个日志记录系统集成到基于React开发的单页应用程序中。

Step 1：安装

npm install logrock --save

Step 2：集成到React应用程序中

import { LoggerContainer } from "logrock";<LoggerContainer><App />
</LoggerContainer>

LoggerContainer是一个捕捉应用程序中的错误并将它们形成堆栈的组件。

堆栈是一个对象，其中包含有关用户的操作系统，浏览器，按下的鼠标或键盘按钮的信息，当然还有操作相关的子数组，其中记录了用户在系统中执行的所有的操作。

LoggerContainer含有配置项，可适当考虑更改其中的一些设置。

<LoggerContaineractive={true|false}limit={20}onError={stack => {sendToServer(stack);}}
><App />
</LoggerContainer>
  • active 开启关闭日志功能
  • 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 />
</LoggerContainer>

Step 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 />
</LoggerContainer>
  • stdout 方法用于打印提示信息到页面中

我们通过logger传递的第二个参数的值为true来声明这是一个重要的信息，需要通过pop-up窗口显示给用户看，比如在数据加载的时候失败了，我们将输出以下错误信息：

logger.log('Something was wrong', true);

一些注意项

  • 日志监控（包括生产环境），因为测试人员永远无法覆盖所有的测试用例，完全模拟到用户操作
  • 不要忘记在许可协议中提及日志收集。
  • 不要在日志中记录用户密码，银行详情地址等敏感的个人信息。
  • 避免在日志中添加冗余信息，尽量保证简洁有用

总结

当我们完成编码对外发布应用程序的时候，如果把程序比作一个生命，那么这个生命才刚刚开始。收集并监视日志可以获得产品的反馈帮助更好的改善。

欢迎关注公众号“太空编程”，带你了解硬核的编程知识

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/354575.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

消息钩子学习工程

消息钩子学习工程

前奏近来一直在自学Windows Hook相关的知识&#xff0c;已经尝试多种注入方式。尤其对消息钩子方式很感兴趣&#xff0c;因为看到Spy能够截获系统中绝大多数应用的消息流&#xff0c;就很想知道它的工作原理&#xff0c;打算制作属于自己的Spy。消息钩子简介&#xff1a;消息钩…
阅读更多...
[Angular] 笔记 8：list/detail 页面以及@Input

[Angular] 笔记 8：list/detail 页面以及@Input

1. list 页面 list/detail 是重要的 UI 设计模式。 vscode terminal 运行如下命令生成 detail 组件&#xff1a; PS D:\Angular\my-app> ng generate component pokemon-base/pokemon-detail --modulepokemon-base/pokemon-base.module.ts CREATE src/app/pokemon-base/p…
阅读更多...
javaone_JavaOne 2012 – 2400小时！ 一些建议

javaone_JavaOne 2012 – 2400小时！ 一些建议

javaone您可能已经看到JavaOne 2012 Content Catalog在线。 计划委员会经过数周的紧张工作&#xff0c;对每个提案进行了分类&#xff0c;审查&#xff0c;评分和讨论&#xff0c;我们终于设法为您设置了&#xff08;希望如此&#xff09;有趣的组合。 整整105天或2400小时&…
阅读更多...
推荐几个最近Star过的Github仓库

推荐几个最近Star过的Github仓库

平时逛Github的时候&#xff0c;总是顺手对一些自己认为好的仓库给个 Star&#xff0c;一是对作者的鼓励&#xff0c;二来推荐给关注自己的人&#xff08;首页动态可见&#xff09;。 下面列举了一些我平时 Star 过的仓库&#xff0c;顺便也推荐给我的读者。 Front-End Checkli…
阅读更多...
使用Gatling + Gradle + Jenkins Pipeline为您的JAX-RS（和JavaEE）应用程序进行连续压力测试...

使用Gatling + Gradle + Jenkins Pipeline为您的JAX-RS（和JavaEE）应用程序进行连续压力测试...

在这篇文章中&#xff0c;我将解释如何使用Gatling项目为您的JAX-RS Java EE端点编写压力测试&#xff0c;以及如何将它们与Gradle和Jenkins Pipeline集成&#xff0c;因此&#xff0c;除了进行简单的压力测试外&#xff0c;您还可以使用以下方法&#xff1a; 连续的压力测试&a…
阅读更多...
使用 VuePress 搭建一个自己的知识文档

使用 VuePress 搭建一个自己的知识文档

最近准备对前端知识做一个梳理&#xff0c;将自己的平时遇到的问题和解决方案形成一个知识文档。本文记录了搭建 VuePress 的主要过程&#xff0c;同时也提供了部分自定义的配置&#xff0c;示例地址&#xff1a;http://doc.i-fanr.com 环境搭建 VuePress 有着比较完善的中文文…
阅读更多...
代码重构学习

代码重构学习

文章&#xff1a;浅谈重构中踩过的坑 文章中有一个很好的&#xff0c;优化if else多分支判断的例子&#xff0c;将方法抽象出来&#xff0c;根据不同场景实现抽象类&#xff0c;然后用写一个工厂类&#xff0c;一个工厂方法&#xff0c;通过传入类型&#xff0c;进行实例化。 很…
阅读更多...
pta 朋友圈

pta 朋友圈

某学校有N个学生&#xff0c;形成M个俱乐部。每个俱乐部里的学生有着一定相似的兴趣爱好&#xff0c;形成一个朋友圈。一个学生可以同时属于若干个不同的俱乐部。根据“我的朋友的朋友也是我的朋友”这个推论可以得出&#xff0c;如果A和B是朋友&#xff0c;且B和C是朋友&#…
阅读更多...
金三银四跳槽面试季，我整理前端知识做了个网站

金三银四跳槽面试季，我整理前端知识做了个网站

每年的金三银四&#xff0c;都将迎来求职面试的一个高峰期&#xff0c;为什么会有那么多的求职需求&#xff1f;多是因为以下几个来源&#xff1a;已拿 offer 等年终奖的&#xff1a;年前已经找到机会&#xff0c;领了年终奖辞职要到新公司报到的临时起意要辞及裸辞的&#xff…
阅读更多...
web框架和后台开发_Web开发框架–第1部分：选项和标准

web框架和后台开发_Web开发框架–第1部分：选项和标准

web框架和后台开发在我的公司&#xff0c;我们正在评估未来几年将使用哪种Web开发框架。 自上次评估以来&#xff0c;我们一直在使用由Struts 2驱动的Java应用服务器作为MVC&#xff0c;将Tiles作为模板引擎&#xff0c;将jQuery用于Javascript awesomennes&#xff0c;将DWR用…
阅读更多...
hadoop的Map阶段的四大步骤

hadoop的Map阶段的四大步骤

深入理解map的几个阶段是怎样执行的。转载于:https://www.cnblogs.com/xubiao/p/7846080.html
阅读更多...
小程序 Typescript 最佳实践

小程序 Typescript 最佳实践

小程序结合TypeScript开发&#xff0c;如果用第三方框架&#xff0c;首选Taro已完美支持。但是如果你选择原生开发&#xff0c;那么下面的这份实践可能会帮到你。小程序 Typescript 最佳实践使用 gulp 构建&#xff08;支持 typescript 和 less/sass/scss&#xff09;使用 type…
阅读更多...
DIY注释

DIY注释

从Java 5开始&#xff0c;Java中出现了注释。 我想做一个自己的注释&#xff0c;只是为了看看需要什么。 但是&#xff0c;我发现它们只是接口。 有擦 接口后面没有牙。 必须执行一些代码。 我认为这是橡胶行之有效的方法&#xff0c;我真的找到了解决方法。 首先&#xff0c…
阅读更多...
这款电脑升降桌美到我了

这款电脑升降桌美到我了

一直在寻觅一款集颜值与功能于一体的电脑升降桌&#xff0c;这款乐歌 E5 电动桌终于成功地满足了我的需求。有黑白两款颜色可选&#xff0c;但其中白色钢化玻璃版常适合用来作为白色系桌面的基础——四周圆角设计&#xff0c;再加上碳素钢的桌体框架&#xff0c;整体非常有质感…
阅读更多...
spring boot集成mybatis+事务控制

spring boot集成mybatis+事务控制

一下代码为DEMO演示&#xff0c;采用注解的方式完成Spring boot和Mybatis的集成&#xff0c;并进行事物的控制 数据源的配置: 1 spring.datasource.urljdbc:mysql://localhost:3306/book 2 spring.datasource.usernameroot 3 spring.datasource.password 4 spring.datasource.d…
阅读更多...
分享一个引起极度舒适的工作桌面

分享一个引起极度舒适的工作桌面

干净整洁的桌面或许不能带给你工作效率的提升&#xff0c;但一定会给你带来愉悦的心情。长期码字一定需要一个升降桌&#xff0c;可自由地调节高度&#xff0c;以保证舒适的坐姿和灵活的视角。另外坐久了&#xff0c;累了还能站立工作一会儿。有了外显之后&#xff0c;如果不需…
阅读更多...
canvas绘制多边形

canvas绘制多边形

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>canvas绘制多边形</title> </head> <body> <canvas id"canvas" style"border: 1px solid darkcyan;" width…
阅读更多...
ehcache rmi_EhCache复制：RMI与JGroups

ehcache rmi_EhCache复制：RMI与JGroups

ehcache rmi最近&#xff0c;我正在研究一种需要复制缓存的产品。 缓存提供程序已经确定-EhCache&#xff0c;剩下的就是有关传输的问题。 哪一个是最佳选择&#xff1f; 这里的最佳选择是指性能更好的选择。 仅在两个可用传输之间进行了性能评估-JGroups和RMI&#xff0c;对其…
阅读更多...
Element Table 可以实现哪些常见的有用的功能

Element Table 可以实现哪些常见的有用的功能

最近项目中频繁使用 table 功能&#xff0c;因为 UI 框架使用的又是 Element UI&#xff0c;于是总结下在 Element 下 el-table 组件使用技巧。1.行背景色table 组件提供了 row-style 属性&#xff0c;说明&#xff1a;行的 style 的回调方法&#xff0c;也可以使用一个固定的 …
阅读更多...
从0开始 Java实习 黑白棋

从0开始 Java实习 黑白棋

黑白棋的设计 代码如下&#xff1a; import java.util.*; public class Chess{char[][] chess new char[16][16];public static void main(String args[]){ Scanner in new Scanner(System.in);Chess ch new Chess();ch.init(); ch.output();int tag 0;int nn 0;wh…
阅读更多...
最新文章

Copyright @ 2022~2023