DEV Community: Henok Tsegaye

Handling Error in express application using typescript

Henok Tsegaye — Sun, 04 Dec 2022 05:21:02 +0000

This is going to be a short blog on handling error in express using typescript.

In this blog I will show how you can handle error gracefully in express.
Express is one of the most famous Node.js Frameworks.

Errors can be divided into two categories in Node.js:

Operational errors (e.g. database connection error, invalid user input, etc.)
Programming errors (e.g. syntax error, reference error, etc.)

Handling Programming Errors

Programming errors are usually not handled in Node.js. When they occur Node.js process is terminated. This is because programming errors are usually not recoverable and the process should be terminated to avoid further damage.
but we can listen to unhandledRejection and uncaughtException events to handle programming errors. But it is recommend to just let the process crash and restart it using a process manager like pm2

// unhandledRejection
process.on('uncaughtException', (err) => {
  // ... log the error ...
  process.exit(1);
});

// un handled promise rejection
process.on('unhandledRejection', (err) => {
  // ... log the error ...
  // server.close will close the server and wait for all the connections to close
  server.close(() => {
    process.exit(1);
  });
});

Handling Operational Errors

Express works with the concept of middleware. Middleware is a function that has access to the request and response object.

Middleware's can

Modify the request and response object
End the request-response cycle
Call the next middleware in the stack

we also handle error in express using middleware.

let's learn all this by creating a simple express app.

Create a simple express app

First, we need to create a new directory and initialize a new node project.

mkdir express-error-handling
cd express-error-handling

# generates package.json with default settings
npm init -y

Now we need to install express and typescript.

# install dependencies
npm i express typescript ts-node

# install types for express as dev dependency
npm i -D @types/express @types/node

we are not going to explore more about configuring typescript but you need to create a tsconfig.json file, you can just run tsc --init to generate a default tsconfig.json file. We are going to use ts-node to run our typescript code.
next let's create a new file called index.ts and add the following code.

import express from 'express'

const app = express()

app.get('/', (req, res) => {
    res.send('Hello World')
})

app.listen(3000, () => {
    console.log('Server is running on port 3000')
})

now that we have a simple express app, let's add some error handling to it. We are going to create a new file called error.ts and add the following code.


// base error class
class BaseError extends Error {
    status: number
    isOperational: boolean
    constructor(message: string, status: number, isOperational = true) {
        super(message)
        this.status = status
        this.isOperational = this.isOperational
        Object.setPrototypeOf(this, BaseError.prototype)

    }
}

export {BaseError}

This will be the base class to other classes we are going to create to handle other type of errors.
In this error class we have a constructor that takes three arguments.
The first argument is the error message,
the second argument is the status code and
the third argument is a boolean value that indicates if the error is operational or not.

Let's add more error classes to our error.ts file.

// 404 error class
class NotFoundError extends BaseError {
    constructor(message: string) {
        super(message, 404)
        Object.setPrototypeOf(this, NotFoundError.prototype)
    }
}

// validation error class
class ValidationError extends BaseError {
    errorData: Record<string, string>[]
    constructor(data: Record<string,string>[]) {
        super("Validation Error", 400)
        this.errorData = data
        Object.setPrototypeOf(this, ValidationError.prototype)
    }
}

we can create as many error classes as we want. In this example I have created two error classes. The first one is the NotFoundError class and the second one is the ValidationError class.
next we need to create a middleware that will handle the errors.
Error Handler Middleware is a middleware that takes four arguments.
The first argument is the error object, the second argument is the request object, the third argument is the response object and the fourth argument is the next function.
i.e If you don't provide 4 arguments to a middleware, express will treat it as a normal middleware and not an error handler middleware.

we now create a new file called errorHandler.ts and add the following code.

  // error handler middleware
