shelwin

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

shelwin · 2017-07-21翻译 · 1285阅读 原文链接

原文链接

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

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

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

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

LogRocket: web应用的录像机

LogRocket dashboard

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实现,比如ngrxvuex,提供了插件,你可以从这里获取更多细节

--广告--

回放用户会话

LogRocket User Session

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

LogRocket User Session

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

LogRocket Timeline

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

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

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

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

修复bug

LogRocket Bug

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

支持度

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

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

LogRocket support

如果你整合了一个更加通用的分析工具,你可以调用它的跟踪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

译者shelwin尚未开通打赏功能

相关文章