• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Jaranguda

Belajar Mengajar

  • Home
  • Sponsor/Jasa
  • Tentang

Membuat Custom Error Page Haproxy

Last Updated on 14 February 2020 By tommy Leave a Comment

default error page haproxy
Gambar diatas adalah respon standar dari Haproxy bila backend tidak bisa di akses. UX untuk tampilan tersebut mungkin kurang baik, bersinergi dengan website yang anda bangun. Bagaimana bila diganti dengan tampilan dibawah ini
haproxy html css svg error page

Membuat custom view untuk errorfile pada Haproxy tidak lah sulit, karena hanya perlu mengcustom HTML, bila anda mengetahui CSS bisa juga. Untuk gambarnya disarankan menggunakan SVG agar bisa di embed langsung, untuk custom view 502 Bad Gateway diatas, gambarnya menggunakan SVG.

Haproxy menyimpan default error page di folder /etc/haproxy/errors/. Untuk custom semua kita perlu mengubah 7 file

400.http
403.http
404.http
408.http
500.http
502.http
503.http
504.http

Contoh kita akan mengubah 1 file 502.http, hapus terlebih dahulu file 502.http

rm -f /etc/haproxy/errors/502.http

ganti dengan

HTTP/1.0 502 Bad Gateway
Cache-Control: no-cache
Connection: close
Content-Type: text/html
 
