דפי שגיאה בתווית לבנה נראים בוטים ועשויים להשפיע לרעה על חווית המשתמש. למד כיצד ליצור דפי שגיאה מותאמים אישית באמצעות Thymeleaf.

תוכנה חווה שגיאות. אפילו היישומים הטובים ביותר יתקלו בשגיאות בשלב מסוים. לכן, לכל יישום צריך להיות כמה מנגנוני טיפול בשגיאות.

Spring Boot מספק דף שגיאה Whitelabel ברירת מחדל כמרכיב של התצורה האוטומטית שלו לטיפול בשגיאות. עם זאת, הציפייה היא שמפתחים ייצרו דף שגיאה מותאם אישית שיחליף את דף השגיאה Whitelabel. במאמר זה, תלמד כיצד להתאים אישית את דף השגיאה עבור יישומי Spring Boot שלך.

דף השגיאה הלבנה של Spring Boot

כאשר יישום Spring Boot נתקל בשגיאה, הוא מבקש את /error כתובת אתר. אם אין תצוגה במיקום זה, הוא מציג את דף השגיאה Whitelabel:

דף השגיאה של Whitelabel מציין את התאריך והשעה של השגיאה, יחד עם אזור הזמן המתאים לה. בנוסף, הוא מציין את סוג השגיאה והקוד המשויך לה. עמוד Whitelabel מציין זאת זו שגיאת 404 (הדף לא נמצא). הסיבה לכך היא שליישום לדוגמה אין מיפוי עבור כתובת האתר "/products".

רוב המידע המוצג בדף השגיאה Whitelabel נלקח ממאפייני שגיאה ספציפיים. לתצוגת השגיאה של Spring Boot יש גישה למאפייני השגיאה הבאים:

instagram viewer
  • שְׁגִיאָה: הסיבה לשגיאה.
  • חותמת זמן: התאריך והשעה שבהם התרחשה השגיאה.
  • סטָטוּס: קוד מצב השגיאה.
  • יוצא מן הכלל: שם המחלקה של חריג השורש (אם השגיאה היא תוצאה של חריג).
  • הוֹדָעָה: הודעת החריגה (אם השגיאה היא תוצאה של חריגה).
  • שגיאות: כל תוצאות מחריג BindingResult (אם השגיאה היא תוצאה של חריגה).
  • זֵכֶר: מעקב מחסנית החריג (אם השגיאה היא תוצאה של חריגה).
  • נָתִיב: נתיב כתובת האתר שבו מתרחשת השגיאה.

יצירת דף שגיאה עם Thymeleaf

ליישום Spring Boot שלך אמור להיות דף שגיאה יחיד מאוחסן בתוך תבנית "שגיאה". ההרחבה של תבנית זו תשתנה בהתאם לטכנולוגיית התבנית שבה תחליט להשתמש. לדוגמה, אם תבחר בתבנית Java Server Pages (JSP), שם הקובץ צריך להיות error.jsp.

עם זאת, יישום Spring Boot לדוגמה זה משתמש מנוע התבנית Thymeleaf. אז, שם התבנית הוא error.html. עליך למקם באופן עקבי את תבנית השגיאה שלך ב- תבנית תיקייה, מתחת ל- אֶמְצָעִי ספרייה עם כל קבצי התבניות האחרים שלך.

הקובץ error.html

html>
<htmlxmlns: th="http://www.thymeleaf.org">
 <head>
<title> Errortitle>
<linkrel="stylesheet"th: href="@{/css/style.css}"/>
 head>
 <bodyth: style="'background: url(/images/background1.jpg) 
 no-repeat center center fixed;'">
<divclass="container" >
<h1>An error has occurred...h1>
<imgth: src="@{/images/error-icon.png}"
 width="100px" height="100px" />
<p>There seems to be a problem with the page you requested 
 (<spanth: text="${path}">span>).p>
<pth: text="${'The status code is ' + status 
 + ', which means that the page was ' + error + '.'}">p>
<pth: text="${'Further details: ' + message + '.'}">p>
<aclass="btn"href="/home">Back to homea>
div>
 body>
html>

דף השגיאה המותאם מבצע מספר משימות חשובות. הוא מצהיר על התרחשות שגיאה. לאחר מכן, הוא מציג לראווה בקשת ה-HTTP שגרם לשגיאה. יתר על כן, הוא מספק למשתמש את קוד המצב המשויך לשגיאה. אבל אם המשתמש לא מכיר קודי סטטוס, הדף גם מסביר את משמעות הקוד באמצעות תכונת השגיאה.

שורת הטקסט האחרונה מציגה למשתמש הודעה במקרה של חריגה. לאחר מכן, הקישור בסוף מאפשר למשתמש לנווט חזרה לדף הבית. ה error.html הקובץ משתמש בגיליון סגנונות CSS ושתי תמונות כדי ליצור את התצוגה הבאה:

שמור על דף השגיאה שלך ידידותי למשתמש

המטרה העיקרית של דף השגיאה היא ליידע את המשתמש שהתרחשה שגיאה ספציפית. עם זאת, דף השגיאה הזה הוא עדיין היבט של היישום. לכן, חשוב לוודא שדף השגיאה גם ידידותי למשתמש.

משמעות הדבר היא בחירה להשתמש בתכונות השגיאה המתקשרות לשגיאה בצורה לא מסובכת יותר. לכן, ייתכן שתבחר להשתמש בתכונת הנתיב במקום בתכונת המעקב, שהיא הרבה יותר מורכבת ומכילה פרטים שהמשתמש לא צריך לדעת.

אתה גם לא רוצה לספק למשתמש אקראי מידע מופרז על פעולתו הפנימית של היישום שלך, מכיוון שזה עלול לסכן את אבטחת היישום.