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中文網其他相關文章！