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
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
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">