const errorHandler = (err: Error, req: Request, res: Response, next: NextFunction) => {
    if(err instanceof ValidationError) {
        return res.status(err.status).json({
            status: 'fail',
            message: err.message,
            data: err.errorData
        })
    } else if (err instanceof BaseError) {
      if( err.isOperational) {
        return res.status(err.status).json({
            status: err.status < 500 && err.status >= 400 ? 'fail' :'error',
            message: err.message
        })
        // 
      } else {
        // log the error
        console.log(err)
        // send generic error message
        return res.status(err.status).json({
            status: 'error',
            message: 'Something went wrong'
        })

      }
    }
}

export {  errorHandler }

now that we have created the error handler middleware, we need to add it to our express app. We can do this by adding the middleware using app.use method.
let's add the following code to our index.ts file.

app.use(errorHandler)

now we can use our error classes in our controllers and/or middleware to throw errors.
let's add a new route to our index.ts file.

// check if id is a number
const validateId = (req: Request, res: Response, next: NextFunction) => {
    const id = req.params.id
    if(isNan(id)) {
        next(new ValidationError([
            {
                id: 'id needs to be a number :( '
            }
        ]))
    }
    next()
}

app.get('/users/:id', validateId, (req, res) => {
    const id = req.params.id
    if(id === '1') {
        res.send('User 1')
    } else {
        next(new NotFoundError('User not found'))
    }
})

now we can test our app by running the following command.

npx ts-node index.ts

Now when we hit the /users/2 route, we will get the following response.

{
    "status": "fail",
    "message": "User not found"
}

with 404 status code.

and When we hit the route /users/unknown we will get the following response.

{
    "status": "fail",
    "message": "Validation Error",
    "data": [
        {
            "id": "id needs to be a number :( "
        }
    ]
}

and We have successfully created a simple express app with error handling.

We have used Jsend to format our API response.
This is it for this blog. I hope you enjoyed it. If you have any questions, feel free to email it :), I am not joking I don't have a comment section on my blog yet.

Number types in Javascript

Henok Tsegaye — Mon, 26 Sep 2022 13:47:28 +0000

Welcome to Understanding Javascript basics series. On this blog we will try to understand number types in Javascript.

let's get to it 🙂

Any numeric value in javascript is expressed by the Number primitive data type and its represented as a floating point number.

This is regardless the size of the number( how many bits the number take to store the value), the number sign (positive or negative ) whether or not the number has
decimal point. In general Whole numbers and floating numbers are all represented as Number.
which might be strange coming from stablished programming languages like Python, Java and C++.
For example in Python, number data values are represented as Integer , Float or Complex types, according to the value.

Number is are mostly expressed as Numeric literals.
Numeric literals can be written in decimal, hexadecimal, octal, and binary forms.

// Decimal
let decimal = 10;

// Hexadecimal prefix 0x
let hex = 0xf00d;

// Octal prefix 0o
let octal = 0o744;

// Binary prefix 0b
let binary = 0b1010;

Note that when staring with 0 when expressing numeric literals the number would be interpreted as octal when each number digit is between 0 and 7, if not it would be interpreted as decimal.
When expressing a numeric literal if there is a problem with the literal expression javascript would throw a SyntaxError.

Exponential notation is also supported.


// exponential notation

2 ** 2; // 4
2 ** -2; // 0.25

/*
 * exponential base 10 
*  notation denoted as  BeN
 * where B is the base and N is the exponent
 * while e is the exponentiation notion - which is the same as 10^N
 */

let exponential = 1.5e3; // 1500
let negativeExponential = 1.5e-3; // 0.0015

In Javascript numbers are stored as binary with the IEEE 754 standard with binary64 or double precision format.

Each Number Data type have 64 bit memory space which is equivalent to maximum number value of 2^64 which is equal to 18 quintillion. That is a huge number
but one bit has to be used to represent the sign of the number , since both positive and negative numbers are represented in Number data type, we call that a sign bit.
If a sign bit is 0 it means the number is positive and if it's 1 its a negative number.
Also more bit has to be used to represent the decimal point / exponent in a number which has 11bits in it, we call those exponent bits, its because of those bit that we say in javascript every number is represented as a decimal number.
The fraction / mantissa bits holds the actual value in the number, which is 52 bits in size which gives us about 9 quintillion including the sign bit, which is still a huge number and should be enough for common mathematical operations but if you are in need of a bigger integer you can use bigInt

