Logrocket的Redux登录生产

LogRocket：你的Web应用的DVR，助力Redux应用调试

LogRocket是一款革命性的开发者工具，如同Web应用的DVR，记录网站上发生的每一个事件。它记录Redux actions和状态、控制台日志、JavaScript错误、堆栈跟踪、网络请求/响应、浏览器元数据和自定义日志，并重现即使是最复杂的单页应用的像素级精确视频。

理解Web应用中的问题很困难。从神秘的JavaScript错误、用户报告的bug到在QA中发现的问题，开发者一直在努力解决影响用户的问题。而这些只是显而易见的问题——大多数bug实际上从未被报告，因为遇到糟糕体验的用户只是默默离开或忍受。

为了解决这个问题，开发者越来越多地采用前端日志记录工具，因为像Redux这样的现代状态管理库留下了丰富的审计跟踪。在生产环境中记录actions和状态，可以轻松理解bug和用户报告的问题。

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

本文最初发表在logrocket.com，经作者许可在此转载。

LogRocket：Web应用的DVR

LogRocket是一种新型的开发者工具。它就像Web应用的DVR，记录网站上实际发生的一切。它可以完美地与任何应用配合使用，无论使用什么框架，并且拥有插件可以记录来自React、Redux、Vue.js和Angular的额外上下文。使用LogRocket，您可以重播包含bug或用户问题的会话，快速了解根本原因，而无需猜测问题发生的原因。

除了记录Redux actions和状态外，LogRocket还记录控制台日志、JavaScript错误、堆栈跟踪、带有header和body的网络请求/响应、浏览器元数据和自定义日志。它还会检测DOM以记录页面上的HTML和CSS，重现即使是最复杂的单页应用的像素级精确视频。

设置LogRocket

设置LogRocket很简单，只需要在您的应用中添加几行代码：

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

import LogRocket from 'logrocket';
// 使用您的应用ID初始化LogRocket
LogRocket.init('<your_application_id>');

4. 添加Redux中间件：

import { applyMiddleware, createStore } from 'redux';
const store = createStore(
  reducer, // 您的应用reducer
  applyMiddleware(middlewares, LogRocket.reduxMiddleware()),
);

这就是基本的设置——这是您开始使用LogRocket所需的一切！

LogRocket还为ngrx和vuex等其他Flux实现提供插件，您可以在此处阅读相关信息。

重播用户会话

在LogRocket中重播会话就像在您自己的浏览器中看到它发生一样。您可以检查Redux actions，包括完整的action payload以及之前的和接下来的状态。

LogRocket捕获网络请求和响应，并允许您深入研究特定请求并查看header和body。瀑布图显示计时，使您可以轻松查看哪些请求速度慢，或者是否发生了潜在的竞争条件。

有时，仅靠Redux日志不足以理解bug，尤其是在处理用户报告的问题时。LogRocket的视频回放通过让您准确地看到用户在您的应用中看到的内容来提供帮助。

由于此视频实际上是DOM的重建（而不是真实的视频），您可以检查HTML/CSS以了解视觉bug，或以2倍速度播放以快速了解用户在处理支持问题时在应用中做了什么。

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

能够重播用户会话并查看Redux日志在整个开发工作流程中都非常有用。

修复bug

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

支持

用户经常会报告问题，但不会提供足够的上下文来准确了解发生了什么。

如果您使用的是Intercom之类的聊天支持工具，您可以直接集成LogRocket，以便在用户开始聊天时添加带有录制URL的注释。

如果您正在与更通用的分析工具集成，您可以使用如下所示的跟踪API添加录制URL：

import LogRocket from 'logrocket';
// 使用您的应用ID初始化LogRocket
LogRocket.init('<your_application_id>');

充分利用生产环境中的Redux日志记录

生产环境日志记录在所有Redux应用中都立即有用，但通过考虑到日志记录来构建您的应用，您可以确保在调试问题时日志最大程度地有用。

尽量将大部分状态保存在Redux中

我不想在这里讨论本地状态与Redux状态的争论，但在决定给定的状态部分是否应该在Redux中时，问问自己，在调试问题时查看该状态是否有帮助。如果答案是肯定的，请考虑将该状态放入Redux中，以便它将与崩溃报告和用户问题一起记录。

使用利用Redux的数据获取库

