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