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

原文鏈接

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

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

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

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

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

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

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

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

在https://app.logrocket.com上創(chuàng)建一個(gè)免費(fèi)的賬號(hào)，創(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同時(shí)也為其他的Flux實(shí)現(xiàn)，比如ngrx和vuex，提供了插件，你可以從這里獲取更多細(xì)節(jié)

--廣告--

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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