Christian Nwamba

Log management is an essential part of software development process as it serves us a secondary data source that is readily available. The logs gives us a comprehensive record of our application’s behind the scenes activities to provide the evidence needed to ascertain the depth of any problem when you decide to investigate the system’s issue or security threat.

In this post we’ll demonstrate how to integrate LogDNA to track events from a basic Node.js application. We will log each sign in attempt for our basic app.

Getting started

Manifold makes it easy for developers working remotely to manage projects and services by providing a single source of truth to unify all external project services under one account. In this post, we’ll use Manifold to set up our project and generate single all-in-one project credentials.

Signup

First you’ll need to create an account on Manifold and Authenticate your account to get started.

Install Manifold

Next, you need to install the Manifold CLI tool, simply open a terminal window and run the following command:

1brew install manifoldco/brew/manifold-cli

Create a new project

Now that you have installed Manifold locally, let’s go ahead and create a new Manifold project. Login to your Manifold dashboard and create a new project:

s 448926BC66B35F5D244CB30C6883AB3F269E9EE4B8EE385D9408478FDD763352 1548868274332 Screen+Shot+2019-01-30+at+5.43.37+PM

Give the project a name that suits your needs and click the Create project button. This will launch a new screen like this:

s 448926BC66B35F5D244CB30C6883AB3F269E9EE4B8EE385D9408478FDD763352 1548868369170 Screen+Shot+2019-01-30+at+5.54.56+PM

Having created the project, let’s add the LogDNA resource to it. Click the Add a new resource button and select LogDNA from the list of available services. Give the resource a preferred name. In my case, I’ll call it logdna-resource and click the Create resource button to create my new LogDNA account.

s 448926BC66B35F5D244CB30C6883AB3F269E9EE4B8EE385D9408478FDD763352 1548868190913 Screen+Shot+2019-01-30+at+6.07.25+PM