<html><title>502 Bad Gateway</title><body>
<center><h1>502 Bad Gateway</h1>
<svg id="b3d864f8-84bf-4ad6-ac45-a7174feef3c9" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="839.3867" height="834.64548" viewBox="0 0 839.3867 834.64548"><title>processing</title><path d="M749.90348,256.796q15.11009,7.97595,29.54036,16.32368" transform="translate(-180.55665 -32.42726)" fill="none" stroke="#2f2e41" stroke-miterlimit="10"/><path d="M562.44148,223.84865c43.93909,9.501,91.91,25.90257,140.23563,49.05024a670.77416,670.77416,0,0,1,100.10271,58.75124" transform="translate(-180.55665 -32.42726)" fill="none" stroke="#2f2e41" stroke-miterlimit="10"/><line x1="235.63007" y1="832.57322" x2="686.1635" y2="832.57322" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><path d="M521.327,216.81667c13.20369,1.62338,26.94958,3.9691,41.11448,7.032" transform="translate(-180.55665 -32.42726)" fill="none" stroke="#2f2e41" stroke-miterlimit="10"/><path d="M392.11174,354.5821c-24.39394-35.69909-32.77388-69.42793-20.24052-95.594,13.86242-28.94072,50.969-43.745,101.26849-44.83538" transform="translate(-180.55665 -32.42726)" fill="none" stroke="#2f2e41" stroke-miterlimit="10"/><path d="M905.80958,434.31808c20.33267,32.73115,26.64112,63.41772,15.044,87.62915-10.20553,21.3062-33.0092,34.95053-64.40046,41.10164" transform="translate(-180.55665 -32.42726)" fill="none" stroke="#2f2e41" stroke-miterlimit="10"/><path d="M802.77982,331.65013a498.103,498.103,0,0,1,57.61868,47.75645" transform="translate(-180.55665 -32.42726)" fill="none" stroke="#2f2e41" stroke-miterlimit="10"/><path d="M378.60511,172.31546c40.4919-8.699,92.89066-7.15266,151.49348,4.39916" transform="translate(-180.55665 -32.42726)" fill="none" stroke="#2f2e41" stroke-miterlimit="10"/><path d="M967.94282,434.31434c18.12773,26.47986,29.27651,52.10442,32.19046,75.44012" transform="translate(-180.55665 -32.42726)" fill="none" stroke="#2f2e41" stroke-miterlimit="10"/><path d="M779.44384,273.11963q27.27426,15.76946,51.89931,32.61952" transform="translate(-180.55665 -32.42726)" fill="none" stroke="#2f2e41" stroke-miterlimit="10"/><path d="M805.50068,663.14119a25.07063,25.07063,0,0,0-21.61027,15.10974c-5.40367,13.062,1.55395,28.40526,11.99861,37.9302s23.86146,14.96932,36.05174,22.12559c16.37359,9.61206,31.08659,22.95519,39.27922,40.08315s9.064,38.34453-.56607,54.70753c-8.93834,15.18767-25.1912,24.27742-40.69221,32.66062" transform="translate(-180.55665 -32.42726)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><ellipse cx="638.71022" cy="631.8513" rx="19.0904" ry="9.27248" fill="#57b894"/><ellipse cx="653.98254" cy="692.94058" rx="19.0904" ry="9.27248" fill="#57b894"/><ellipse cx="619.07438" cy="702.7585" rx="19.0904" ry="9.27248" fill="#57b894"/><ellipse cx="673.61838" cy="754.02986" rx="19.0904" ry="9.27248" fill="#57b894"/><ellipse cx="711.79918" cy="754.02986" rx="19.0904" ry="9.27248" fill="#57b894"/><path d="M703.19827,303.07461h10.75455s9.85834,76.17808,2.68864,83.34778-26.88638,11.65076-29.575,0,0-54.669,0-54.669Z" transform="translate(-180.55665 -32.42726)" fill="#c5d2d1"/><ellipse cx="452.28893" cy="204.32762" rx="65.42352" ry="76.62618" fill="#2f2e41"/><path d="M618.05807,251.09428s3.58485,29.575-7.1697,35.8485,12.547,42.122,12.547,42.122l27.7826,7.1697,18.82046-25.99017-3.58485-26.88638s-21.5091-21.5091-11.65076-41.22578Z" transform="translate(-180.55665 -32.42726)" fill="#ffc1c7"/><path d="M618.05807,251.09428s3.58485,29.575-7.1697,35.8485,12.547,42.122,12.547,42.122l27.7826,7.1697,18.82046-25.99017-3.58485-26.88638s-21.5091-21.5091-11.65076-41.22578Z" transform="translate(-180.55665 -32.42726)" opacity="0.1"/><path d="M577.7285,572.1358s-10.75455,97.68718,0,120.98871,39.43336,88.72505,39.43336,88.72505L608.19973,800.67l24.19774-5.37728,9.85834-18.82046s-11.65076-45.70685-13.44319-61.83868S613.577,668.92677,613.577,668.92677l25.094-106.64931Z" transform="translate(-180.55665 -32.42726)" fill="#ffc1c7"/><path d="M662.8687,555.80658s.89621,98.58339,7.1697,113.8754l-3.58485,133.53569,19.71668,2.63224S714.849,693.82333,710.368,666.937s.89621-123.67735.89621-123.67735Z" transform="translate(-180.55665 -32.42726)" fill="#ffc1c7"/><circle cx="452.28893" cy="196.70981" r="34.05608" fill="#ffc1c7"/><path d="M748.90512,568.35356s-24.19775,16.13182-34.05608,4.48106-130.847,7.1697-146.08267,3.58485,8.06592-60.94246,8.06592-90.51748c0-22.12749,8.03-55.78924,12.072-71.34747,1.36226-5.23391,2.26744-8.41545,2.26744-8.41545s9.19515-26.16045,7.47449-37.03152a9.35068,9.35068,0,0,0-.67216-2.39287,4.9131,4.9131,0,0,0-.52884-.90518c-4.2929-5.72682-16.59788-47.4903-21.37465-65.42353a80.965,80.965,0,0,1-1.92688-8.06591c0-2.68864,33.15987-10.75455,41.44983-11.13992,8.29894-.38536,10.5305,11.13992,10.5305,11.13992,2.68864,1.79242,15.23562,33.15987,15.23562,33.15987l11.65076-29.575s-.89621-6.27349-1.79242-6.27349,13.255-8.46025,13.255-8.46025,14.52757,10.25268,22.59348,8.46025,26.88638,14.3394,26.88638,14.3394-33.15987,83.34778-19.71668,101.272S748.90512,568.35356,748.90512,568.35356Z" transform="translate(-180.55665 -32.42726)" fill="#c5d2d1"/><path d="M639.56717,772.88744s-15.23561,15.23561-15.23561,17.028l-12.547-5.37728s-5.37728,19.71668-6.27349,22.40532-16.13183,26.88638-31.36744,37.64093,0,24.19774,13.44319,21.5091,47.49927-33.15987,47.49927-33.15987,23.30153,0,31.36744-17.92425C666.45355,815.00943,644.94445,771.095,639.56717,772.88744Z" transform="translate(-180.55665 -32.42726)" fill="#2f2e41"/><path d="M684.37781,798.73661s-23.02339-16.72833-24.50678-1.19447-1.48339,49.58995-1.48339,49.58995-7.1697,22.40532,15.23561,19.71668,24.19774-8.96213,24.19774-8.96213l-10.75455-43.01821V796.048Z" transform="translate(-180.55665 -32.42726)" fill="#2f2e41"/><path d="M597.44518,365.8095c-4.2929-5.72682-16.59788-47.4903-21.37465-65.42353h4.34661S591.333,343.10842,597.974,366.71468A4.9131,4.9131,0,0,0,597.44518,365.8095Z" transform="translate(-180.55665 -32.42726)" opacity="0.1"/><path d="M656.59521,424.95953s-12.547.89621-58.25382-8.06591a91.37416,91.37416,0,0,1-9.43714-2.3391c1.36226-5.23391,2.26744-8.41545,2.26744-8.41545s9.19515-26.16045,7.47449-37.03152c2.14185,7.52816,3.73714,12.60972,4.17627,12.83377,1.79243.89622,59.15,10.75456,67.216,14.33941S656.59521,424.95953,656.59521,424.95953Z" transform="translate(-180.55665 -32.42726)" opacity="0.1"/><path d="M672.727,307.66416s24.71954-3.05,26.25107.958,7.805,42.74354,10.49365,47.70963,3.58485,35.75582-7.1697,36.749-25.094-9.93217-22.40532-18.87113S672.727,307.66416,672.727,307.66416Z" transform="translate(-180.55665 -32.42726)" opacity="0.1"/><path d="M660.18006,390.00724s37.64093,4.48106,43.91442,0,32.26366-4.48106,26.88638,8.06591-51.98033,13.44319-51.98033,13.44319H652.11415Z" transform="translate(-180.55665 -32.42726)" fill="#ffc1c7"/><path d="M580.41714,294.11248h-6.27349s-12.547,2.68864-10.75455,42.122-10.75455,65.42352,34.95229,74.38565,58.25382,8.06591,58.25382,8.06591,21.50911-25.094,13.44319-28.6788-65.42352-13.44319-67.216-14.3394S580.41714,294.11248,580.41714,294.11248Z" transform="translate(-180.55665 -32.42726)" fill="#c5d2d1"/><path d="M698.28935,311.80158s-15.704-58.91488-28.25095-58.91488-26.88638,2.68864-16.13183,14.33941,24.19775,24.19774,25.094,30.47123,4.48106,15.23561,4.48106,15.23561Z" transform="translate(-180.55665 -32.42726)" fill="#ffc1c7"/><path d="M676.31189,307.66416s24.71954-3.05,26.25107.958,7.805,42.74354,10.49365,47.70963,3.58485,35.75582-7.1697,36.749-25.094-9.93217-22.40532-18.87113S676.31189,307.66416,676.31189,307.66416Z" transform="translate(-180.55665 -32.42726)" fill="#c5d2d1"/><circle cx="443.3268" cy="164.44615" r="32.26366" fill="#2f2e41"/><path d="M753.8938,561.5946c-50.06781-8.25192-106.70905-26.18981-163.84611-53.55811-65.05663-31.16171-120.1839-69.48522-159.465-108.21652" transform="translate(-180.55665 -32.42726)" fill="none" stroke="#2f2e41" stroke-miterlimit="10"/><path d="M550.89321,524.8925c-44.792-23.20619-85.34351-49.00584-120.31229-75.86668" transform="translate(-180.55665 -32.42726)" fill="none" stroke="#2f2e41" stroke-miterlimit="10"/><circle cx="53.70022" cy="76.07809" r="53.70022" fill="#c5d2d1"/><circle cx="66.29657" cy="54.20022" r="53.70022" fill="none" stroke="#2f2e41" stroke-miterlimit="10"/><circle cx="800.31415" cy="270.04378" r="31.24377" fill="#f2f2f2"/><circle cx="807.64293" cy="257.31484" r="31.24377" fill="none" stroke="#2f2e41" stroke-miterlimit="10"/><circle cx="230.36251" cy="595.72871" r="44.91291" fill="#f2f2f2"/><circle cx="240.89764" cy="577.43086" r="44.91291" fill="none" stroke="#2f2e41" stroke-miterlimit="10"/></svg>
</center>
</body></html>

