摘要：在生產(chǎn)環(huán)境，記錄和，使得理解和用戶上報的變得容易了在這篇文章中，我將會向你展示如何使用來記錄日志。在生產(chǎn)環(huán)境記錄數(shù)據(jù)非常有用，因為和用戶上報的問題，可以通過查看狀態(tài)網(wǎng)絡(luò)請求和來進(jìn)行調(diào)試排查。

原文鏈接

在web應(yīng)用中排查問題很難。那些難解的js錯誤，用戶上報的bug，還有QA系統(tǒng)里的issue，解決這些影響用戶的問題是永恒不變的斗爭。這些還只是那些明顯的問題，事實是大部分的bug從來都沒有被上報，因為當(dāng)用戶對應(yīng)用有個不好的體驗時，他們將不再使用，或者忍氣吞聲。

為了解決這種問題，越來越多的開發(fā)者們引入前端日志工具，因為現(xiàn)在的狀態(tài)管理庫，像redux一樣，留好了豐富的追蹤日志接口。在生產(chǎn)環(huán)境，記錄action和state，使得理解bug和用戶上報的issues變得容易了

在這篇文章中，我將會向你展示如何使用LogRocket來記錄Redux日志。然后，我將會討論一些使Redux應(yīng)用debug變得容易的技巧。

這篇文章最初發(fā)表在logrocket.com上。經(jīng)過作者的授權(quán)，轉(zhuǎn)載在這里。如果你喜歡這篇文章，可以關(guān)注Ben的其他文章。如果你想了解更多Redux方面的東西，為何不注冊一個SitePoint賬號，這里有我們最新的教程

LogRocket 是一個新型的開發(fā)者工具。它就像一個web應(yīng)用的錄像機(jī)，可以記錄下發(fā)生在你的頁面上所發(fā)生的一切。它適用于任何app，不管你使用什么框架。對于React,Redux,Vue.js和Angular都有相應(yīng)的插件可供使用。通過LogRocket，你可以回放bug或者用戶反饋的issue時所處的會話信息，從而快速定位到問題所在。

除了記錄Redux action和state之外，LogRocket還可以記錄控制臺console的日志，js錯誤，堆棧信息，網(wǎng)絡(luò)請求/響應(yīng)(含header和responseBody)，瀏覽器的metadata和自定義日志。它還可以監(jiān)控DOM來記錄頁面上的HTML和CSS，還原出像素級的視頻，即使是最復(fù)雜的單頁面應(yīng)用。

使用LogRocket非常簡單，只需要在你的應(yīng)用中加幾行代碼就可以了：

使用npm i --save logrocket進(jìn)行安裝

在https://app.logrocket.com上創(chuàng)建一個免費(fèi)的賬號，創(chuàng)建你的app id

在你的應(yīng)用中初始化LogRocket

    import LogRocket from "logrocket";
    // Initialize LogRocket with your app ID
    LogRocket.init();

增加Redux中間件

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

這就是基本的用法

LogRocket同時也為其他的Flux實現(xiàn)，比如ngrx和vuex，提供了插件，你可以從這里獲取更多細(xì)節(jié)

--廣告--

在LogRocket中回放會話，就像在你自己的瀏覽器中看著它一步步發(fā)生一樣。你可以查看Redux actions中詳細(xì)的action payload、上一個狀態(tài)和下一個狀態(tài)

LogRocket捕獲了網(wǎng)絡(luò)請求和響應(yīng)，你可以查看某次請求的headers和body的詳情信息。下面的瀑布圖展示了耗時，可以很容易地分辨出哪些請求很慢，或者有哪些潛在的網(wǎng)絡(luò)競爭。

有時候單憑Redux的日志來排查bug是遠(yuǎn)遠(yuǎn)不夠的，特別是排查用戶上報的問題的時候。LogRocket的視頻回放可以幫助你查看用戶當(dāng)時的界面

因為視頻實際上就是DOM的重建過程(并非是真實的視頻)，所以你可以查看HTML和CSS來排查UI bug，或者以2倍的速度快進(jìn)，來理解用戶在遇到問題時在app中做了哪些操作。

能重放用戶會話和Redux日志，無疑對整個開發(fā)過程是很有幫助的。

LogRocket，像Sentry和Bugsnag一樣，整合了錯誤上報工具，可以讓你查看Redux日志和每個bug的視頻記錄。這不僅對修復(fù)bug很有幫助，還可以幫助了解錯誤的影響范圍有多少，畢竟一些js錯誤完全是不影響的。通過查看視頻，可以判斷出，當(dāng)錯誤發(fā)生時，它是否真的會影響用戶操作，還是可以忽略不計。

通常情況下，用戶上報問題時，并不能給出足夠的上下文來判斷到底發(fā)生了什么。

如果你正在使用一個像Intercom的聊天工具，你可以直接將LogRocket整合進(jìn)去，從而無論用戶何時開始聊天，你都可以插入一條記錄鏈接。

如果你整合了一個更加通用的分析工具，你可以調(diào)用它的跟蹤API接口來增加一條記錄鏈接，像下面這樣：

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

在所有的Redux應(yīng)用中，生產(chǎn)環(huán)境日志記錄是非常有用的。你可以通過良好的設(shè)計，使日志記錄最有效，保證這些日志足以排查問題所在。

這里我不想深入討論Rdux state。當(dāng)你決定是否將一部分?jǐn)?shù)據(jù)放入state中時，問問自己這些狀態(tài)是否可以幫助你排查問題。如果回答是yes的話，就將它們放入state中去。當(dāng)應(yīng)用crash或者用戶遇到問題時，它們將會被記錄下來。

像 適用GraphQL的apollo-client,使用REST的redux-query這樣的庫，都可以幫助你用來從網(wǎng)絡(luò)請求中抓取數(shù)據(jù)。它們使用Redux作為一個持久化層，這意味著當(dāng)調(diào)試問題的時候，你可以查看你的Redux日志，從而可以查看客戶端獲取了哪些數(shù)據(jù)

如果你更喜歡一種簡單的方式，你可以不使用這些拉取數(shù)據(jù)的框架，只通過簡單地dispatch action，當(dāng)你準(zhǔn)備發(fā)送和接收請求的時候。

當(dāng)從websockets,localstorage，IndexedDB，或者Date()中訪問數(shù)據(jù)時，考慮使用dispatch action，這樣你可以在以后很方便的調(diào)試。例如：當(dāng)監(jiān)聽websocket的時候，對每條信息都dispatch一條action，這樣的話，你就可以在Redux日志中看到這些數(shù)據(jù)

Console方法，比如console.time(),console.count()和console.group()，可以讓你添加豐富的數(shù)據(jù)到你的日志中去，比如React組件的渲染數(shù)量，動畫時間和組件生命周期日志。如果你對這些感興趣，可以查看我的另一篇文章

LogRocket支持source map，你可以通過命令上傳。這樣做，你可以在代碼里看到j(luò)s的錯誤堆棧、Redux action，console日志和網(wǎng)絡(luò)請求

React和Redux都被贊賞為可創(chuàng)建可維護(hù)性的應(yīng)用。在生產(chǎn)環(huán)境記錄Redux數(shù)據(jù)非常有用，因為bug和用戶上報的問題，可以通過查看Redux狀態(tài)、網(wǎng)絡(luò)請求和DOM來進(jìn)行調(diào)試排查。

在Redux日志中使用LogRocket可以簡化bug fix過程，你可以開始使用LogRocket