在生产环境中使用LogRocket记录Redux日志--sitepoint

cppowboy 发布于2019-08-20 18:13 / 3005人阅读

摘要：在生产环境，记录和，使得理解和用户上报的变得容易了在这篇文章中，我将会向你展示如何使用来记录日志。在生产环境记录数据非常有用，因为和用户上报的问题，可以通过查看状态网络请求和来进行调试排查。

原文链接

在web应用中排查问题很难。那些难解的js错误，用户上报的bug，还有QA系统里的issue，解决这些影响用户的问题是永恒不变的斗争。这些还只是那些明显的问题，事实是大部分的bug从来都没有被上报，因为当用户对应用有个不好的体验时，他们将不再使用，或者忍气吞声。

为了解决这种问题，越来越多的开发者们引入前端日志工具，因为现在的状态管理库，像redux一样，留好了丰富的追踪日志接口。在生产环境，记录action和state，使得理解bug和用户上报的issues变得容易了

在这篇文章中，我将会向你展示如何使用LogRocket来记录Redux日志。然后，我将会讨论一些使Redux应用debug变得容易的技巧。

这篇文章最初发表在logrocket.com上。经过作者的授权，转载在这里。如果你喜欢这篇文章，可以关注Ben的其他文章。如果你想了解更多Redux方面的东西，为何不注册一个SitePoint账号，这里有我们最新的教程

LogRocket: web应用的录像机

LogRocket 是一个新型的开发者工具。它就像一个web应用的录像机，可以记录下发生在你的页面上所发生的一切。它适用于任何app，不管你使用什么框架。对于React,Redux,Vue.js和Angular都有相应的插件可供使用。通过LogRocket，你可以回放bug或者用户反馈的issue时所处的会话信息，从而快速定位到问题所在。

除了记录Redux action和state之外，LogRocket还可以记录控制台console的日志，js错误，堆栈信息，网络请求/响应(含header和responseBody)，浏览器的metadata和自定义日志。它还可以监控DOM来记录页面上的HTML和CSS，还原出像素级的视频，即使是最复杂的单页面应用。

开始使用LogRocket

使用LogRocket非常简单，只需要在你的应用中加几行代码就可以了：

使用npm i --save logrocket进行安装

在https://app.logrocket.com上创建一个免费的账号，创建你的app id

在你的应用中初始化LogRocket

    import LogRocket from "logrocket";
    // Initialize LogRocket with your app ID
    LogRocket.init();

增加Redux中间件

    import { applyMiddleware, createStore } from "redux";
    const store = createStore(
      reducer, // your app reducer
      applyMiddleware(middlewares, LogRocket.reduxMiddleware()),
    );

这就是基本的用法

LogRocket同时也为其他的Flux实现，比如ngrx和vuex，提供了插件，你可以从这里获取更多细节

--广告--

回放用户会话

在LogRocket中回放会话，就像在你自己的浏览器中看着它一步步发生一样。你可以查看Redux actions中详细的action payload、上一个状态和下一个状态

LogRocket捕获了网络请求和响应，你可以查看某次请求的headers和body的详情信息。下面的瀑布图展示了耗时，可以很容易地分辨出哪些请求很慢，或者有哪些潜在的网络竞争。

有时候单凭Redux的日志来排查bug是远远不够的，特别是排查用户上报的问题的时候。LogRocket的视频回放可以帮助你查看用户当时的界面

因为视频实际上就是DOM的重建过程(并非是真实的视频)，所以你可以查看HTML和CSS来排查UI bug，或者以2倍的速度快进，来理解用户在遇到问题时在app中做了哪些操作。

整合Redux日志记录到你的工作流中

能重放用户会话和Redux日志，无疑对整个开发过程是很有帮助的。

修复bug

LogRocket，像Sentry和Bugsnag一样，整合了错误上报工具，可以让你查看Redux日志和每个bug的视频记录。这不仅对修复bug很有帮助，还可以帮助了解错误的影响范围有多少，毕竟一些js错误完全是不影响的。通过查看视频，可以判断出，当错误发生时，它是否真的会影响用户操作，还是可以忽略不计。

支持度

通常情况下，用户上报问题时，并不能给出足够的上下文来判断到底发生了什么。

如果你正在使用一个像Intercom的聊天工具，你可以直接将LogRocket整合进去，从而无论用户何时开始聊天，你都可以插入一条记录链接。

如果你整合了一个更加通用的分析工具，你可以调用它的跟踪API接口来增加一条记录链接，像下面这样：

