DEV Community: adidoshi

Express Error Handling

adidoshi — Sat, 12 Feb 2022 16:04:33 +0000

Error Handling refers to how Express catches and processes errors that occur both synchronously and asynchronously. Error handling often doesn't get the attention & prioritization it deserves, but it’s important to remember all it takes is one unhandled error leak into your user interface to override all the seconds you helped your users save. There are so many components involved in a successful, functioning web application, it is essential to foolproof your application by preparing for all possible errors and exceptions. Let's begin then..

Overview:

Errors can be divided into two types- operational & programming errors. Programming errors are the bugs that occurs from the developers code, on the other hand operational error, will inevitably happen when users will interact with our web app. It may include invalid paths, server failing to connect & invalid user input. We should be prepared for these errors in advance by creating a global custom error handling middleware.

Error middleware:

Middleware functions in Express come into play after the server receives the request and before the response fires to the client. They have access to the request and the response objects. They can be used for any data processing, database querying, making API calls, sending the response, or calling the next middleware function (using the next() function).

Let's take a simple example where the request path doesn't match the defined routes.

If you try to visit a route other than '/' suppose https://error-handling.adidoshi.repl.co/user, you will see an error -

{"status": 404, "error": "Not found"}

otherwise if error not handled it would be in plain html like -

Creating an error class -

A common practice is to take the initial Error object and expand on it with our own class.

class ErrorHandler extends Error {
  constructor(message, statusCode) {
    super(message);
    this.statusCode = statusCode;
    this.status = `${statusCode}`.startsWith("4") ? "fail" : "error";
    Error.captureStackTrace(this, this.constructor);
  }
}

The super() function only takes message as an argument because that’s what Error takes initially. Then, we add a statusCode property and a status that derives from statusCode. Finally, the captureStackTrace line prevents this class from showing up in the stack trace, which is part of the console log that shows where in code the error occurred.

For example, with this error class lets rewrite our above code -

app.use((req, res, next) => {
next(new ErrorHandler(`Can't find ${req.originalUrl} on this server!`, 404));
})

Catching Errors in Async Functions

Mostly while developing an API we come around writing async functions for database query, sending response. Until now, we’ve used try/catch blocks to catch errors in our async/await functions (to give you an example)

const createPost = async (req, res) => {
    const { desc, location, pic } = req.body;
  try {
    if (!desc || !pic || !location) {
        res.status(400).json('Please fill all the details')
      } else {
        const newPost = new Post({
          user: req.user._id,
          desc,
          location,
          img: pic,
        });
        const createdPost = await newPost.save();
        res.status(201).json(createdPost);
      }
  } catch (error) {
      next(error)
    }
  }

but they make our code look messy. The best way to avoid try catch in your node js application is to, wrap your function call into a higher order function.

const catchAsync = fn => {
  return (req, res, next) => {
    fn(req, res, next).catch(next);
  };
};

This is a function catchAsync , where I'm passing three parametes req, res, next object which will be passed as standard from our express function, here it means we wrap our func call into Promise & next means that pass it to the next function in the chain.

Let's wrap our above createPost function into this -

const createPost = catchAsync(async (req, res, next) => {
  const { desc, location, pic } = req.body;
  if (!desc || !pic || !location) {
    return next(new ErrorHandler("Fill all the details", 400));
  } else {
    const newPost = new Post({
      user: req.user._id,
      desc,
      location,
      img: pic,
    });
    const createdPost = await newPost.save();
    res.status(201).json(createdPost);
  }
});

Wohoo! Finally we get rid of try/ catch, as now any route function you wrap inside this catchasync, that will automatically catch the errors. Note: We also have an NPM package express-async-handler which works in a similar way & inside which we can wrap our route function, but understanding how things works behind the scenes will help us a lot.

Production vs development errors -

We want to send understandable, clean error messages to the user. However, in development we want as much information as possible. We’ll access our environment variable and send back responses accordingly:

Stack trace- It is used to trace the active stack frames at a particular instance during the execution of a program. The stack trace is useful while debugging code as it shows the exact point that has caused an error

