How to troubleshoot common HTTP error codes

HTTP error codes are crucial to the understanding client and server-side issues, This is a comprehensive guide for HTTP error codes and their underlying reasons:

And the Best Part:

 You will learn everything from a system administrator’s perspective, so you will be well equipped to solve those issues in a jiffy.

  1. Most common HTTP error codes?
  2. What do they mean?
  3. What are the common solution or fixes that you can try?
  4. A comprehensive list of all HTTP errors and other resources if you wish to explore more.

HTTP error codes indicate whether an HTTP request was successfully completed or not.

The HTTP responses are grouped into these five categories:

  1. Informational codes: 1xx,
  2. Success codes: 2xx,
  3. Redirects: 3xx,
  4. Client errors: 4xx,
  5. Server errors: 5xx

We will be focusing on the most common client and server side error codes namely 4xx and 5xx codes and common solutions to these codes.

Client error overview: Client-side errors are caused due to the client. This means that there is something wrong with the request that the client is sending to the server.

General errors include typo’s and maybe the headers are wrong or some such thing.

Server error overview: Server errors that code from 500 to 599 are sent when there is an error with the server or when the server recognizes that it is unable to handle the request.

General fixes and other tips to troubleshoot:

  • This goes without saying but this mistake is what many people do when doing server debugging.
  • Refresh the browser or the server debugging software after making changes to the server.
  • Check server logs

HTTP server codes are determined by standards that are implemented by the software running on the server. This means that the actual code returned by the server depends on how the server software handles the code.

This guide should generally point you in the right direction. Now that you have a general understanding this will help you in understanding the HTTP error codes:

Common Client Side HTTP error codes:

400 (Bad request error)

This code means that the server could not understand the request because the syntax is invalid. That is the request which was sent to the server had invalid syntax.

Solution: 

  • Check the syntax errors that might have occurred in your request. 
  • Try clearing the browser’s cookies and cache.
  • Try updating or changing the browser. That is browser might be really old/outdated and or faulty.

401 Unauthorized error:

Unauthorized error means unauthenticated error. It means the server requires authentication most commonly a password to access the file requested. It also means that the server is unable to recognize you as a user with proper authentication.

In this case, either the username and/or password is not provided or improperly provided to the server. 

Solution:

Provide the proper authentication, in a proper way that is required by the server to access the restricted content.

403 Forbidden:

In this case the client does not have access to the content. it means that server recognises who the client is and the user has made a proper request to the server but the server is refusing to give a proper response to access to the requested files. Unlike the 401 here the client’s identity is known to the server.

Solution:

403 errors commonly occur when users does not have the permissions to access the requested resource.

404 Not Found:

The HTTP error code: 404 not found means that the user is able to communicate with the server and the server is also willing to send the resource back to the user, but it is unable to find the resource the user is requesting.

If you are using a browser it might also mean that the URL is not recognised by the server. Or as I ssaid above it might also mean that the URL is valid but the resource no longer exists on the server.

This is one of the most recognisable error code on the web because of it’s frequent occurrence. 

Solution:

If you are receiving a 404 error unexpectedly, here are a few questions to ask while troubleshooting.

  • Did you make a type error.
  • Does the file exist on the server or has it moved or been deleted ?
  • Is the file you are requesting in the directory that you are looking into.

408 Request Timeout:

This response is sent when the server closes the connection because the client is taking a long time to send the request. This happens when the client has a slow internet connection or if there is a huge load on the server.

Be aware that this error response is also often sent by servers even without any previous request by the client. It means that the server wishes to shut down this unused connection.

Nowadays, any modern browsers such as chrome and firefox use pre-connection to speed up the web and if it’s unused for a long time the server disconnects. please note that often servers disconnect’s even without sending the message.

429 Too Many Requests

The user sent too many requests in a given amount of time. This is generally done as a rate limiting measure. Often time providers of free API’s (for example: free weather api etc.) limit the rate at which the free user can access the data.

Solution:

Wait for some time and try again or read the terms associated with API access point.

Detailed comprehensive list of HTTP error codes:

For a detailed list of HTTP error codes and their meaning please refer to this resource by Mozilla: HTTP response status codes

Common server-side HTTP error codes:

500 Internal server error:

The server has encountered an error and it does not know how to handle it. Sometimes the code will appear with more specific errors of the 5xx type.

The most common cause for this type of error is server misconfiguration.

502 Bad Gateway:

This means that the server while working to get a response from another server that is needed to handle the request got an invalid response. 

That is the server which the client sent a request to is a proxy server and needs to get the data from another server.

That is the server which the client sent a request to is a proxy server and needs to get the data from the parent server. The proxy server is not able to get a valid response from the parent server.

The most common cause for this is server misconfiguration. Having missing packages or not properly load balancing the server might result in these errors.

503 Service Unavailable:

Means that server is unable to handle the request possible cause may be that the server is under maintenance or down for some other reason or that the server is over loaded and cannot handle the request.

