Panduan Linux

Menangani Error 404 dan 50x di NGINX dengan Custom Page

Halo, teman-teman! Pernah nggak sih kalian nge-akses sebuah website terus tiba-tiba nemu halaman error yang bikin bingung? Kayak “404 Not Found” atau “500 Internal Server Error”? Nah, kali ini kita bakal bahas gimana caranya nge-handle error-error kaya gitu di NGINX dengan custom page yang lebih keren dan informatif. Yuk, simak!

Kenapa Perlu Custom Error Page?

Pertama, kita perlu tahu dulu kenapa sih perlu bikin custom error page. Jadi, ketika ada error kaya 404 atau 50x, biasanya NGINX bakal nampilin halaman default yang mungkin kurang informatif atau nggak sesuai dengan tema website kita. Dengan custom error page, kita bisa:

  1. Nambahin Branding: Tampilin logo atau warna yang sesuai dengan website kita.
  2. Kasih Informasi Lebih: Kasih tahu pengguna kenapa error terjadi dan apa yang bisa mereka lakukan.
  3. Improve User Experience: Bikin pengalaman pengguna lebih baik meskipun ada error.

Langkah-langkah Membuat Custom Error Page di NGINX

1. Siapin File HTML untuk Error Page

Pertama, kita perlu siapin file HTML untuk custom error page. Misalnya, kita mau bikin custom page untuk error 404 dan 500. Kita bisa bikin file 404.html dan 500.html di direktori /usr/share/nginx/html/error_pages/ (atau direktori lain sesuai kebutuhan).

Contoh isi 404.html:

<!DOCTYPE html>
<html>
<head>
    <title>404 Not Found</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #ff6347;
        }
    </style>
</head>
<body>
    <h1>404 Not Found</h1>
    <p>Maaf, halaman yang kamu cari nggak ada.</p>
    <a href="/">Kembali ke halaman utama</a>
</body>
</html>

Contoh isi 500.html:

<!DOCTYPE html>
<html>
<head>
    <title>500 Internal Server Error</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        h1 {
            color: #ff6347;
        }
    </style>
</head>
<body>
    <h1>500 Internal Server Error</h1>
    <p>Waduh, ada masalah di server kami. Coba lagi nanti ya!</p>
    <a href="/">Kembali ke halaman utama</a>
</body>
</html>

2. Konfigurasi NGINX untuk Custom Error Page

Setelah file HTML-nya siap, kita perlu konfigurasi NGINX untuk menggunakan file-file tersebut ketika terjadi error. Buka file konfigurasi NGINX (biasanya di /etc/nginx/nginx.conf atau /etc/nginx/sites-available/default) dan tambahkan directive error_page di dalam blok server.

Contoh konfigurasi:

server {
    listen 80;
    server_name example.com;

    # Custom error page untuk 404
    error_page 404 /error_pages/404.html;
    location = /error_pages/404.html {
        internal;
    }

    # Custom error page untuk 500
    error_page 500 502 503 504 /error_pages/500.html;
    location = /error_pages/500.html {
        internal;
    }

    # Konfigurasi lainnya...
}

Pastikan path /error_pages/404.html dan /error_pages/500.html sesuai dengan lokasi file HTML yang udah kita bikin.

3. Restart NGINX

Setelah konfigurasi selesai, jangan lupa untuk restart NGINX biar perubahan berlaku. Bisa pake perintah:

sudo systemctl restart nginx

Atau:

sudo service nginx restart

Testing Custom Error Page

Untuk ngetes apakah custom error page berhasil, kita bisa coba akses URL yang nggak ada di website kita (misalnya http://example.com/ngawur) untuk ngetes error 404. Atau, kita bisa sengaja bikin error di server untuk ngetes error 500.

Kalau berhasil, kita bakal liat halaman custom yang udah kita bikin, bukan halaman default NGINX lagi.

Tips Tambahan

  1. Gunakan Desain yang User-Friendly: Pastikan custom error page mudah dipahami dan ada tombol atau link untuk kembali ke halaman utama.
  2. Tambahkan Kontak Support: Kalau perlu, tambahkan kontak support atau link ke FAQ biar pengguna bisa cari bantuan lebih lanjut.
  3. Monitor Error: Pantau error yang sering terjadi untuk memperbaiki masalah di website.

Nah, gimana? Gampang kan bikin custom error page di NGINX? Dengan custom error page, kita bisa bikin pengalaman pengguna lebih baik meskipun ada error. Selamat mencoba!

#Nginx #Tutorial