empat baris pertama di file .http tidak perlu di ganti, karena itu nanti yang di log oleh server.

nanti bisa server anda mendapai 502 error akan muncul gambar
haproxy html css svg error page

Bila anda ingin menambahkan gambar, javascript atau apapun harus menggunakan URL lengkapnya, karena bila dipanggil dengan

<img src="error-404.png">
# atau
<img src="errors/error-404.png">

tidak akan berhasil, karena pathnya tidak ditemukan. Lebih baik menggunakan S3, DigitalOcean Space dan lain sebagainya, contoh

<img src="https://cdn.jaranguda.com/error-404.png">
# atau
<img src="https://cdn.jaranguda.com/errors/error-404.png">

Tulisan menarik lainnya

  • Pelican Setting Custom Page untuk Article Page

    Bila anda ingin membuat satu halaman khusus untuk artikel (article) di Pelican. Beberapa solusi yang…

  • Membuat Linux Otomatis Shutdown

    Pada banyak kasus, banyak orang mau otomatis mematikan komputer/laptop dengan sistem operasi Linux yang dimiliki.…

  • Membuat File Dummy Ukuran Besar di Linux

    Untuk keperluan testing, kadang kita butuh data dummy dengan ukuran tertentu, contoh kalo mau tes…

  • Membuat Live USB Windows dari Linux

    Agar flashdisk bisa digunakan untuk menginstall Windows, ubah format partisi jadi NTFS dengan gparted Keterangan…