We have successfully added the LogDNA resource to our project. You can scroll down the page to view the project credentials and copy them for later use (however, I'll demonstrate using the Manifold CLI to access these securely).

The LogDNA dashboard will contain all our log data and equally allow us to perform operations on them. We’ll open it later to view our logs but next, let’s create our Node project.

Set up Node project

Haven completed the project set up on Manifold, it’s time to build our Node project to communicate with Manifold and send our logs across. By design, we intend to build a form to collect user details and register them to a database, however, in our case, we will be logging the users to our LogDNA management system where we can visualize the logged data.

Create project To make this process smooth, i have created a repository with starter files for this project, clone it and we’ll update the project files gradually. Open a terminal and run:

1$ git clone https://github.com/christiannwamba/node-logna

Next, change directory to the project folder and install the server dependencies like so:

1$ cd node-logdna
2$ npm install

Since we’ll be building a user registration form for our app, open the index.html file in the views folder and update it with the code below:

1//views/index.html
2<!DOCTYPE html>
3<html>
4 <head>
5 <title>Manifold Node.js Logging Demo</title>
6 <meta name="description" content="A cool thing using Manifold">
7 <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
8 <meta charset="utf-8">
9 <meta http-equiv="X-UA-Compatible" content="IE=edge">
10 <meta name="viewport" content="width=device-width, initial-scale=1">
11 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
12 <link rel="stylesheet" href="/style.css">
13 </head>
14 <body>
15 <header class="text-center">
16 <h3>
17 User registration
18 </h3>
19 </header>
20 <main>
21 <div class="container center_div">
22 <form>
23 <form action="/api/log" method="POST" name="userdata" class="text-center">
24 <div class="form-group row">
25 <label for="name" class="col-sm-2 col-form-label">FullName</label>
26 <div class="col-sm-10">
27 <input id="name" name="name" type="text" class="form-control" placeholder="Full Name">
28 </div>
29 </div>
30 <div class="form-group row">
31 <label for="email" class="col-sm-2 col-form-label">Email</label>
32 <div class="col-sm-10">
33 <input id="email" name="email" type="email" class="form-control" placeholder="Email">
34 </div>
35 </div>
36 <div class="form-group row">
37 <label for="password" class="col-sm-2 col-form-label">Password</label>
38 <div class="col-sm-10">
39 <input id="password" name="password" type="password" class="form-control" placeholder="Password">
40 </div>
41 </div>
42
43 <div class="form-group row">
44 <div class="col-sm-10">
45 <button type="submit" class="btn btn-primary ">Register</button>
46 </div>
47 </div>
48 </form>
49 </div>
50 </form>
51 </main>
52 <script src="https://code.jquery.com/jquery-2.2.1.min.js"
53 integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
54 crossorigin="anonymous"></script>
55 <script src="/app.js"></script>
56 </body>
57</html>

If you open the index.html file on the browser at the moment, you should have this output:

s 448926BC66B35F5D244CB30C6883AB3F269E9EE4B8EE385D9408478FDD763352 1548872703004 Screen+Shot+2019-01-30+at+7.23.06+PM

Next, let’s add the functionality that will get the user form details and post to our server. Open the app.js file in the public folder and update it with the code below:

1//public/app.js
2$(function() {
3 $("form").submit(function(event) {
4 event.preventDefault();
5 var user = {
6 name: $('input#name').val(),
7 email: $('input#email').val(),
8 password: $('input#password').val()
9 }
10 $.post("/loguser", { userData: user }, function() {
11 $("input").val("");
12 $("input").focus();
13 });
14 });
15});

This will get the values of the form’s <input> elements, save them into the user object and post it to our server. If you open the server.js file, you’ll see this exact code therein:

1//server.js
2
3'use strict';
4require('dotenv').config();
5const express = require('express');
6const bodyParser = require('body-parser');
7const cors = require('cors');
8const Logger = require('logdna');
9
10const log = Logger.setupDefaultLogger(process.env.KEY, {});
11const app = express();
12 app.use(bodyParser.json());
13 app.use(bodyParser.urlencoded({ extended: true}));
14 app.use(cors());
15 app.use(express.static('public'));
16 app.get("/", function (request, response) {
17 response.sendFile(__dirname + '/views/index.html');
18 });
19 app.post('/loguser', (req, res) => {
20 log.log(req.body.userData);
21 res.json("User logged!");
22 });
23 app.listen(8000);
24 console.log('Serving on port 8000');

Notice: We installed logdna via npm and required it in our server file. When the user’s details arrives at the /loguser endpoint we defined on the client, we simply take the body of the request and log it using the LogDNA Logger.

Run app

Having completed the app, we’ll need it’s credentials on Manifold to run it. This is a good thing, with Manifold, we don’t have to copy the credentials, or create a separate .env file locally, Manifold handles all that for us. All we need to do is run this command:

1$ manifold run --project node-logging-demo 'npm run start'

This command will require you to login by running *manifold login* or *manifold oauth --github* to login with Github.

The manifold run command will grab the latest application credentials for us from Manifold, then we pass the -- project flag to identify which project we are referencing and finally pass the command that runs our server, npm run server in our case. We put the server command in quotes to help when your server command requires arguments to run. When you run the app, it’ll be live on localhost:8000 on your browser. Open it up and log users like so: s 448926BC66B35F5D244CB30C6883AB3F269E9EE4B8EE385D9408478FDD763352 1548930204319 ezgif.com-video-to-gif+49

To track login access logs for your application, open the LogDNA dashboard and navigate to the log views, and you will now now see a log for each login attempt:

s 448926BC66B35F5D244CB30C6883AB3F269E9EE4B8EE385D9408478FDD763352 1550684181399 Screen+Shot+2019-02-20+at+6.25.24+PM

There you have it

You've created a simple Node.js application which stores its application logs with LogDNA. You can now take advantage of all native LogDNA features with the centrally logged data such as search, analysis, indexing etc.

Now go try LogDNA out for your own application!

LogDNA
LogDNAReal-time log aggregation, monitoring, and analysis from any platform, at any volume
Try Freearrow_right
Stratus Background
StratusUpdate

Sign up for the Stratus Update newsletter

With our monthly newsletter, we’ll keep you up to date with a curated selection of the latest cloud services, projects and best practices.
Click here to read the latest issue.