Cara handle error 404 page not found pada Express JS

 

Memahami Handler 404 pada Express.js: Fungsi, Cara Kerja, dan Implementasi Terbaik

Dalam pengembangan aplikasi web menggunakan Express.js, salah satu hal penting yang harus diperhatikan adalah bagaimana menangani permintaan (request) yang tidak ditemukan atau tidak memiliki rute yang sesuai. Dalam konteks HTTP, kondisi ini dikenal sebagai 404 Not Found. Untuk memastikan pengalaman pengguna tetap baik dan aplikasi tetap mudah dipelihara, Express menyediakan mekanisme yang sederhana namun fleksibel untuk mengatur handler khusus guna menangani kasus 404.

Apa Itu Handler 404?

Handler 404 adalah sebuah middleware dalam Express.js yang dieksekusi ketika tidak ada rute atau middleware lain yang cocok dengan permintaan yang diterima. Dengan kata lain, jika pengguna mencoba mengakses URL yang tidak didefinisikan dalam aplikasi, maka Express akan menjalankan handler ini.

Secara default, Express tidak mengembalikan halaman 404 yang ramah pengguna. Jika Anda tidak mendefinisikan handler 404 secara manual, respon yang dikirimkan akan cukup sederhana dan tidak informatif. Oleh karena itu, membuat handler 404 khusus sangat disarankan, baik untuk tujuan UX maupun debugging.

 

Cara Kerja Handler 404 di Express.js

Express menggunakan urutan middleware berdasarkan urutan deklarasi dalam kode. Ketika sebuah request datang, Express akan mencocokkannya dengan middleware atau rute dari atas ke bawah.

Jika tidak ada yang cocok, pada akhir tumpukan (middleware stack), kita bisa menambahkan sebuah middleware untuk menangani 404. Karena middleware ini ditempatkan paling akhir, dia hanya akan dijalankan jika semua rute sebelumnya gagal menangani request.

Contoh Implementasi Handler 404

Berikut implementasi sederhana handler 404 dalam Express:

const express = require('express');

const app = express();

// Contoh rute

app.get('/', (req, res) => {

res.send('Halaman Utama');

});

// Handler 404 (ditempatkan di paling akhir)

app.use((req, res) => {

res.status(404).send('404 - Halaman tidak ditemukan');

});

app.listen(3000, () => console.log('Server berjalan pada port 3000'));

Pada contoh di atas, Express akan mencoba mencocokkan request ke rute yang tersedia. Jika tidak ada yang cocok, middleware app.use((req, res) => {...}) akan dieksekusi otomatis.

Handler 404 dengan Tampilan Lebih Menarik

Biasanya, aplikasi produksi membutuhkan tampilan 404 yang lebih profesional. Express bisa dikombinasikan dengan template engine seperti EJS, Pug, atau Handlebars:

app.use((req, res) => {

res.status(404).render('404', {

title: 'Halaman Tidak Ditemukan',

message: 'Maaf, halaman yang Anda cari tidak tersedia.'

});

});

Dengan demikian, pengguna mendapatkan pengalaman yang lebih baik dan tampak lebih profesional.

Perbedaan Handler 404 dan Error Handler Lainnya

Penting untuk membedakan handler 404 dengan handler error (500 atau error lainnya). Dalam Express, error handler memiliki empat parameter:

app.use((err, req, res, next) => {

res.status(500).send('Terjadi kesalahan pada server');

});

Sedangkan handler 404 tidak memerlukan parameter err karena dijalankan saat tidak ada kesalahan internal—hanya rute yang tidak ditemukan.

Best Practice dalam Membuat Handler 404

1. Selalu letakkan di bagian paling akhir
   Jika ditaruh di tengah, Express tidak akan bisa memproses rute di bawahnya.

2. Berikan pesan yang jelas dan ramah pengguna
   Jangan hanya menampilkan teks polos seperti "404", tetapi berikan informasi yang cukup.

3. Gunakan template engine atau file HTML khusus
   Ini meningkatkan profesionalitas tampilan aplikasi.

4. Catat request 404 pada log
   Log 404 bisa membantu mendeteksi link rusak, kesalahan pengguna, atau potensi percobaan eksploitasi.

5. Sediakan opsi untuk kembali ke halaman utama
   Tambahkan tombol atau link “Kembali ke Beranda”.

 

Kesimpulan

Handler 404 merupakan komponen penting dalam aplikasi Express.js untuk menangani permintaan yang tidak memiliki rute yang valid. Dengan memasang middleware khusus ini di bagian paling akhir alur middleware, Anda dapat memastikan aplikasi tetap terstruktur, ramah pengguna, dan mudah dikelola. Implementasi handler 404 yang baik bukan hanya meningkatkan pengalaman pengguna, tetapi juga membantu dalam pemeliharaan aplikasi jangka panjang.