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

原文连接

在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很是简单，只须要在你的应用中加几行代码就能够了：

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

2. 在https://app.logrocket.com上建立一个免费的帐号，建立你的app id

3. 在你的应用中初始化LogRocket

import LogRocket from 'logrocket';
    // Initialize LogRocket with your app ID
    LogRocket.init(<your_application_id>);

1. 增长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