原文: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将应用 senderreceiverisError 属性中提供的名称,主动将应用程序中的流动可视化为一系列在组件之间挪动的点。

在上面的图形中,咱们能够看到应用无效电子邮件对服务器运行几次调用以及导致谬误的调用的后果。

调试

比可视化图表中的流动更好,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 = 3000app.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' })}

微信搜寻【前端全栈开发者】关注这个脱发、摆摊、卖货、继续学习的程序员的,第一工夫浏览最新文章,会优先两天发表新文章。关注即可大礼包,准能为你节俭不少钱!