If the server is not down then it means that either the server resources such as CPU ram or bandwidth are unable to handle the traffic. Either server needs to be reconfigured to allow more traffic by increasing the resources or some other optimization must be done.

Note: If you are sending this response during heavy load times or for some other reason a user friendly html page or message should also be send explaining the problem and an estimated time frame for the resolution of the problem. For this you can also user the Retry-After: HTTP header.

You should also take care not to send caching-related headers during these temporary conditions.

504 Gateway Timeout

This error is recieved when the server is acting as a gateway or a proxy server and is unable to get a response from the proxy servers in the stipulated time period.

Main causes and solution for this:

  • There is heavy load on the parent server.
  • There is a lot of latency between the servers because of location or slow bandwidth

Conclusion:

You are now familiar with Common HTTP error codes and their common solutions. Hope this article helps

About Me:

Hi, I am Mohammed Lakkadshaw for more information about me please visit my blog and website: https://www.mohammedlakkadshaw.com

5 Most useful ES6+ Features

In this post, I am going to share with you Javascript ES6+ features that I find the most useful:

  1. For…of Loop
  2. Arrow Functions
  3. Async and Await
  4. Template literals
  5. Destructing

For…of Loop

Before either we had to write a full for loop or call the forEach function on the array to iterate over its item.

Previously we had to do this

Now with the new version of JavaScript, we can simply write the For…Of loop

If we have to iterate over an object’s keys we can use the For…In loop

Arrow Functions

If you have done programming in JavaScript you must be familiar that we have to create a LOT of functions in javascript as it is an asynchronous programming language.

With the new Arrow Functions, it makes the code cleaner and also saves you a few keystrokes.

Consider the following example, previously we had to do this

Now with the ES6+ syntax, it can be compressed into a single line, in a single like arrow function we don’t have to write the return statement, the value of whatever expression preceding the arrow will be returned.

We can also create multi-line arrow functions that accept multiple arguments

Async and Await

This is the feature that I use a lot especially when doing server-side programming using Node.JS, but you can also use it on the front-end and it also works in all the major browsers.

With Async and Await keywords, you can write asynchronous code that uses promises appear as if it is synchronous and make the code more readable.

Consider the following example without async await

Now with Async and Await keywords, we can update the code and make the asynchronous functions look like synchronous functions and it results in a much cleaner code, see for yourself:

As you can see with the update the code is much more simplified. To use async-await first you have to create a function with keyword async, then inside the function, you can call asynchronous methods that uses promise and add the await keyword in front of the function call.

Template literals

Template literals is a very useful feature, previously we had to use string concatenation the can quickly get out of hand if we are using multiple values or if want to construct a multi-line string, consider the following example

The code can be simplified with template literals

To use the template literal we have to enclose the string in ` and then enclose the variable name under ${<variable_name>}

Template literals can also expand to multiple lines

Imagine constructing the above code using string concatenation, it would be an unreadable mess.

Destructuring

Destructuring allows us to extract values from an object and easily assign it to variables.

Considering the following example, here is what we normally do when we want to extract values from an object

With destructuring you can simplify the code as following:

and we can use the name, age, and occupation as variables in our code.

That’s it!

These the feature that I find the most useful in ES6+, please share if you found it interesting and let me know in the comments what ES6+ feature you like the best.

 

AngularJS + Underscore The ultimate web-development toolkit (2018)

Before starting my latest web-development project I was looking for some robust javascript frameworks that I could use.

I was familiar with AngularJS and I loved it, but it doesn’t have a lot of utility methods and I was looking for some solution to solve that problem.

So, I thought about using UnderscoreJS, which is a collection of utility methods with angularJS and I got myself a killer web development toolkit. In this blog post, I have summed up UnderscoreJS methods which I find useful. visit underscorejs.org to view all the available methods.

Using Underscore with Angular:

Combining angular and underscore is pretty straightforward, just add import underscore in your index.html, then add it as a service.

And then we could inject it into our controllers.

Useful Underscore methods:

I have compiled a list of my favourite underscoreJS methods, you can always visit underscorejs.org to view all the methods that are available in underscore.

_.isUndefined:


This method is used to determine whether the specified value is undefined or not, I know you could always do typeof value === “undefined” to check whether it is undefined or not, but I find this neater.

_.defaults:


This is also a very useful method, it allows you to define default values for something if they are not present.

_.where:

This method comes handy when you want to search something in the array of objects using some attributes present in the object.
consider the example below.


_.uniq:

This method operates on arrays, and it removes duplicates in the array.
Consider the following example:


_.pluck:


if you ever wanted to extract some values from an array of objects, well the pluck method let’s you do that.
Here is the example:

By merging these two awesome web development frameworks together we can get a pretty nice web development experience, as angular serves as an awesome MVC, and underscore provides a very useful collection of utility methods.

About me:

I am Mohammed Lakkadshaw. A freelance javascript developer with expertise in NodeJs Angular and React. If you like this article please share them on Twitter Facebook and Google+.