Original text: dev. To/bakenator

Author: bakenator

Wechat search [front-end full stack developers] pay attention to this hair loss, stall, sell goods, continue to learn programmers, the first time to read the latest articles, will be the priority of two days to publish new articles. Pay attention to the gift package, you can save a lot of money!

Do you want to know what’s going on inside the program? Do you want to visually examine its inner workings?

The GIF above shows an example of Llama Logs. It’s a new tool I created that lets you see the inner workings of your app in real time. It’s ready to go and you can start using it for free in your app.

Next, I’ll show you an example of how to use Llama Logs to display and debug errors that occur in a basic Express application.

start

I’ll write a basic fast application that receives a user’s E-mail via a URL parameter and saves it to a database if it is in the Llamalogs.com domain.

The basic logic will be shown below

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

  if (isDomainOk) {
      saveEmail(customerEmail)
  }

  res.send('We received your email')})Copy the code

Now, the problem is, I’m going to write some code that checks that if the user forgets to include the @domain section in the email, it will make an error.

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
}
Copy the code

Use Llama Logs for visualization

Setting up Llama Logs is very simple. Once you have registered llamalogs.com, all you need to do is install the client via NPM and start and start logging, Llama Logs will automatically convert your Logs into interactive graphics.

So, for example, let’s update the domainCheck method to the following

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}}})Copy the code

We added a log case for both successful and failed results. Llama Logs then automatically visualize the activity in the application as a series of points moving between components, using the names provided in the sender, receiver, and isError properties.

In the figure below, we can see the results of several calls to the server using valid E-mail and the calls that lead to errors.

debugging

Llama Logs allow you to retrieve data from errors in real time, much better than visualizing activity in a chart.

Remember in the domainCheck method we attached this property to the Llama Log?

message: `input: ${customerEmail}; Error: ${e}`.Copy the code

By using this message property, this means that when we hover over the red error point, it will display the message. The figure below shows me stuck on an error, which indicates that the request has the email parameter == “JD” and lacks the email domain.

By using Llama Logs to visualize errors in your system, you can find the source of errors faster and easier than ever!

For more information

For more information, please visit LlamaLogs.com. The app is free and available today. If you have any questions, please feel free to contact me at [email protected].

The complete code

I think this is a small Express application and the easiest way to do it is to include all the code in this blog post.

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'})}Copy the code