IEEE 754 standard define behaviors in javascript number like Infinity and NaN which we will look in section below.
The standard has 5 exceptions which we should be aware of

Invalid Operation:

// Invalid operation example
// this is invalid operation because the result is not a real number but a complex number

sqrt(-1); // NaN

Zero division

// zero division example

5 / 0; // Infinity

Overflow

// overflow example

Math.pow(2.54); // Infinity

Underflow

// Underflow example

Math.pow(2, 54); // -Infinity

imprecise values

// imprecise value example

0.1 + 0.2; // 0.300000000009

9007199254740992 + 1; //9007199254740992

In javascript all decimal fractions can't be precisely represented which causes problems while operating on decimal point numbers.
The above example with the imprecise value is caused by this issue.
It is sometimes hard to get precise values from decimal point computation / expression and its always safe to assume that values are approximation instead of precise value.

For Integer numbers its always safe to assume precise value as long as we don't overpass / underpass the safe integer limit Number.MAX_SAFE_INTEGER or Number.MIN_SAFE_INTEGER which is about 9 quintillion.

To read more about why that is, I recommend reading this blog

In javascript we have two zeros 0 and -0. 0 is a positive number and -0 is a negative number.
0 and -0 are equal but not identical.


// 0 and -0 are equal but not identical

0 === -0; // true

4 * -1 * 0; // -0
4 * 1 * 0 // 0
0 + -0 // 0
- 0 - 0; // -0
0 - 0  // 0
0 * 0  // -0
-0 / 0; // NaN

Number Object

Javascript has a wrapper object for Number data type named Number which defines some static values and methods.
More about primitive wrapper objects here

const numberObj = Number("32");
// numberObj is an object

console.log(numberObj);
// 32

numberObj.valueOf(); // 32

Javascript Number object define two important static values named NaN and Infinity.

Infinity

Infinity is also a member of the global scope object.
A global object always exist in the global scope. It's because of this object that we can access Windows object in browsers and global in Nodejs.
As the name suggests Infinity is a number that is greater than any other number.

// Infinity is a static value of the Number object

Infinity; // Infinity in the global scope
Number.POSETIVE_INFINITY; // Infinity
Number.NEGATIVE_INFINITY; // -Infinity

As mentioned above Overflow and underflow exceptions will return positive and negative Infinity respectively.

Infinity is reached when your expression returns more than the actual limit javascript numbers can hold and that is 1.7976931348623157e+308 or -1.7976931348623157e+308.

// Underflow example

-1.7976931348623157e308 * -2; // -Infinity

// Overflow example

1.7976931348623157e308 + 2; // Infinity

To check if a number value is not Infinity we can use the Number.isFinite() function which returns true if the value is finite and false if the value is Infinity or NaN.
The global isFinite() function is similar to Number.isFinite() but it will try to convert the value to a number before checking if it's finite.
To use this function Number.isFinite we need to make sure that the value is a number if its not, it will always return false, we can use the typeof keyword to check if the value is a number.

// check if a number is finite

if (typeof value === "number" && Number.isFinite(value)) {
  // do something
}

To specifically check if a value is Infinity we can use the combination of Number.isFinite() and Number.isNaN() functions.

// check if a number value is Infinity

if (typeof value === 'number' && !Number.isFinite(value) && !Number.isNaN(value)) {
  // value is Infinity / -Infinity
}

// we can also check if the value is infinity using equality operator

if (value === Infinity || value === -Infinity) {
  // value is Infinity / -Infinity
}

Here are some properties of the Infinity value

