在生產環境中使用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