• 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 Buat atau Update UID User Docker Image
  • Solusi helm Upgrade Failed
  • macOS package is untrusted
  • Cara Mengganti Port Screen Sharing macOS
  • Cara Menonaktifkan Pager di macOS

Komentar

  • Iqu on Review ISP Fiber Optik Balifiber
  • Sarah on Kemana Menghilangnya Saldo BCA 50 ribu
  • Rizcky on Kemana Menghilangnya Saldo BCA 50 ribu
  • Mubashar sadiq on Password Superadmin Huawei HG8245A
  • Beritalogi on Cara Redirect Domain di Cloudflare

Tulisan Populer

  • Password Router Huawei HG8245H5 Indihome 1.3m views
  • Password Terbaru ZTE F609 Indihome 786k views
  • Password Superadmin Huawei HG8245A 330.5k views
  • Cara Setting Manual Modem GPON ZTE F609 Indihome 275.5k views
  • Cara Setting Wireless ZTE F609 Indihome 260.4k views
  • Mengaktifkan Port LAN di Huawei HG8245 Indihome 172.2k views
  • Kemana Menghilangnya Saldo BCA 50 ribu 162.1k views
  • Akses UseeTV Indihome via Wireless ZTE F609 157.5k views
  • Cara Reset Password ZTE F609 Indihome 148.5k views
  • Cara Setting DHCP Server Modem/Router ZTE F609 115.5k 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