像apollo-client（用于GraphQL）和redux-query（用于REST）这样的库都通过Redux来促进从网络获取数据。它们使用Redux作为持久层，这意味着在调试问题时，您可以检查Redux日志以查看这些客户端已获取了哪些数据。

如果您更喜欢更简单的方法，您可以通过在查询和从网络接收数据时简单地调度显式actions来自己编写数据获取“框架”。

使用Redux处理不确定性来源

当访问来自websockets、本地存储、IndexedDB甚至Date()等API的数据时，请考虑调度包含结果的Redux actions，以便您将来可以轻松调试这些数据。例如，当侦听websocket时，在每条消息上调度一个Redux action——这样您就可以在Redux日志中看到数据。

利用其他控制台API

像console.time()、console.count()和console.group()这样的控制台方法允许您向日志添加丰富的数据，例如React组件渲染计数、事务计时和组件生命周期日志。

构建并将源映射上传到LogRocket

LogRocket支持源映射，您可以通过cli上传。通过这样做，您可以看到JavaScript错误、Redux actions、控制台日志和网络请求的符号化堆栈跟踪，这使您可以看到在代码中触发特定actions的位置。

结论

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

使用LogRocket进行Redux日志记录可以大大简化修复bug和支持用户的工作。您可以在这里开始使用LogRocket。

关于使用LogRocket进行生产环境Redux日志记录的常见问题解答 (FAQs)

LogRocket在Redux日志记录中的主要功能是什么？

LogRocket是一个强大的工具，可以帮助开发者跟踪、记录和理解其Web应用程序中的用户交互。它提供了应用程序中发生情况的全面视图，包括网络请求、控制台日志，甚至是用户操作。这使得识别和修复问题变得更容易，因为开发者可以准确地看到导致问题的原因。LogRocket在Redux应用程序中特别有用，因为它可以记录Redux actions和状态，从而清晰地显示事件序列。

LogRocket与其他日志记录工具有何不同？

LogRocket因其会话重播功能而脱颖而出。此功能允许开发者重播有问题的会话，准确地查看用户所看到的内容。这在识别和修复bug方面可能非常宝贵。此外，LogRocket与Redux无缝集成，使记录Redux actions和状态变得容易。

如何将LogRocket与我的Redux应用程序集成？

将LogRocket与Redux应用程序集成非常简单。通过npm安装LogRocket后，您可以在应用程序的入口文件中初始化它。然后，您可以使用LogRocket的Redux中间件来记录Redux actions和状态。创建Redux存储时可以添加此中间件。

我可以在生产环境中使用LogRocket吗？

是的，LogRocket旨在用于生产环境。它具有各种使其适合生产使用的功能，例如保护敏感用户数据的隐私控制和确保不会减慢应用程序速度的性能优化。

LogRocket可以记录哪些类型的数据？

LogRocket可以记录各种数据，包括网络请求、控制台日志、Redux actions和状态以及用户交互。这提供了应用程序中发生情况的全面视图，从而更容易识别和修复问题。

LogRocket如何处理敏感用户数据？

LogRocket具有强大的隐私控制功能，可以保护敏感用户数据。您可以配置这些控件以防止记录某些数据。例如，您可以防止记录表单输入以保护用户密码。

我可以将LogRocket与其他状态管理库一起使用吗？

是的，虽然LogRocket与Redux无缝集成，但它也可以与其他状态管理库一起使用。它为多个流行的库提供中间件，包括MobX和Vuex。

LogRocket如何帮助调试？

LogRocket的会话重播功能在调试中可能非常宝贵。通过重播有问题的会话，开发者可以准确地查看用户所看到的内容，从而更容易识别和修复bug。此外，LogRocket对网络请求、控制台日志和用户交互的全面日志记录在调试时可以提供宝贵的上下文。

我可以自定义LogRocket记录的数据吗？

是的，LogRocket是高度可定制的。您可以配置要记录的数据，还可以添加自定义日志以跟踪应用程序中的特定事件或状态。

LogRocket是否适合大型应用程序？

是的，LogRocket旨在处理大型应用程序。它具有性能优化功能，以确保不会减慢应用程序的速度，并且可以处理大量的日志。此外，LogRocket强大的搜索和过滤功能使在大型数据集中查找相关日志变得容易。

以上是Logrocket的Redux登录生产的详细内容。更多信息请关注PHP中文网其他相关文章！