Infinity arithmetic with a finite number is always Infinity when Infinity is in the left side of the operation , but the result might have a different sign.
when using the modulo operator with Infinity the result is always NaN since that doesn't make sense.

// Infinity arithmetic with a finite number

Infinity * 3; // Infinity
Infinity * -3; // -Infinity
Infinity + 3; // Infinity
Infinity - 3; // Infinity
Infinity / 3; // Infinity

// modulo operator with Infinity is always NaN

Infinity % 3; // NaN

Infinity operation with finite numbers when Infinity/-infinity is on the right hand side of the operation.

// Infinity arithmetic with 0

0 / Infinity; // 0
0 / -Infinity; // -0
Infinity / 0 // Infinity
-Infinity / 0 // -Infinity

4 / Infinity // 0
-4 / Infinity; // -0
4 - Infinity; // -Infinity
4 + Infinity; // Infinity
4 * Infinity; // Infinity
4 % Infinity; // 4

NaN

NaN is a special number type in javascript. NaN like Infinity is a member of the global scope object and also a static value of the Number class.
NaN stands for Not a Number.

There are four operations that will return NaN.

Failed number conversion
Math operations where result is not a real number.
Indeterminate calculation
Operation with NaN

// Failed number conversion

Number("hello"); // NaN
Number("32hello"); // NaN

// Math operations where result is not a real number

Math.sqrt(-1); // NaN , i.e this operation would result in a complex number not a real number
Math.log(-1); // NaN

// Indeterminate calculation

0 / 0; // NaN
0 * Infinity; // NaN
Infinity / Infinity; // NaN
Infinity - Infinity; // NaN

// Operation with NaN

NaN + 1; // NaN
NaN - 1; // NaN
NaN * 1; // NaN
NaN / 1; // NaN
//hello would be converted to NaN and then the operation would be performed
4 * "hello"; // NaN

Here are some behaviors of NaN.

NaN is not equal to any value including NaN itself.
NaN when used with arithmetic operators will always return NaN.
NaN when used with comparison operators will always return false.

// NaN is not equal to any value including NaN itself

NaN === NaN; // false
NaN !== NaN; // true

// NaN when used with arithmetic operators will always return NaN

NaN + 1; // NaN
NaN - 1; // NaN
NaN * 1; // NaN
NaN / 1; // NaN

// NaN when used with comparison operators will always return false

NaN > 1; // false
NaN < 1; // false
NaN >= 1; // false
NaN <= 1; // false
NaN == 1; // false
NaN === 1; // false
NaN != 1; // true
NaN !== 1; // true

Number.isNaN() function is used to check if a value is NaN.
This function is different from the global isNaN() function which will try to convert the value to a number and then check if it's NaN.
Number.isNaN() will only check if the value is NaN and will not try to convert it to a number. If the value being checked is not a number it will return false.

// check if a value is NaN

Number.isNaN(NaN); // true
Number.isNaN(1); // false
Number.isNaN("hello"); // false

// isNaN() will try to convert the value to a number and then check if it's NaN

isNaN(NaN); // true
isNaN(1); // false
isNaN("hello"); // true

This has been a long article, We will carry on our journey of understanding primitive types in javascript. I hope you enjoyed this one. Until next time ✌🏽.

Understanding Javascript primitive types

Henok Tsegaye — Thu, 01 Sep 2022 20:53:13 +0000

Welcome to the Understanding Javascript basics series. On this blog we will try to understand primitive types in Javascript.

let's get to it 🙂

Javascript has primitive types (primitive values) that are directly represented at the lowest level of the language implementation.
Javascript in general has two types of data types - primitive and non-primitive (Object).
Anything other than primitive types in JavaScript is an object. Functions, classes, arrays and user defined types are all objects.
You can tell this by using the typeof operator which might not be accurate at a time but it's a good enough approximation.

typeof 'hello' // string
typeof true // boolean
typeof 1 // number
typeof {} // object
typeof null // object
typeof undefined // undefined
typeof function () {} // function
typeof Symbol('hello') // symbol