Filed Under: Linux

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Pencarian

Tanya Jawab tentang DevOps SRE CPE, gabung di https://t.me/devopsindonesia

Terbaru

  • Cara Mengganti Port Screen Sharing macOS
  • Cara Menonaktifkan Pager di macOS
  • Cara Mengupdate Nama Apple silicon-as-a-Service Scaleway
  • Cara Force Delete Namespace di Kubernetes
  • Install PHP MariaDB di Mac Monterey

Komentar

  • mazda on Tutorial Lengkap Install Mail Server Postfix Dovecot MariaDB di CentOS 7
  • adi on Menggunakan Mikrotik Sebagai SSH Client
  • aris u on Solusi Simple Queue Mikrotik Tidak Berjalan
  • Bowo on Cara Mematikan SSID Molecool Balifiber
  • aris on Solusi Simple Queue Mikrotik Tidak Berjalan

Tulisan Populer

  • Password Router Huawei HG8245H5 Indihome 1.2m views
  • Password Terbaru ZTE F609 Indihome 784.5k views
  • Password Superadmin Huawei HG8245A 318.7k views
  • Cara Setting Manual Modem GPON ZTE F609 Indihome 273.1k views
  • Cara Setting Wireless ZTE F609 Indihome 257.2k views
  • Mengaktifkan Port LAN di Huawei HG8245 Indihome 169.9k views
  • Akses UseeTV Indihome via Wireless ZTE F609 156.8k views
  • Kemana Menghilangnya Saldo BCA 50 ribu 153.4k views
  • Cara Reset Password ZTE F609 Indihome 147.6k views
  • Cara Setting DHCP Server Modem/Router ZTE F609 113.6k views

Kategori

  • Delphi
  • dll
  • Gambas
  • Internet
  • Java
  • Lazarus
  • Linux
  • PHP
  • Review
  • Teknologi

Sponsor

kadal.id
carakami.com
kuotabisa.com
Untuk jadi sponsor, hubungi kita lewat halaman sponsor
© 2021. Jaranguda
  • Linux
  • PHP
  • Internet
  • Teknologi
  • Delphi
  • Gambas
  • Java