Custom Error Pages
Oleh Wanda Lionita Leilmutasya di 25 Sep 2025 | 20:02Custom Error Pages (404 & 500)
Dalam pengembangan aplikasi web, sangat penting untuk menangani error dengan cara yang ramah pengguna. Secara default, Laravel menyediakan halaman error sederhana yang ditampilkan ketika terjadi kesalahan, misalnya halaman tidak ditemukan (404) atau kesalahan server internal (500). Namun, tampilan bawaan ini sering kali terlalu polos dan tidak sesuai dengan identitas aplikasi.
Oleh karena itu, Laravel memungkinkan kita untuk membuat halaman error kustom (custom error pages). Dengan cara ini, Anda dapat menambahkan desain, pesan, bahkan ilustrasi yang sesuai dengan gaya aplikasi, atau memberikan tombol untuk kembali ke beranda juga kontak admin, sehingga pengalaman pengguna tetap terjaga walaupun terjadi error.
Prinsip Dasar Error Handling di Laravel
Laravel menggunakan mekanisme Exception Handler yang menangani, mencatat, dan merender semua pengecualian (kesalahan) yang terjadi dalam aplikasi Anda,Tujuannya adalah untuk memastikan aplikasi tetap berjalan stabil, memberikan pengalaman pengguna yang lebih baik dengan menyajikan pesan kesalahan yang sesuai, dan memungkinkan developer untuk melakukan logika kustom seperti mengirim notifikasi error ke layanan eksternal atau menampilkan halaman kesalahan yang berbeda. Mekanisme tersebut terdapat pada file:
| app/Exceptions/Handler.php |
Handler ini yang mengatur bagaimana error ditangani dan halaman apa yang akan ditampilkan. Jika error tertentu terjadi (misalnya NotFoundHttpException untuk 404 atau HttpException untuk 500), Laravel akan mencari file tampilan error di folder:
| resources/views/errors/ |
Didalam atau di folder tersebut akan berisi nama dan kode error yang akan ditemukan seperti yang nantinya akan dibuat (404.blade.php & 500.blade.php) halaman tersebut akan ditampilkan jika terdapat di dalam file, namun jika tidak ada file tersebut maka Laravel akan menampilkan tampilan default error pada biasanya.
File app.blade.php di Laravel berfungsi sebagai template utama atau master layout untuk tampilan halaman web Anda. Dalam konteks custom error, app.blade.php tidak secara langsung digunakan untuk menampilkan pesan kesalahan, melainkan sebagai struktur dasar tempat pesan-pesan error tersebut (yang dibuat menggunakan Blade, seperti sintaks @error untuk validasi formulir) akan ditampilkan dalam konteks desain yang konsisten, seperti header, footer, atau layout keseluruhan aplikasi, sehingga aplikasi terlihat terstruktur dan terkelola.
Untuk awalan Anda harus membuat file layout app.blade.php pada file:
| resources/views/layouts/app.blade.php |
Kemudian nantinya jika sudah isi file tersebut dengan kode:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@yield('title', 'Laravel App')</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="bg-gray-100"> <div class="container mx-auto"> @yield('content') </div> </body> </html> |
Membuat Custom Error Page 404
Pertama membuat file baru terlebih dahulu pada folder :
resources/views/errors/404.blade.php |
untuk page 404 untuk menunjukan halaman tidak tersedia
Kemudian isi file tersebut dengan code:
@extends('layouts.app') @section('title', 'Halaman Tidak Ditemukan') @section('content') <div class="flex flex-col items-center justify-center h-screen text-center"> <img src="{{ asset('images/404.svg') }}" alt="404 Illustration" class="w-1/2 mx-auto mb-6"> <h1 class="text-6xl font-bold text-purple-600">404</h1> <p class="mt-4 text-xl text-gray-700"> Oops! Halaman yang kamu cari tidak ditemukan.<br> Periksa kembali URL atau hubungi admin di bawah ini. </p> <div class="mt-6 flex gap-4"> <a href="{{ url('/') }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-800"> Kembali ke Beranda </a> <a href="mailto:support@aplikasi.com" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-800"> Hubungi Admin </a> </div> </div> @endsection |
Seperti yang Anda ketahui bahwa Anda dapat menambahkan berbagai hal di dalam page error tersebut (sesuai dengan pembahasan kali ini adalah custom error page), bisa ditambahkan dengan desain, pesan dan inovasi lainnya. Untuk kali ini kita akan menambahkan kembali ke beranda dan juga kontak admin sehingga saat muncul page 404 ada opsi kembali ke beranda dan juga kontak admin.
Membuat Custom Error Page 500
Sama seperti membuat file di page 404, untuk awalan buat page 500 pada file:
| resources/views/errors/500.blade.php |
Juga masukan code :
@extends('layouts.app') @section('title', 'Kesalahan Server') @section('content') <div class="flex flex-col items-center justify-center h-screen text-center"> <h1 class="text-6xl font-bold text-purple-600">500</h1> <p class="mt-4 text-xl text-gray-700"> Terjadi kesalahan pada server. Mohon coba beberapa saat lagi. </p> <a href="{{ url('/') }}" class="mt-6 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-green-800"> Kembali ke Beranda </a> </div> @endsection |
Pengujian Custom Error Page
Kemudian untuk melihat error page yang sudah dibuat pada page 404 itu pertama jalankan php artisan serve nantinya jika sudah akan muncul URL yang diarahkan untuk membuka file file yang kita buat. Setelah itu akses URL apa saja yang tidak ada misalnya http://127.0.0.1:8000/halaman-tidak-ada maka halaman 404.blade.php akan ditampilkan
Pada saat menguji untuk page 500 tambahkan route terlebih dahulu untuk menguji
Route::get('/test-error', function () { abort(500); }); |
Kemudian sama seperti custom page 404 akses URL http://127.0.0.1:8000/test-error maka nantinya akan muncul page error 500
Login untuk membalas
Silakan login untuk membalas topik ini