在生产环境中使用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