const sendErrorDev = (err, res) => {
  res.status(err.statusCode).json({
    status: err.status,
    message: err.message,
    stack: err.stack,
  });
};
const sendErrorProd = (err, res) => {
  res.status(err.statusCode).json({
    status: err.status,
    message: err.message,
  });
};
module.exports = (err, req, res, next) => {
  err.statusCode = err.statusCode || 500;
  err.message = err.message || "Internal Server Error";

  if (process.env.NODE_ENV === "development") {
    sendErrorDev(err, res);
  } else if (process.env.NODE_ENV === "production") {
    sendErrorProd(err, res);
  }
};

To explain the main function code, it says err.statusCode if any or 500(statusCode) which is the error caused by the server.

Further, we can also handle mongoose errors which are helpful in case of model properties check if any - Mongoose errors can include 'duplicate key error'

  if (err.code === 11000) {
    const message = `Duplicate ${Object.keys(err.keyValue)} entered`;
    err = new ErrorHandler(message, 400);
  }

Generally, when we create express API's we divide our code into a specific structure called Model–view–controller (mvc design pattern), which is good practice to have as a developer. With this we have middleware's which also include error middleware we talked about.

That's it, hope reading this post made you understand proper error handling practices in nodejs & you try it in your upcoming projects. Thankyou for visiting!!

react-router-dom-v6

adidoshi — Wed, 09 Feb 2022 13:19:28 +0000

Hey folks, I know most of us were using react-router-dom-v5 before & the v6 must be a little bit confusing. But trust me they have made it more simpler in the latest version for routing of different pages. Breaking down all the concepts one by one for better understanding. Let's start😊

What is react-router-dom?

It is a fully-featured client and server-side routing library for react.
Helps create and navigate between different URLs that make up your web application.
Provides unique URLs for different components in the app and makes the UI easily shareable with other users.

What we'll be covering from the new version -

Configuring routes.
Navigating programmatically
Dyanamic routes
Nested routes
Route parameters
Lazy loading

Installation -

npm install react-router-dom@6

Configuring routes:

Let's begin with the most common usage for routes.
Taking a scenario, suppose a user is on the home page & want's to visit the about page, vice versa.

To configure routes, we need to connect url in the browser, with our react app, for that react router provides a component called BrowserRouter, with which we need to wrap our entire app. We can simply do that in the index.js file.

// index.js file
import { BrowserRouter as Router } from "react-router-dom";
<Router>
     <App />
</Router>

Create two components home, about and navbar for the UI.

// Home.js file
const Home = () => {
  return <div className="element">This is Home page</div>;
};
export default Home;

// About.js file
const About = () => {
  return <div className="element"> This is about page</div>;
};
export default About;

In App.js we wrap home & about within Routes component & Route individually from the react-router-dom. The route has two parameters, path which reflects the path in the url & element which includes our components. Note - Here we don't need to add '/' before path expect for the root/ home url i.e. itself '/'.

// App.js
import { Route, Routes } from "react-router-dom";
import About from "./components/About";
import Home from "./components/Home";
import Navbar from "./components/Navbar";
import "./styles.css";
export default function App() {
  return (
    <div className="App">
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </div>
  );
}

To match the url we wrap the home and about elements in a Link component from rrd in the navbar.
For more ease now you can use NavLink component provided by rrd, which helps in denoting active page by making that respective element bold on the Navbar.

// Navbar.js
import React from "react";
// import { Link } from "react-router-dom";
import { NavLink } from "react-router-dom";
const Navbar = () => {
  const navLinkStyles = ({ isActive }) => {
    return {
      fontWeight: isActive ? "bold" : "normal",
      textDecoration: isActive ? "none" : "underline"
    };
  };
  return (
    <nav className="primary-nav">
      {/* <Link to="/">Home</Link> */}
      {/* <Link to="/about">About</Link> */}
      <NavLink style={navLinkStyles} to="/">
        Home
      </NavLink>
      <NavLink style={navLinkStyles} to="/about">
        About
      </NavLink>
    </nav>
  );
};
export default Navbar;

