日志在開發過程中的作用自不必說，一旦程序出現問題，我們首先想到的是通過日志監控去追查。

好的日志可以通過應用程序執行的歷史記錄模擬出用戶在使用程序的時候操作的完整過程。

想知道發生了什么

為了便于我們分析程序哪里出現問題，我們將采用logrock模塊并將其鏈接到ElasticSearch，LogStash和Kibana進行進一步分析。

LogRock

logrock模塊源于研究Cleverbrush時候的創新。它是一個用于處理矢量圖形的軟件。使用圖形編輯器意味著大量的應用程序用例。為了控制成本，不得不優化整個開發測試流程。減少每個環節使用測試用例帶來的額外的付出。

該模塊可以為您的應用程序組織現代化的日志記錄方法。 根據日志，我們測試了我們的應用程序。 在本文中，我將向您介紹如何組織日志系統以搜索錯誤。

ElasticStack

• ElasticSearch是一個功能強大的全文搜索引擎。
• LogStash是一個用于從各種來源收集日志的系統，該系統也可以將日志發送到ElasticSearch。
• Kibana是ElasticSearch的Web界面版，其中包含許多插件。

它是如何工作的

一旦程序出現錯誤（或者用于特殊模擬），則應用程序會將日志發送到服務器，然后將日志保存到文件中。Logstash將數據增量保存到ElasticSearch數據庫。用戶登錄到Kibana并查看保存的日志。

以上就是一個配置好的Kibana的界面，顯示了來自ElasticSearch的數據。它可以幫助您分析數據并從中了解程序發生了什么故障。

這里就不一一將如何去設置ElasticStack。

創建日志系統

這里我們將一個日志記錄系統集成到基于React開發的單頁應用程序中。

Step 1：安裝

npm install logrock --save

Step 2：集成到React應用程序中

import { LoggerContainer } from "logrock";<LoggerContainer><App /> </LoggerContainer>

LoggerContainer是一個捕捉應用程序中的錯誤并將它們形成堆棧的組件。

堆棧是一個對象，其中包含有關用戶的操作系統，瀏覽器，按下的鼠標或鍵盤按鈕的信息，當然還有操作相關的子數組，其中記錄了用戶在系統中執行的所有的操作。

LoggerContainer含有配置項，可適當考慮更改其中的一些設置。

<LoggerContaineractive={true|false}limit={20}onError={stack => {sendToServer(stack);}} ><App /> </LoggerContainer>

• active 開啟關閉日志功能
• limit 設置最近用戶操作的最大闕值。如果超過這個值，那么數組中的第一個值將會被刪除。數組中始終保持最近的20個操作信息。
• onError 當錯誤出發時的一個回調。返回參數stack對象包含環境，用戶操作等信息。在回調中我們需要將這些信息上傳到ElasticSearch，云端，或者保存到本地文件中，為后面進行數據分析和監控做準備。

打印日志

為了生產高質量的用戶操作日志，我們將日志代碼覆蓋到所有需要打印日志的地方

logrock模塊附帶一個與 LoggerContainer 連接的記錄器。

例如，我們有以下這樣一個組件：

import React, { useState } from "react";export default function Toggle(props) {const [toggleState, setToggleState] = useState("off");function toggle() {setToggleState(toggleState === "off" ? "on" : "off");}return <div className={`switch ${toggleState}`} onClick={toggle} />; }

為了能讓日志正確覆蓋到，我們需要修改toggle方法：

import React, { useState } from "react"; import logger from "logrock";export default function Toggle(props) {const [toggleState, setToggleState] = useState("off");function toggle() {let state = toggleState === "off" ? "on" : "off";logger.info(`React.Toggle|Toggle component changed state ${state}`);setToggleState(state);}return <div className={`switch ${toggleState}`} onClick={toggle} />; }

我們添加了一個logger方法，其中的信息分為兩部分。‘React.Toggle’用于顯示該動作發生在React的Toggle組件級別。后面是對該動作和發生所在組件的一些描述信息。日志級別劃分不是必須的，但是這樣有助于我們快速定位錯誤發生的有關代碼。

我們還可以使用 React 16 中引入的“componentDidCatch”方法來捕獲異常。

日志上傳

假設我們有一個從后端收集用戶數據的方法。該方法是異步的，部分邏輯隱藏在后端中。看看如何將日志添加到代碼中？

首先，由于我們有一個客戶端應用程序，所有發送到服務器的請求都將在一個用戶會話內傳遞，而無需重新加載頁面。 為了將客戶端上的操作與服務器上的操作相關聯，我們必須創建一個全局SessionID并將其添加到針對服務器的每個請求頭的標記中。 在服務器上，我們可以使用任何記錄器來記錄我們的邏輯，如前端示例所示，如果發生錯誤，請將帶有附加sessionID的數據發送到ElasticSearch，發送到后端。

Step 1：客戶端生成SessionID

window.SESSION_ID = `sessionid-${Math.random().toString(36).substr(3, 9)}`;

Step 2：封裝請求

我們需要將SessionID添加到請求頭中。如果我們使用以及封裝好的請求庫，很容易將聲明好的SessionID添加到所有的請求中。

let fetch = axios.create({...});fetch.defaults.headers.common.sessionId = window.SESSION_ID;

Step 3：將SessionID和日志堆棧綁定

LoggerContainer有專門的sessionID字段

<LoggerContaineractive={true | false}sessionID={window.SESSION_ID}limit={20}onError={stack => {sendToServer(stack);}} ><App /> </LoggerContainer>

Step 4：請求后端接口

前端請求類似下面：

logger.info(`store.getData|User is ready for loading... User ID is ${id}`);getData('/api/v1/user', { id }).then(userData => {logger.info(`store.getData|User have already loaded. User count is ${JSON.stringify(userData)}`);}).catch(err => {logger.error(`store.getData|User loaded fail ${err.message}`);});

它是怎么運行的呢？

我們在客戶端請求之前寫一個日志。 從我們的代碼中，我們可以看到現在開始從服務器下載數據。 我們已將SessionID附加到請求。 如果我們的后端日志包含此SessionID的添加而請求失敗，那么我們可以看到后端發生了什么。

因此，我們不僅在客戶端而且還在服務器上監視應用程序的整個周期。

用戶交互

有些日志對用戶是有幫助的。向用戶輸出必要的信息可以采用 stdout 方法

<LoggerContaineractive={true | false}limit={20}bsodActive={true}bsod={BSOD}onError={stack => {sendToServer(stack);}}stdout={(level, message, important) => {console[level](message);if (important) {alert(message);}}} ><App /> </LoggerContainer>

• stdout 方法用于打印提示信息到頁面中

我們通過logger傳遞的第二個參數的值為true來聲明這是一個重要的信息，需要通過pop-up窗口顯示給用戶看，比如在數據加載的時候失敗了，我們將輸出以下錯誤信息：

logger.log('Something was wrong', true);

一些注意項

• 日志監控（包括生產環境），因為測試人員永遠無法覆蓋所有的測試用例，完全模擬到用戶操作
• 不要忘記在許可協議中提及日志收集。
• 不要在日志中記錄用戶密碼，銀行詳情地址等敏感的個人信息。
• 避免在日志中添加冗余信息，盡量保證簡潔有用

總結

當我們完成編碼對外發布應用程序的時候，如果把程序比作一個生命，那么這個生命才剛剛開始。收集并監視日志可以獲得產品的反饋幫助更好的改善。

歡迎關注公眾號“太空編程”，帶你了解硬核的編程知識

總結

以上是生活随笔為你收集整理的前端如何进行日志驱动开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。