LogRocket.getSessionURL(function (sessionURL) {
  analytics.track("LogRocket recording", sessionURL);
})

在生产环境尽可能多地创建Redux日志

在所有的Redux应用中，生产环境日志记录是非常有用的。你可以通过良好的设计，使日志记录最有效，保证这些日志足以排查问题所在。

在Redux中保留尽可能地多的状态信息

这里我不想深入讨论Rdux state。当你决定是否将一部分数据放入state中时，问问自己这些状态是否可以帮助你排查问题。如果回答是yes的话，就将它们放入state中去。当应用crash或者用户遇到问题时，它们将会被记录下来。

使用事半功倍的数据请求库

像适用GraphQL的apollo-client,使用REST的redux-query这样的库，都可以帮助你用来从网络请求中抓取数据。它们使用Redux作为一个持久化层，这意味着当调试问题的时候，你可以查看你的Redux日志，从而可以查看客户端获取了哪些数据

如果你更喜欢一种简单的方式，你可以不使用这些拉取数据的框架，只通过简单地dispatch action，当你准备发送和接收请求的时候。

使用Redux来处理未知的数据来源

当从websockets,localstorage，IndexedDB，或者Date()中访问数据时，考虑使用dispatch action，这样你可以在以后很方便的调试。例如：当监听websocket的时候，对每条信息都dispatch一条action，这样的话，你就可以在Redux日志中看到这些数据

考虑其他的Console APIs

Console方法，比如console.time(),console.count()和console.group()，可以让你添加丰富的数据到你的日志中去，比如React组件的渲染数量，动画时间和组件生命周期日志。如果你对这些感兴趣，可以查看我的另一篇文章

编译上传source Map到LogRocket

LogRocket支持source map，你可以通过命令上传。这样做，你可以在代码里看到js的错误堆栈、Redux action，console日志和网络请求

结论

React和Redux都被赞赏为可创建可维护性的应用。在生产环境记录Redux数据非常有用，因为bug和用户上报的问题，可以通过查看Redux状态、网络请求和DOM来进行调试排查。

在Redux日志中使用LogRocket可以简化bug fix过程，你可以开始使用LogRocket

云服务器 GPU云服务器 asp中怎么记录日志在php中使用组件在VBScript中使用类 webrtc在webview中使用问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84201.html

2017-07-06 前端日报

摘要：前端日报精选专题之类型判断下百度生态构建发布基于的解决方案将全面支持从绑定，看语言发展和框架设计掘金译机器学习与一付费问答上线，向你心目中的大牛提问吧产品技术日志中文第期团队技术信息流建设翻译基于路由的异步组件加载个必备的装逼 2017-07-06 前端日报精选 JavaScript专题之类型判断(下) · Issue #30 · mqyqingfeng/Blog 百度Web生态构...

shiguibiao 2019-08-20 17:46 评论0 收藏0
2017-07-22 前端日报

摘要：前端日报精选任何网站都可以变成但我们需要做得更好译高性能个新工具加速你的应用在生产环境中使用记录日志手把手教你用开发一个发布中文译继承实例译基于背后的合理化，而非设计掘金实现哪家强中的众成翻译快速入门个人文章一个基于区块链的深网 2017-07-22 前端日报精选任何网站都可以变成 PWA —— 但我们需要做得更好[译] 高性能 React：3 个新工具加速你的应用在生产环境中使用...

endless_road 2019-08-20 18:14 评论0 收藏0
如何在Vue里建立长按指令

摘要：首先，我们必须声明自定义指令的名称。这基本上注册了一个名为的全局自定义指令接下来，我们使用一些参数添加函数，这允许我们引用元素指令绑定，获取传递给指令的值并标识使用该指令的组件。 showImg(https://segmentfault.com/img/bVbfzuo?w=828&h=838); 您是否曾想过按住按钮几秒钟才能在Vue应用程序中执行某个功能？您是否曾想在应用程序上创建...

jimhs 2019-08-29 16:27 评论0 收藏0
如何在Vue里建立长按指令

摘要：首先，我们必须声明自定义指令的名称。这基本上注册了一个名为的全局自定义指令接下来，我们使用一些参数添加函数，这允许我们引用元素指令绑定，获取传递给指令的值并标识使用该指令的组件。 showImg(https://segmentfault.com/img/bVbfzuo?w=828&h=838); 您是否曾想过按住按钮几秒钟才能在Vue应用程序中执行某个功能？您是否曾想在应用程序上创建...

guqiu 2019-08-26 12:15 评论0 收藏0