使用LogRocket进行Redux登录生产

很难理解Web应用程序中的问题。 在神秘的JavaScript错误，用户报告的错误以及质量检查中发现的问题之间，要努力克服影响用户的问题，人们一直在努力。 这些只是显而易见的问题-大多数bug从未得到过实际报告，因为体验不好的用户只是离开或默默地遭受痛苦。

为了解决这个问题，开发人员越来越多地采用前端日志记录工具，因为像Redux这样的现代状态管理库留下了丰富的审计线索。 记录生产中的操作和状态可以轻松理解错误和用户报告的问题。

在本文中，我将向您展示如何使用LogRocket设置Redux日志记录。 然后，我将讨论使Redux应用程序更易于调试的技术。

该帖子最初发布在logrocket.com上，并在获得作者许可的情况下在此处重新发布。 如果您喜欢阅读，为什么不阅读Ben的其他文章 ？ 如果您想了解有关Redux的更多信息，为什么不注册SitePoint Premium并注册我们的最新课程： Forms with React and Redux ？

LogRocket：适用于Web应用程序的DVR

LogRocket是一种新型的开发人员工具。 这就像Web应用程序的DVR， 实际上记录了您网站上发生的所有事情。 无论框架如何，它都能与任何应用完美配合，并具有用于记录来自React，Redux，Vue.js和Angular的其他上下文的插件。 使用LogRocket，您可以猜测错误或用户问题来重播会话，以快速了解根本原因，而不必猜测问题发生的原因。

除了记录Redux动作和状态外，LogRocket还记录控制台日志，JavaScript错误，堆栈跟踪，带有标头+正文，浏览器元数据和自定义日志的网络请求/响应。 它还使用DOM来记录页面上的HTML和CSS，甚至可以对最复杂的单页面应用程序重新创建像素完美的视频。

设置LogRocket

设置LogRocket很容易，只需要向您的应用添加几行代码即可：

1. 使用npm安装： npm i --save logrocket 。
2. 在https://app.logrocket.com上创建一个免费帐户，并记下您的应用程序ID。
3. 在您的应用程序中初始化LogRocket：

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

4. 添加Redux中间件。

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

基本设置就是这样-这就是LogRocket入门所需的全部！

LogRocket还具有用于替代Flux实现的插件，例如ngrx和vuex ，您可以在此处阅读 。

重播用户会话

在LogRocket中重播会话就像在您自己的浏览器中看到它一样。 您可以检查具有完整操作有效负载以及上一个和下一个状态的Redux操作。

LogRocket捕获网络请求和响应，并允许您深入查看特定请求并查看标头和正文。 瀑布图显示了时间安排，可以轻松查看哪些请求很慢，或者是否出现了潜在的竞争状况。

有时仅Redux日志不足以理解错误，尤其是在处理用户报告的问题时。 LogRocket的视频重播可以帮助您准确了解用户在您的应用中看到的内容，从而为您提供帮助。

由于该视频实际上是DOM（而非真实视频）的重构，因此您可以检查HTML / CSS来了解视觉错误，或者以2倍的速度播放以快速了解用户在处理支持问题时在应用中的操作。

将Redux日志集成到您的工作流程中

能够重播用户会话并查看Redux日志对整个开发工作流程很有帮助。

修复错误

LogRocket与Sentry和Bugsnag等错误报告工具集成在一起，可让您查看Redux日志和每个错误的视频。 由于某些JavaScript错误是完全无害的，因此这不仅有助于修复错误，而且有助于理解错误影响。 通过观看发生错误时的视频，您可以
轻松判断它是否确实影响了用户，或者可以忽略。

支持

用户常常会报告问题，但没有提供足够的背景信息来准确地了解发生了什么。

如果使用的是Intercom之类的聊天支持工具，则可以直接集成LogRocket，以便每当用户开始聊天时，它便会在记录URL中添加注释。

如果您要与更通用的分析工具集成，则可以使用以下跟踪API添加记录URL：

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

充分利用生产Redux日志

生产日志记录在所有Redux应用程序中都是立即有用的，但是通过牢记日志记录来构建应用程序，可以确保在调试问题时最大程度地使用日志。

尝试在Redux中保持大多数状态

我不想在这里讨论本地与Redux状态的争论，但是在确定某个状态是否应位于Redux中时，请问问自己，查看该状态是否有助于调试问题。 如果答案是肯定的，请考虑将该状态放入Redux，以便将其记录为崩溃报告和用户问题。

使用利用Redux的数据提取库

诸如GraphQL的apollo-client和REST的redux-query之类的库都有助于通过Redux从网络获取数据。 他们使用Redux作为持久层，这意味着在调试问题时，您可以检查Redux日志以查看这些客户端获取了哪些数据。

如果您希望使用更简单的方法，则可以通过在查询和接收来自网络的数据时简单地分派显式操作来滚动自己的数据以获取“框架”。

使用Redux处理不确定性的来源

从Websockets，本地存储，IndexedDB甚至Date()等API访问数据时，请考虑将Redux操作与结果一起分派，以便将来轻松调试。 例如，在侦听网络套接字时，对每条消息都分配一个Redux操作-这样您就可以看到自己的数据
Redux日志。

利用其他控制台API

诸如console.time() ， console.count()和console.group()类的控制台方法使您可以向日志中添加丰富的数据，例如React组件渲染计数，事务计时和组件生命周期日志。 如果
您有兴趣了解更多信息，我在这里写了一篇有关此的文章 。

构建源地图并将其上传到LogRocket

LogRocket支持可通过cli上传的源地图。 通过这样做，您可以查看JavaScript错误，Redux操作，控制台日志和
网络请求，可让您查看在代码中触发了特定操作的位置。

结论

React和Redux通常被誉为构建可维护应用程序的工具-其中的重要组成部分是可调试性 。 在生产环境中记录Redux数据可以提供这种见解，因为可以通过检查Redux状态，网络请求和DOM轻松调试错误和其他用户报告的问题。

使用LogRocket进行Redux日志记录可以大大简化错误修复和为用户提供支持。 您可以在此处开始使用LogRocket 。

From: https://www.sitepoint.com/redux-logging-production-logrocket/