DEV Community: korey 🇳🇬

FILE LOGGING IN NODEJS

korey 🇳🇬 — Mon, 18 May 2020 07:12:22 +0000

LOGGING IN NODEJS.

The problem

Keeping the interaction history with the application is quite important in every application if we don't keep the logs the following occurs

We are unable to track errors on production and their causes
We are unable to monitor our system and be sure if some bugs or some functionality our users complain of is true.
We are unable to obtain the transaction history with the application.

LOGGING CONFIGURATION

npm i winston
npm i app-root-path

we create a logger.js file and add the following

import  *  as  winston  from  'winston';
import  'winston-daily-rotate-file';
import  appRoot  from  'app-root-path';

const  logger = winston.createLogger({
    transports: [
        new  winston.transports.DailyRotateFile ({
        filename:  'application-%DATE%.log',
        dirname:  `${appRoot}/logs/`,
        level:  'info',
        handleExceptions:  true,
        colorize:  true,
        json:  false,
        zippedArchive:  true,
        maxSize:  '20m',
        maxFiles:  '14d'
    })
],exitOnError:  false});

export  default  logger;

For the above, we configured the logs to do the following

create a new instance of the Winston logger

const  logger = winston.createLogger({})

We configured new transport which is the medium we want to use to log our file called winston.transports.DailyRotateFile, our transport can also be to the console. we set our transport attributes to the following

    transports: [
        new  winston.transports.DailyRotateFile ({
        filename:  'application-%DATE%.log',
        dirname:  `${appRoot}/logs/`,
        level:  'info',
        handleExceptions:  true,
        colorize:  true,
        json:  false,
        zippedArchive:  true,
        maxSize:  '20m',
        maxFiles:  '14d'
    })

log file will be created with name application-date.log
logs will be saved into a log folder in our root directory
Each log file will contain the loggs of the application in a day
After a day the log file will be zipped to keep our growing file system in check
After 14days we'll configure our logs to be archived.

For the winston logger we have various log level which are

const  levels  =  { 
 error:  0, 
 warn:  1, 
 info:  2, 
 verbose:  3, 
 debug:  4, 
 silly:  5 
};

If any level is chosen the logger will log errors less than or equal to this level.

In the Entry of the application, we add the logger to the error middleware to enable all request and response and error to be logged in the application

import  logger  from  './logger.js';

app.use((err, req, res, next) => {
logger.error(`${err.status || 500} - ${err.message} - ${req.originalUrl} - ${req.method} - ${req.ip}`);
res.status(500).send('server error, this will be resolved shortly!')
})

we can optionally add our logger to our controller to log errors

we create a separate file called serverResponse

import  logger  from  './logger';
/**
* @name  serverResponse
* @param  {Object}  res express response object
* @param  {Number}  code status code to return
* @param  {Ojectb}  data object with response details
* @returns  {JSON} JSON response with status and response information
*/
const  serverResponse = (req, res, code, data) => {
logger.info(`${req.originalUrl} - ${req.method} - ${req.ip}
- ${code} - ${JSON.stringify(data)}
`);
res.status(code).json({ ...data });
}

export default serverResponse;

This file will be used as a helper in our application to return our responses at the same time log the response to prevent repetitive code in the codebase.

Below is how it can be used in a typical controller

import  serverResponse  from  './serverResponse';
class  Auth {
/**
* @static
* @param  {JSON}  req
* @param  {JSON}  res
* @memberof  Auth
*/
static  async  login (req, res) {
serverResponse(req, res, 200, {msg: 'login successful'});
    }
}

HOW TO SETUP MSSQL ON MAC/LINUX OS USING DOCKER AND AZURE DATA STUDIO

korey 🇳🇬 — Wed, 15 Apr 2020 10:39:37 +0000

Ensure you have docker setup on your machine. Follow this link to setup docker on your machine docs.

Pull the mssql ubuntu image from the docker hub.

sudo docker pull mcr.microsoft.com/mssql/server:2019-CU3-ubuntu-18.04

After that then enter the following command

sudo docker run -e "ACCEPT_EULA=Y" -e "SA_PASSWORD=<YourStrong@Passw0rd>" \ -p 1433:1433 --name sql223 \ -d mcr.microsoft.com/mssql/server:2019-CU3-ubuntu-18.04

Ensure you replace <YourStrong@Passw0rd> with your password

-p indicates your port
--name specifies the name of your container

Run the command below to view all containers currently running on your machine.

sudo docker ps -a

The GUI tool we'll be using is Azure Data Studio

Follow the link and download the azure data studio.

currently, these are our details.
Password: This is what we declared in SA_PASSWORD as earlier.
Username: this value is sa
Server: localhost

Then fill out these details in Azure data studio.

Lastly, since we might want to create a new database in the azure data studio
Enter the following in the new Query section of the dashboard.

IF NOT EXISTS (
   SELECT name
   FROM sys.databases
   WHERE name = N'DemoDB'
)
CREATE DATABASE [DemoDB]
GO

The above command creates a database called DemoDB. you can connect to this database and run various actions like migrations.

To connect to the DemoDB database we created, below is a typical connection string.

      String connectionString = @"
      Server=127.0.0.1;
      Database=DemoDB;
      User Id=sa;
      Password=yourPassword
   ";

Delegates in C# SIMPLIFIED

korey 🇳🇬 — Wed, 05 Feb 2020 02:14:13 +0000

Delegates in c# is a concept which confuses some developers, if you fall into this category, worry not this article is meant to answer the following questions:

what are delegates?
why do I need to use delegates?
How to use delegates.

What are delegates?

Delegate is a reference type to methods in c#. It's like a pointer to a function. it holds the reference of a method.

With delegates you can do the following;

Call All Methods attached to the delegates at once whenever the delegate is called.
Add more methods to delegates at runtime
Remove existing methods Added to delegates at runtime

After I give the above answer I often get the following question
how are delegates different from nested function calls?
Delegate is different from nested function calls because it enables us to add or remove methods to the delegate to be executed at run time.

Why do we need to use delegates

Open Closed Principle: this means open for extension and closed for modification. delegates ensure once you implement your method, you can add more functionality to such a method without refactoring such a method. All you need to do is to add more methods to the delegate handler.
Pass Methods as parameters to other methods i.e. Callbacks in c#
You want to call two or more methods, same in signature but reside in different classes at the same time whenever something happens.
Cleaner Architecture

How To Use Delegates

I'll show a real-world example of where we might consider using delegates. You might want to report the health status of your application. and you want the following to happen whenever the report is provided.

Log the health status in a file.
Send an email containing the health status to your admin.
Send an SMS containing the health status to the admin.

All the above at the same time.


  private delegate void OnReport(string Message);
  private OnReport _onReport;

from the above, we declare our delegate using the delegate keyword.


  public void AddReportHandler(Action<string> action){
    _onReport += new OnReport(action);
  }

We added the Handler which is used to add more More methods to our delegates.

Note the parameter type of the handler is of type Action. this parameter type could be of type Func. These are known as generic delegate types.

The primary difference between Action and Func is that Action is used for method signatures that return a void, while Func is used for method signatures that have a return value.

  public void Report(string healthStatus) {
    if(_onReport != null) {
      _onReport(healthStatus);
    }
  }

We declare a single method Report, which would execute all functions appended to the delegate.

Here is the full implementation

using System;

class MainClass {
   static public void Main(String[] args) 
    { 
   var appHealth =  new HealthMonitor();

    appHealth.AddReportHandler(message => {
      Console.WriteLine($"Logging app health status on a file Logic - {message}");
    });
     appHealth.Report("healthy"); //prints to file and sends mail logic executes
     appHealth.RemoveAllReportHandler(); //we remove all added functions
     appHealth.Report("Not healthy"); // output will be empty here
    } 
}

public class HealthMonitor{
  public HealthMonitor() {
    Email(); //Add append email sending logic to the delegate
  }

  private delegate void OnReport(string Message); //declare the delegate
  private OnReport _onReport; 

  public void AddReportHandler(Action<string> action){
    _onReport += new OnReport(action);
  }

  // will remove all method appended to the delegate when called
  public void RemoveAllReportHandler(){
     _onReport = null;
  }

  public void Email() {
    this.AddReportHandler(message =>
     Console.WriteLine($"Logging app health status via email - {message}"));
  }

  public void Report(string healthStatus) {
    if(_onReport != null) {
      _onReport(healthStatus);
    }
  }
}

You can choose to Run the code on Repl.it

HOW TO BUILD A REUSABLE AND RESPONSIVE MODAL IN REACT FROM SCRATCH

korey 🇳🇬 — Sun, 08 Dec 2019 07:08:32 +0000

Source code to this tutorial is found here

Adekoreday / Custom-React-Modal

Custom modal in react

A custom modal was implemented on this repo. Its quite easy with only few lines of code.

Available Scripts

In the project directory, you can run:

npm start to start the project

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Tutorial on Dev.to

this project was bootstrapped using create react App

View on GitHub

Building a modal in react is challenging, most especially for beginners.

The question to ask is why would we want to implement a modal component from scratch instead of relying on the existing react modal component library?

It helps to understand how the modal component works under the hood.
External components tend to increase the overall project size, Building your reusable component ensures you have only what you need in your project i.e. not handling other scenarios that might come with an existing pre-built component which you might not need.

Implementing the Modal component

we create a modal.js file and add the following first

import React from 'react';
import './modal.css';

const Modal = (props) => {
  const { closeModal } = props;
  return (
    <div className="overlay">
      <div className="content">
        { closeicon() }
        {props.children}
      </div>
    </div>
  );
};

export default Modal;

the above is almost all we need to implement the modal component, what I did was to make the content of our modal (div styled as a content) a child of its parent container (div styled as an overlay).

Also, note the children of the modal component would be rendered inside the content div.

Implementing the close icon function:

For the sake of this tutorial I used react font awesome icon.

npm i react-fontawesome

   const closeicon = () => (
    <FontAwesome
    name="times"
    onClick={closeModal}
    style={{
      color: '#000000',
      padding: '10px',
      cursor: 'pointer',
      backgroundColor: 'transparent',
      border: 0,
      position: 'absolute',
      top: '0.3rem',
      right: '0.5rem',
    }}
    />
  );

what I did from above is to create a function that returns a font-awesome icon. I added its onClick property. the value of the onClick property must be passed as props into the modal component.

The for the font awesome icon to be displayed add the following cdn to your public/index.html file

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Note: you can always choose to use an icon within your project and apply the above styling I used for my font-awesome icon and onClick property.

The whole component so far

import React from 'react';
import './modal.css';
import FontAwesome from 'react-fontawesome';

const Modal = (props) => {
  const { closeModal } = props;

  const closeicon = () => (
    <FontAwesome
    name="times"
    onClick={closeModal}
    style={{
      color: '#000000',
      padding: '10px',
      cursor: 'pointer',
      backgroundColor: 'transparent',
      border: 0,
      position: 'absolute',
      top: '0.3rem',
      right: '0.5rem',
    }}
    />
  );

  return (
    <div className="overlay">
      <div className="content">
        { closeicon() }
        {props.children}
      </div>
    </div>
  );
};


export default Modal;

From the above, we can see that closeModal function was passed as props to the modal component.

.overlay {
    position: fixed;
    display: block; 
    overflow: auto; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); 
    z-index: 999; 
    cursor: pointer;
  }

.content {
        margin: 15% auto;
        background-color: white;
        border-radius: 0.25rem;
        width: 50vw;
        padding: 2rem;
        position: relative;
  }

from the CSS style above, things to note is includes:

The overlay position property is fixed i.e. it's positioned relative to the viewport.
The content has 50vw i.e. would occupy 50% width of the viewport.

These properties ensure the modal can scale up or down and be responsive.

Making use of the modal component

import React,  { useState } from 'react';
import Modal from './modal/modal';
import './App.css';

function App() {
  const [status, setStatus] = useState(false);
  return (
    <div>
         { status && (<Modal closeModal={() => setStatus(false)}> <p>The content of the modal</p></Modal>)}
        <div className="container">
        <h2>This is the page content</h2>
        <button onClick={() => setStatus(true)}>Open Modal</button>
        </div>

    </div>
  );
}

export default App;

From the above, we rendered the Modal component conditionally.
Onclick of the button it changes the status of the modal and renders the modal component.

The function to close the modal is then passed as props into the Modal component as closeModal.