EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials Nginx Tutorial Nginx Error_page
Secondary Sidebar
Nginx Tutorial
  • Basic
    • Nginx Add_header
    • Nginx FastCGI
    • Nginx WAF
    • Nginx Forward Proxy
    • Nginx Ingress Annotations
    • Nginx Location Directive
    • Nginx User
    • Nginx Port
    • Nginx Auth_request
    • Nginx Autoindex
    • Nginx if else
    • Nginx uWSGI
    • Nginx X-Forwarded-For
    • Nginx GUI
    • NGINX Unit
    • NGINX if
    • Nginx default_server
    • Nginx worker_connections
    • Nginx Authentication
    • Nginx Gateway Timeout
    • Nginx Error_page
    • Nginx Server Block
    • Nginx Forbidden
    • Nginx Modules
    • Nginx Max Upload Size
    • Nginx vs LiteSpeed
    • Nginx multiple server_name

Nginx Error_page

Introduction to Nginx Error_page

Nginx error_page allows us to attract the HTTP and URI code of response which was optionally replacing the code with another. At the time of setup and nginx, we need to set up an error page of custom for every error. For example, Nginx will allow us to configure our website’s custom 404 error page; this was automatically displayed on our browser when the requested URL website was not found or working correctly.

The Nginx error page allows us to display the intuitive steps of website visitors when they are not finding the page of our website. We can configure the custom error pages for various codes like 500, 502, 404, 403, etc. The default error page is opened when an error occurs in a particular environment. We can substitute the nginx error page with the customer to provide more specific instructions to the end users. To configure the error into the nginx server, first, we need to create an error page in the location, server, or http directive; this is part of the server directive.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

How to Configure Nginx Error_page?

Nginx is a high-performance web server that serves content with power and flexibility. Designing web pages helps customize the piece’s content that our user sees. In addition, it will include the pages of error.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,130 ratings)

Every time an nginx will encounter an error as and attempts to process the request of the client. Each error includes the code response in a short description. Usually, the error is displayed to a user using the default page, which is simple. However, we can configure the nginx error page to display the error on our site for web users. We can achieve the same by using the directive of the nginx error page, which was used to define the URI shown in a specified error.

Optionally we can use the http status code in the response headers for sending to the client. The below steps are used to configure the error page of nginx as follows. To configure the error page, first, we need to install the nginx server in our system; in the below example, we are installing the nginx server as follows.

1. In this step, we install the nginx server on the ubuntu system. We are installing the nginx server by using the apt-get command.

Code:

apt-get install nginx

Output:

installing nginx server using apt-get command

2. After installing the nginx server, we check the nginx installed version by using the following command. We can check the nginx version and the running status of the nginx server.

Code:

nginx –V

Output:

check the nginx installed version

3. After installing the nginx server, we create the error page template. We are creating the file name as error.html in /var/www/default/ directive. In simple analytics, we deploy our app in a server, and then nginx will return 502 because the app will be reloading. We need to inform the users, and the page automatically refreshes every 2 seconds.

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Nginx Error page</title>
<meta name = "Error page" content = "width = device-width, initial-scale = 2">
<!--# if expr = "$status = 502" -->
<meta http-equiv = "refresh" content = "2">
<endif -->
</head>
<body>
<!--# if expr = "$status = 502" -->
<h1> Updating the website </h1>
<!--# else -->
<h1> <!--# echo var = "status" default = "" --> <!--# echo var = "text" default = "Page not found" --></h1>
<!--# endif -->
</body>
</html>

Output:

create the error page template

4. After creating the error page template, we need to map the text to work with the http directive.

Code:

map $status $status_text {
403 'Forbidden request';
404 'Require page Not Found';
400 'Request is bad';
401 'Unauthorized access';
402 'Payment Required';
default 'Something goes wrong';
}

Output:

map the text to work with the http directive

5. After mapping the nginx error page now, in this step, we are rebooting the nginx server to take the effect of the parameter. Before restarting the nginx server, we execute the nginx –t command to check the nginx configuration file is not contain any error.

Code:

nginx –t
service nginx restart

Output:

rebooting the nginx server

Creating Your Custom Nginx Error_page

We will make our custom pages for the demonstration. But the custom pages are different.

Below steps shows how to create the customs nginx error_page as follows:

1. In the first step, we create the custom html file to define the nginx custom web page.

Code:

<!DOCTYPE html>
<html>
<head>
<body>
<!--# if expr = "$status = 502" -->
<h1> Updating the website </h1>
<!--# else -->
   <h1><!--# echo var = "status" default = "" --> <!--# echo var = "text" default = "404 Page not found" --></h1>
<!--# endif -->
<head>
</body>
</html>

Output:

we are creating the custom html file

2. After creating the custom html file, we need to tell the nginx server that we were utilizing those pages when the error occurred. We need to open the server block file into the directory of nginx; we are opening the block file of the server.

server block file into the directory of nginx

3. After opening the file, we add the error page directive while a 404 error will occur on the custom page created and served. We are adding the following line to the server block.

Code:

error_page 404 /.html;
location = /custom.html {
  root /usr/share/nginx/html;
  internal;
}

Output:

we are adding the error page directive while 404 error occur

4. After adding the directive in this step, we reboot the nginx server to take the effect of the parameter. Before restarting the nginx server, we execute the nginx –t command to check the syntax error.

Code:

nginx –t
service nginx restart

Output:

reboot the nginx server

Conclusion

To configure the error into the nginx server, first, we need to create an error page in the location, server, or http directive; this is part of the server directive. Nginx error_page allows us to attract the HTTP and URI code of response which was optionally replacing the code with another.

Recommended Articles

This is a guide to Nginx Error_page. Here we discuss the introduction, how to configure nginx Error_page? and create your custom nginx Error_page. You may also have a look at the following articles to learn more –

  1. Nginx Add_header
  2. Nginx Location Directive
  3. Nginx WAF
  4. Nginx FastCGI
Popular Course in this category
Software Testing Training (11 Courses, 2 Projects)
  11 Online Courses |  2 Hands-on Projects |  65+ Hours |  Verifiable Certificate of Completion
4.5
Price

View Course

Related Courses

Selenium Automation Testing Training (11 Courses, 4+ Projects, 4 Quizzes)4.9
Appium Training (2 Courses)4.8
JMeter Testing Training (3 Courses)4.7
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more

Special Offer - Software Testing Training Learn More