### What is React Error Boundary 

According to react documentation...Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. 

> If I am describing this from my experience...
Everyone knows that when creating a React app, it is a fact that Errors / Bugs come when the app is built and put into production. In case of such an error, the entire React app will crash. Imagine that when such errors/bugs appear in an app that has been put into production, it is a big inconvenience to users and our app fails. If we want to show a fallback UI without crashing our app in case of such an error, we can use the Error Boundary

Let's create react application and crash it.😁
![raycast-untitled.png](https://media.graphassets.com/4cR3nQ8YTnaDYkQ26UtS)
When the counter is equal to 6 our app will crash like the below screen.
![Animation.gif](https://media.graphassets.com/fl2CcIhKRaa3U81gU2ed)

You can see our application went to a blank page and crashed. This can't happen when our app is at the production level.

### So let's fix this issue using  React Error Boundary 🤭🫡

We can create our Error Boundary code like this.
![raycast-untitled (1).png](https://media.graphassets.com/6dljp2fvQaCNOVcQIaL6)
after creating this code we need to wrap this component using others like this.
![raycast-untitled (2).png](https://media.graphassets.com/qt07GiV4TYysLJchSMU3)

That's all. Now let's see what happens to our code with an error boundary.🤭
![Animation2.gif](https://media.graphassets.com/UNG4OztTgSpQuqRm0wQT)

> 

> You see... The blank page is gone and our app is not crashing anymore. We can use an error boundary like this and we can avoid our app crashing or showing blank pages to our users.


Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead..

What Is and How to use  react  React Error Boundary

Worker threads were initially added as an experimental feature in Node.js 10. x.x and became stable in Node.js 12. x.x. Node.js, designed for single-threaded execution, is ideal for handling non-blocking I/O operations. However, it faces challenges with CPU-heavy tasks, as these tasks can cause the main thread to become blocked, hindering the execution of other operations.

In another word when it comes to CPU-intensive tasks, Node executes blocking code in the main thread and blocks other code for execution. 

**As a solution to this Node introduced Worker threads in Node Js 12 .x.x.**


> When performing intensive synchronous operations, such as complex calculations on a large dataset, it can severely impact performance. A synchronous block of code that takes a long time to execute can block the rest of the application. For instance, imagine a scenario where a calculation takes 10 seconds to complete. This delay can lead to significant bottlenecks, affecting the system's responsiveness and ability to handle multiple tasks efficiently. Here are three examples to illustrate this issue

1. Web Server Request Handling
2. Data Processing in a Background Service

We all know Node js (Javascript) is not meant for this kind of CPU-intensive task. If we do something like this in Node Js it will freeze the UI in the browser and queue any I/O event in Node.js.

### Now Let's see how Worker threads are solution for this issue in node js

> Worker threads in Node.js are similar to WebWorkers in the browser. Browsers have long used Workers to run scripts in parallel, allowing for multitasking. In Node.js, worker threads provide a way to execute JavaScript code concurrently, enabling efficient handling of blocking operations.

> One effective method to prevent a blocking operation from halting the entire application is to run it in a separate thread. By doing so, the main thread remains available to handle other tasks while the intensive operation runs independently. This approach is utilized in Node.js with Worker Threads.

Here’s a clearer explanation:

**1. Understanding Worker Threads**:  Worker threads allow JavaScript code to be executed in parallel, much like how WebWorkers function in browsers. This enables multiple tasks to be performed simultaneously, improving efficiency and responsiveness.

**2. Benefits of Using Separate Threads** : Running a blocking operation, such as a complex calculation, in a separate thread ensures that the main thread remains unblocked. This means that the application can continue to respond to user interactions or handle other requests while the intensive task is processed independently.

**3. Practical Example in Node.js**: Suppose you have a Node.js application that needs to perform a heavy computation, like data analysis on a large dataset. If this computation runs on the main thread, it will block the entire application, making it unresponsive. By using a Worker Thread, the computation can run in the background, allowing the main thread to continue handling other operations, such as serving web requests or responding to user inputs.

### Now Let's see how node js runs when it's only in a single thread.

> When a Node.js process starts, it includes several key components:
Single Process: A process is a global object accessible throughout the application, containing information about the execution context.

**1. Single Thread**: Node.js operates on a single thread, meaning only one sequence of instructions is executed at a time within a given process.

**2. Single Event Loop:** The event loop is crucial to Node.js's asynchronous capabilities. It enables non-blocking I/O operations by delegating tasks to the system kernel and handling them with callbacks, promises, or async/await. This is how Node.js manages to be efficient despite JavaScript's single-threaded nature.

**3. Single JavaScript Engine Instance**: This component is responsible for executing JavaScript code within the Node.js environment.

**4. Single Node.js Instance**: This is the program that runs Node.js code, enabling the execution of server-side JavaScript.

Each of these components plays a vital role in how Node.js operates, ensuring it can handle multiple tasks efficiently while remaining single-threaded.

### Now With the worker thread, it's  run like this

In contrast, worker threads in Node.js include the following components:

1. **Single Process:**
   There is still only one overall process.

2. **Multiple Threads:**
   Worker threads enable the use of multiple threads, allowing concurrent execution of different tasks.

3. **One Event Loop per Thread:**
   Each thread has its own event loop, enabling asynchronous operations within that thread.

4. **One JavaScript Engine Instance per Thread:**
   Each thread runs its own instance of the JavaScript engine, allowing parallel execution of JavaScript code.

5. **One Node.js Instance per Thread:**
   Each thread operates its own instance of the Node.js runtime, facilitating the execution of Node.js code concurrently across multiple threads.

![Node Worker Threds Example.png](https://media.graphassets.com/69TLOY8nQBSllhEtdREe)
*(Image Source : Internet)*

So this is how we can use multi-threading in Node js using worker thread.


What is a worker thread in Node Js and How does it work?

**If you have ever worked with Node JS or Express you have properly realized how tedious and haunting it can be to maintain and scale your applications.**

This is where NestJS comes into place. It uses modern development tools like Typescript and provides an out-of-the-box application architecture which allows developers and teams to create highly testable, scalable, loosely coupled, and easily maintainable applications.

###  Main reasons why nestjs chosen over other Node JS frameworks

**1. Three layer architecture**
![1_iO7R3erL7nquWs6vfm3cMA.png](https://media.graphassets.com/nbC6PAM1QGq4AneXR5lv)

This is three-layer architecture. It's men's NestJs split your application into separat parts.

1. Controllers: A controller’s sole purpose is to receive requests for the application and deal with routes.

2. Service Layer: This part of the block should only include business logic. For example, all the CRUD operations and methods to determine how data can be created, stored and updated.

3. Data Access Layer: This layer takes care and provides logic to access data stored in persistent storage of some kind. For example an ODM like Mongoose.

**2. TypeScript**

NetsJs used TypeSript for there codebase.which enables us developers to add types to our variables and provides compile errors and warnings based on them.

**3.Dependency injection**

Baiscly this idea is, dependency injection is a design pattern in which an object or function receives other objects or functions that it depends on. So NestJS provides it out of the box and even makes it easy to use it for creating coupled components.

**4.Modules**

Modules are the basic building block of each NestJS application and are used to group related features like controllers and services together. They are Typescript files decorated with the @Module() decorator.

![Modules_1.png](https://media.graphassets.com/F7LfiKfS8Sspneaps8dG)

Each application has at least one module, a root module. The root module is the starting point Nest uses to build the application graph - the internal data structure Nest uses to resolve module and provider relationships and dependencies. 

While very small applications may theoretically have just the root module, this is not the typical case. We want to emphasize that modules are strongly recommended as an effective way to organize your components. Thus, for most applications, the resulting architecture will employ multiple modules, each encapsulating a closely related set of capabilities.
![raycast-untitled.png](https://media.graphassets.com/UKkrnfS6iicqgdMREong)

**5.Controllers**

In Nestjs controllers are responsible for handling incoming requests and returning responses to the client. They are defined using the @Controller() declarator which takes the path for the primary route as its argument.

![Modules_1.png](https://media.graphassets.com/2na4Cx5KRdGkSbFkfkYz)

Each function inside the controller can be annotated with the following declarators:

- @Get() — Defines a get request
- @Post() — Defines a post request
- @Delete() — Delete request
- @Put() — Put request

**6.Providers**

Providers are a fundamental concept in Nest. Many of the basic Nest classes may be treated as a provider – services, repositories, factories, helpers, and so on. The main idea of a provider is that it can be injected as a dependency; this means objects can create various relationships with each other, and the function of "wiring up" instances of objects can largely be delegated to the Nest runtime system.

![Modules_1.png](https://media.graphassets.com/M6HgZeWvQ6SLSVCkxR8O)

Let's start by creating a simple CatsService. This service will be responsible for data storage and retrieval, and is designed to be used by the CatsController, so it's a good candidate to be defined as a provider.

![raycast-untitled.png](https://media.graphassets.com/2A4lNVIHSZWJVSO3mRFI)

**7.Pipes**

Pipes in NestJS are used to operate on the arguments of the controller route handler. This gives them two typical use cases:

- transformation: transform input data to the desired form (e.g., from string to integer)
- validation: evaluate input data and if valid, simply pass it through unchanged; otherwise, throw an exception when the data is incorrect

Nest comes with nine pipes available out-of-the-box:

- ValidationPipe
- ParseIntPipe
- ParseFloatPipe
- ParseBoolPipe
- ParseArrayPipe
- ParseUUIDPipe
- ParseEnumPipe
- DefaultValuePipe
- ParseFilePipe

Usage : - 

![raycast-untitled.png](https://media.graphassets.com/yS98YByFQi2w1ZwwFiCz)

**8. Lifecycle**

Every Nest application element has its own lifecycle which is composed of a variety of lifecycle hooks that can be used to provide visibility of these key states and the ability to act when they occur.

*Lifecycle events:*

Here are the four lifecycle sequences:

- OnModuleInit — Called once the host module has been initialized
- OnApplicationBootstrap — Called once the application has fully started and is bootstrapped
- OnModuleDestroy — Cleanup just before Nest destroys the host module
- OnApplicationShutdown — When the application gets shut down

Usage:
Each of these four lifecycle hooks is represented by an interface. That means that we just need to implement the interface in our component (class) and override the function.

Usage : - 

![raycast-untitled.png](https://media.graphassets.com/MUVaksTCRGmMv3VBUFgC)


*This is my experience about using nest js over other nodejs frameworks. To write this article I refer some articles on the internet to deliver the best Knowledge about this. 
So if this article helps you at some point, Don't forget to react to this article/ Comment on this and share this. See you in the next article.*


What Is and How to use react React Error Boundary

What is React Error Boundary

So let's fix this issue using React Error Boundary 🤭🫡

LEAVE A COMMENT OR START A DISCUSSION

MORE ARTICLES

What is a worker thread in Node Js and How does it work?

Why You Should choose NestJS over other Node JS frameworks🧐

What Is and How to use react React Error Boundary

What is React Error Boundary

So let's fix this issue using React Error Boundary 🤭🫡

LEAVE A COMMENT OR START A DISCUSSION

MORE ARTICLES

What is a worker thread in Node Js and How does it work?

Why You Should choose NestJS over other Node JS frameworks🧐

Weekly

Monthly