Node開發神器：使用Llama Logs實時可視化Node錯誤

原文： https://dev.to/bakenator
做者：bakenator

你是否想知道程序內部發生了什麼？是否但願以視覺方式檢查其內部運做？

上面的動圖顯示了Llama Logs的一個例子。它是我建立的一個新工具，讓你實時看到你的應用程序的內部運做。它已經準備好了，你能夠開始在你的應用程序中無償使用。

下面，我將經過一個示例演示如何使用Llama Logs顯示和調試基本Express應用程序中發生的錯誤。

開始

我將編寫一個基本的快速應用程序，該應用程序經過url參數接收用戶的電子郵件，若是該電子郵件是 llamalogs.com 域，則將其保存到數據庫中。

基本邏輯將以下所示

app.get('/', (req, res) => {
  let customerEmail = req.query.email
  let isDomainOk = domainCheck(customerEmail)

  if (isDomainOk) {
      saveEmail(customerEmail)
  }

  res.send('We received your email')
})

如今的問題是，我要寫一些檢查的代碼，若是用戶忘記在郵件中包含 @domain 部分，就會出錯。

const domainCheck = (customerEmail) => {
  // toLowerCase will fail if the [1] value is undefined!
  const domain = customerEmail.split("@")[1].toLowerCase()
  const domainIsOk = domain === "llamalogs.com"
  return domainIsOk
}

使用Llama Logs進行可視化

Llama Logs的設置很是簡單。一旦你註冊了llamalogs.com，你所須要作的就是經過npm安裝客戶端，而後開始而後開始記錄，Llama Logs將自動將你的日誌轉換爲交互式圖形。

所以，例如，讓咱們將 domainCheck 方法更新爲如下內容

const domainCheck = (customerEmail) => {
  try {
    const domain = customerEmail.split("@")[1].toLowerCase()
    const domainIsOk = domain === "llamalogs.com"

    LlamaLogs.log({ sender: 'Server', receiver: 'Domain Check' })

    return domainIsOk

  } catch (e) {
    LlamaLogs.log({ 
      sender: 'Server', 
      receiver: 'Domain Check', 
      message: `input: ${customerEmail}; Error: ${e}`,
      isError: true
    })
  }
}

咱們爲成功和失敗的結果都添加了一個日誌案例。而後，Llama Logs將使用 sender、receiver 和 isError 屬性中提供的名稱，自動將應用程序中的活動可視化爲一系列在組件之間移動的點。

在下面的圖形中，咱們能夠看到使用有效電子郵件對服務器運行幾回調用以及致使錯誤的調用的結果。

調試

比可視化圖表中的活動更好，Llama Logs可讓你實時地從錯誤中獲取數據。

還記得在 domainCheck 方法中咱們將此屬性附加到Llama Log嗎？

message: `input: ${customerEmail}; Error: ${e}`,

經過使用此message屬性，這意味着當咱們將鼠標懸停在紅色錯誤點上時，它將顯示該消息。下圖顯示了我停留在錯誤上，它表示的請求具備電子郵件參數 == 「jd」，缺乏電子郵件域。

經過使用Llama Logs可視化系統中的錯誤，你能夠比以往更快，更輕鬆地發現錯誤的來源！

更多信息

有興趣的朋友請訪問LlamaLogs.com瞭解更多信息。該應用是免費的，今天就可使用。若是你有任何問題，請隨時與我聯繫：andrew@llamalogs.com。

完整代碼

我認爲這是一款小型Express應用程序，最簡單的方法是將全部代碼包含在此博客文章中。

const express = require('express')
const { LlamaLogs } = require('llamalogs');

LlamaLogs.init({
  accountKey: 'YOUR_ACCOUNT_KEY',
  graphName: 'YOUR_GRAPH_NAME'
});

const app = express()
const port = 3000

app.get('/', (req, res) => {
  LlamaLogs.log({ sender: 'User', receiver: 'Server' })

  let customerEmail = req.query.email
  let isDomainOk = domainCheck(customerEmail)

  if (isDomainOk) {
      saveEmail(customerEmail)
  }

  res.send('We received your email')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})


const domainCheck = (customerEmail) => {
  try {
    const domain = customerEmail.split("@")[1].toLowerCase()
    const domainIsOk = domain === "llamalogs.com"

    LlamaLogs.log({ sender: 'Server', receiver: 'Domain Check' })

    return domainIsOk

  } catch (e) {
    LlamaLogs.log({ 
      sender: 'Server', 
      receiver: 'Domain Check', 
      message: `input: ${customerEmail}; Error: ${e}`,
      isError: true
    })
  }
}

const saveEmail = (customerEmail) => {
  // pretend we are saving to a database here
  LlamaLogs.log({ sender: 'Domain Check', receiver: 'Database' })
}

---

微信搜索【前端全棧開發者】關注這個脫髮、擺攤、賣貨、持續學習的程序員的，第一時間閱讀最新文章，會優先兩天發表新文章。關注便可大禮包，準能爲你節省很多錢！