Navigating programmatically:

Remember history.push() from v5. Let's suppose you are placing an order on an e-commerce store and when the order is placed you want to navigate the user to another page which says order placed successfully. In that case you want to achieve that with an action button, which is possible by useNavigate provided by rrd.
For example - in home page you have a button 'Place order' you can include an onClick prop. Similarly if you want the user to navigate back to home page from order's page then you can simply use navigate(-1).

import { useNavigate } from 'react-router-dom'
const Home = () => {
    const navigate = useNavigate()
    return (
        <div>
            Home page
            <button onClick={() => navigate('order-summary')}>Place order</button>
        </div>
    )
}
export default Home

What if user tries to visit a route, which is not defined, you can easily handle 404 page not found with rrd.

Create a page not found component -

// NoMatch file
const NoMatch = () => {
  return <div>Page not found</div>;
};
export default NoMatch;

Simply add a route to App.js ('*' has a special meaning in rrd which means it matches routes which are not defined in your app.

<Route path="*" element={<NoMatch />} />

Nested routes:

React router dom also helps to switch between a portion of the view, inside a page. Take a scenario, we have a navigation link 'Products', when user clicks, it renders the '/products' page & within that we have a search bar then two more links 'featured', 'new'. When we click on featured it renders '/products/featured' & changes only the portion of the page beside links, same when clicked on 'new'. To achieve this we use nested routes.

Add products link to the Navbar - (I've attached a codesandbox example for every topic for better understanding)
Create a products page and include the two links 'featured' and 'new', and make sure you don't add '/' before the path for nested routes. Create two new components, FeaturedProduct & NewProduct. Now here rrd provied an <Outlet /> component which helps to work this, invoke it below the two links.

// Products file
import { Link, Outlet } from "react-router-dom";
const Products = () => {
  return (
    <div>
      <input placeholder="Search Products" type="search" />
      <nav>
        <Link to="featured">Featured</Link>
        <Link to="new">new</Link>
      </nav>
      <Outlet />
    </div>
  );
};
export default Products;

Now to make this work, we need to enclose the two nested components, in route component by changing it to closing tag from a self closing tag. Now what is special about nested routes is that rrd automatically forms the full path to the children routes, so featured path is actually /products/featured & new is /products/new. Wohoo! Now we are able to change only the portion of UI in the same page.

// App.js file
<Route path="products" element={<Products />}>
    <Route path="featured" element={<FeaturedProduct />} />
    <Route path="new" element={<NewProduct />} />
</Route>

Index Route -

In the previous section we saw how nested routes work, however you must have noticed that the child routes render only when the url is '/products/featured' or '/products/new'. Sometimes you may want the child route to render at the parent route level, i.e. if we click on products link, we still want to render the featured products when url reaches '/products', that can be achieved by the index route. It's also a nested routed, so simply specify in the route component & what's special here is we don't need to add path prop instead we just need to add index, this will share the path of the parent route that is '/products'.

Now your App.js file will look like
 <Route path="products" element={<Products />}>
     <Route index element={<FeaturedProduct />} />
     <Route path="featured" element={<FeaturedProduct />} />
     <Route path="new" element={<NewProduct />} />
 </Route>

Dynamic Routes

Let's suppose we are building an Admin dashboard and we require users list and user details page for particular user (followed by the id of that user). For example if navigate to 'users/1' then it should show details of first user & same for all. We achieve this by dynamic routes in rrd.

Let's create a Users page and include user list.

// Users.js file
import React from "react";
import { Link, Outlet} from "react-router-dom";
function Users() {
  const users = [
    {id: 1, name: 'User 1 details'},
    {id: 2, name: 'User 2 details'},
    {id: 3, name: 'User 3 details'},
  ]
  return (
    <div>
      {users.map((item) => (
 <Link to={`/users/${item.id}`} key={item.id}><h5>{item.name}</h5></Link>
      ))}
      <Outlet />
    </div>
  );
}
export default Users;

To match this url, rrd provides us url params which helps in navigating to the individual user details page. Creating the user details page - It's important to note here that userId on the params object corresponds to the dynamic segments, specified in the route config ':userId'

import { useParams } from "react-router-dom";
const UserDetails = () => {
  const { userId } = useParams();
  //   const userId = params.userId; (destructuring userId)
  return <div>User details page {userId}</div>;
};
export default UserDetails;

In App.js we create a Route in which we include path in this manner ->

<Route path="users" element={<Users />}>
    <Route path=":userId" element={<UserDetails />} />
</Route>

Search Params

So url params is not the only way to add parameters to the route, we can also add an optional query string. For example if we want to filter active users from the user's list based on some condition then we can add in the url -> /users?filter=active. This is called as search params in rrd. useSearchParams behaves similar to the useState hook, instead of storing it in memory though it's stored in url.
So in the users file you can just add - (when user clicks on active user useSearchParams is initiated & on reset filters removed.

import React from "react";
import { useSearchParams } from "react-router-dom";
function Users() {
  const [searchParams, setSearchParams] = useSearchParams();
  const showActiveUsers = searchParams.get("filter") === "active";
  return (
    <div>
      <div>
        <button onClick={() => setSearchParams({ filter: "active" })}>
          Active users
        </button>
        <button onClick={() => setSearchParams({})}>Reset filters</button>
      </div>
      {showActiveUsers ? (
        <h2>Show active users</h2>
      ) : (
        <h2>Showing all users</h2>
      )}
    </div>
  );
}
export default Users;

Lazy loading -

Lazy loading is a technique wherein components not required on the home page can be split into separate code bundles and downloaded only when user navigates to that page. Maybe you can think like incrementally downloading the application. It helps reduce initial load time thereby improving performance. Let's understand with an simple example, we will lazy load the about page by adding lot paragraphs meaning trying to make it bulky on purpose.

// About.js file
const About = () => {
  return (
    <div>
100s.... of lines
 </div>
  );
};
export default About;

If we observe the bundle size when the entire app is loaded on initial load. Well to check that, open your dev tools, right click on refresh button of your browser and click on 'Empty Cache and Hard Reload'. Taking my example the main.chunk.js is of 10.8kb & it takes 19ms to load.
In App.js we need to add dynamic import syntax and make use of React suspense. Make sure in your about page you have a default export, as we need that in App.js file. A promise is returned by this dynamic import which is then converted into a module, that contains a default exported react component, in our case About.

import React from "react";
const LazyAbout = React.lazy(() => import("./components/About"));
<Route
path="about"
element={
  <React.Suspense fallback="Loading...">
    <LazyAbout />
  </React.Suspense>
}
/>

Now when we lazy load the about page, we see the difference. The main.chunk.js file size is reduced to 6.8kb& time also has reduced to 15ms. Hence we imporve our initial load time. Maybe you will not able to see the fallback loading text, as the file size in not that large, if you do want to ensure it's working throttle your network speed to 'slow 3g' & you will able to see the fallback element. While you haven't reduced overall code of your app you have reduced the amount of code needed during the initial load & if you think about it as the application increase in size, mote third party packages are installed , the bundle size loads up causing the initial time to be very long.

That is it folks, hope you have gained value from the post, where I've tried to introduce you to almost all topics from the react-router-dom-v6. Further if you want to deep dive more into rrd usage you can refer React Router Dom. There are more hooks like useLocation which would be useful.
Thankyou for visiting.

HTTP request methods

adidoshi — Fri, 13 Aug 2021 18:39:10 +0000

In this post I would be sharing with you various types of request methods used to work with an API.

What Are HTTP Request Methods?

An HTTP request is an action to be performed on a resource identified by a given Request-URL. Request methods are case-sensitive, always noted in upper case.

How Do HTTP Requests Work?

HTTP requests work as the intermediary transportation method between a client/application and a server. The client submits an HTTP request to the server, and after processing, the server sends back a response. The response contains status information about the request.

There are various HTTP request methods, but each one is assigned a specific purpose. Let's start -

1. GET Method -

GET method is used to retrieve and request data from a specified resource in a server.

In this post I'll be using 'Swagger UI' as a fake rest api to showcase how these requests work.



let url = "https://fakerestapi.azurewebsites.net/api/v1/Activities";
fetch(url, {method: 'GET'})
.then(response => response.json())
.then(data => console.log(data));
// we receive the data from the api as the output

A GET request is often used to typically fetch json data from the server, there are different formats by which you can retrieve the data -

XML
HTML
Text
JSON

2. POST method -

Another popular HTTP request method is POST. In web communication, POST requests are utilized to send data to a server to create or update a resource. The HTTP POST method is often used to send user-generated data to a server. One example is when a user uploads a profile photo.



let url = 'https://fakerestapi.azurewebsites.net/api/v1/Activities';
let data = {
  "id": 0,
  "title": "string",
  "dueDate": "2021-08-13T16:44:12.776Z",
  "completed": true
}
const options = {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
}
fetch(url, options)
  .then(res => res.json())
  .then(res => console.log(res));
// This way user data can be updated to the server.

The information submitted to the server with POST request method is archived in the request body of the HTTP request.
Here we use the JSON.stringify() method which converts a JavaScript object to a JSON string

3. PUT method :

PUT is similar to POST as it is used to send data to the server to create or update a resource. The difference between the two is that PUT requests are idempotent.
This means that if you call the same PUT requests multiple times, the results will always be the same.



const dataObject = {id: 1,
    title: 'Activity 1 update',
    dueDate: '2021-08-13T17:12:24.832Z',
    completed: true,
};

fetch('https://fakerestapi.azurewebsites.net/api/v1/Activities/1',{
    method:'PUT',
    headers:{
    'Content-Type':'application/json'
    },
    body:JSON.stringify(dataObject)
}).then(response=>{
    return response.json()
}).then(data=> 
console.log(data)
);

4. Delete method -

Just as it sounds, the DELETE request method is used to delete resources indicated by a specific URL. Making a DELETE request will remove the targeted resource.



let url = "https://fakerestapi.azurewebsites.net/api/v1/Activities/30"
const deleteMethod = {
  method: 'DELETE',
  headers: {
   'Content-type': 'application/json; charset=UTF-8'
  },
 }
 fetch(url, deleteMethod) 
 .then(response => response.text())
 .then(data => console.log(data))
 .catch(err => console.log(err))
// This will delete the targeted id data from the server

The difference from POST is that you will need the id of the record to DELETE or PUT. Here we are using id = '30'

Note that there's no need to parse the result. Parsing response to text will return in an empty string, and parsing it to JSON will give a parsing error.

5. PATCH :

A PATCH request is similar to POST and PUT. However, its primary purpose is to apply partial modifications to the resource. And
just like a POST request, the PATCH request is also non-idempotent. Additionally, unlike POST and PUT which require a full user entity, with PATCH requests, you may only send the updated username.

Coming to the end I would give you a practical example to understand POST | PUT | PATCH method, so as it will be clear to you. Example -
{ "username": "rkumar281", "email": "raghavkumar@domain.com" }

If you POST this data to /users, then you might get back an entity such as :



## /users/1
{
    "username": "rkumar281",
    "email": "raghavkumar@domain.com"
}

If you want to modify this entity later, you choose between PUT and PATCH. A PUT might look like this:



PUT /users/1
{
    "username": "rkumar281",
    "email": "raghavkumar@gmail.com"       // new email address
}

You can accomplish the same using PATCH. That might look like this:



PATCH /users/1
{
    "email": "raghavkumar@gmail.com"       // new email address
}

You'll notice a difference right away between these two. The PUT included all of the parameters on this user, but PATCH only included the one that was being modified (email).

I hope you find the blog helpful in learning http requests, I've covered the most used requests, there are still more you can explore here.
Do put a comment on how you felt about the content & I'll be coming up with new blog post soon...