But here typeof null is an object which is not actually true since null is a primitive type.

typeof null // object

This is considered a bug in javascript.
Javascript primitive types are not objects and their values are immutable. but variables can be reassigned to a new value.
Doing so will create a new variable and the garbage collector will clean up the old one.

example of primitive type immutability

let a = 1;
let b = a;
// changing a will not change b
a = 2;
console.log(a); // 2
console.log(b); // 1

As both a and b are primitive types, they are not related to each other.
when copying b from a Javascript will copy the value of a and assign it to b , so changing one will not change the other.

Let's dive deep into this

let a = 1;

Initializing a variable with a primitive type will create a new value in stack and assign the variable to it. JavaScript creates primitive types in stack with fixed space while Objects are created in heap memory, This is because objects are mutable and can be changed at any time taking up more memory.
This is true because you can mutate objects adding new properties or changing existing ones.

let a = 1;
let b = a;

Copying a primitive type will create a new value in stack and assign the variable to it.At this point both a and b are pointing to different values in the stack.

let a = 1;
let b = a;
a = 2;

Changing the value of a will not change the value of b since they are pointing to different address in the stack.At this point GC( Garbage Collector) will remove unreferenced addresses from the stack.

Comparing primitive types to object 👇🏾

let a = {
    value: 1
};
let b = a;
// changing a will change b as they have the same reference
a.value = 2;
console.log(a.value); // 2
console.log(b.value); // 2

As you can see in the above example, Objects variables don't hold values but references, so changing a will change b as they have the same reference.

Well if primitives are not Objects you might ask how are we accessing properties off them like this example below ?

'hello'.length // 5

This is not a bug in javascript 😄.

This is actually one of the features of javascript. Primitives are not Objects but they act like they are 🤔 ? Well here is how it works

Javascript maps out primitive types to Wrapper Objects which is the reason we can see the length property of a string.
Which will actually create a new object with value "hello", so you can access the length property ( or any-other String property ) off that object. This is actually true for Other two Primitive types Boolean and Number .

let strObj = new String('hello')
typeof strObj // object
strObj.length // 5

// access the value of the object , which is the primitive value
strObj.valueOf() // hello
typeof strObj.valueOf() // string

Boolean Object

let boolObj = new Boolean(true)
typeof boolObj // object
boolObj.valueOf() // true
typeof boolObj.valueOf() // boolean

Number Object

let numObj = new Number(1)
typeof numObj // object
numObj.toFixed(2) // 1.00

numObj.valueOf() // 1
typeof numObj.valueOf() // number

But once we had access to the property of the object, garbage Collector will remove unused objects from memory.

Javascript has 7 primitive types:

undefined
null
boolean
number
string
symbol - es2015
bigint - es2020

The symbol data type is new in es6.
bigint is new in es2020.

JavaScript is different in the way it treats Numbers and Strings ( they are represented as a primitive type on their own) which
is not as common in stablished programming languages like Java, Which for example represent numbers differently according to their size and properties.
Float numbers have a float type in Java and integers as int while in javascript they are both just represent as Number.

We will dive deeper into those primitive types and javascript implementation difference with other programming languages in the next blog of this series.

Big thanks for the people whom helped me review the wording in this blog.

Using nprogress with next-js to show page is loading

Henok Tsegaye — Sat, 04 Sep 2021 16:16:53 +0000

using next js with nprogress

using next js should be one of the most awesome thing ever, i have used it and i loved it.

so nprogress had support for next js and other js frameworks

here is how it works.
put this in _app.js.

import NProgress from 'nprogress';
import Router from 'next/router';
import 'nprogress/nprogress.css';

NProgress.configure({ minimum: 0.3, easing: 'ease', speed: 800, showSpinner: false, });

Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());

Next js is the best option for static sites

Henok Tsegaye — Fri, 21 Dec 2018 08:33:09 +0000