تبدو صفحات خطأ Whitelabel غير واضحة ويمكن أن تؤثر سلبًا على تجربة المستخدم. تعرف على كيفية إنشاء صفحات خطأ مخصصة باستخدام Thymeleaf.

يواجه البرنامج أخطاء. حتى أفضل التطبيقات ستواجه أخطاء في مرحلة ما. لذلك، يجب أن يكون لكل تطبيق بعض آليات معالجة الأخطاء.

يوفر Spring Boot صفحة خطأ Whitelabel الافتراضية كمكون للتكوين التلقائي الخاص به لمعالجة الأخطاء. ومع ذلك، من المتوقع أن يقوم المطورون بإنشاء صفحة خطأ مخصصة تحل محل صفحة خطأ Whitelabel. ستتعلم في هذه المقالة كيفية تخصيص صفحة الخطأ لتطبيقات Spring Boot.

صفحة خطأ Whitelabel في Spring Boot

عندما يواجه تطبيق Spring Boot خطأً، فإنه يطلب /error عنوان URL. إذا لم يكن هناك عرض في هذا الموقع، فسيتم عرض صفحة خطأ Whitelabel:

توضح صفحة خطأ Whitelabel تاريخ الخطأ ووقته، بالإضافة إلى المنطقة الزمنية المقابلة له. بالإضافة إلى ذلك، فهو يشير إلى نوع الخطأ والتعليمات البرمجية المرتبطة به. تنص صفحة Whitelabel على ذلك هذا خطأ 404 (الصفحة غير موجودة). وذلك لأن نموذج التطبيق لا يحتوي على تعيين لعنوان URL "/products".

معظم المعلومات المقدمة في صفحة خطأ Whitelabel مأخوذة من سمات خطأ محددة. تتمتع طريقة عرض الأخطاء في Spring Boot بإمكانية الوصول إلى سمات الخطأ التالية:

instagram viewer

  • خطأ: سبب الخطأ.
  • الطابع الزمني: تاريخ ووقت حدوث الخطأ.
  • حالة: رمز حالة الخطأ.
  • استثناء: اسم فئة الاستثناء الجذري (إذا كان الخطأ نتيجة استثناء).
  • رسالة: رسالة الاستثناء (إذا كان الخطأ نتيجة استثناء).
  • أخطاء: أي نتائج من استثناء BindingResult (إذا كان الخطأ نتيجة استثناء).
  • يتعقب: تتبع مكدس الاستثناء (إذا كان الخطأ نتيجة استثناء).
  • طريق: مسار URL حيث يحدث الخطأ.

إنشاء صفحة خطأ باستخدام Thymeleaf

يجب أن يحتوي تطبيق Spring Boot على صفحة خطأ واحدة مخزنة في قالب "خطأ". سيختلف امتداد هذا القالب وفقًا لتقنية القالب التي تقرر استخدامها. على سبيل المثال، إذا اخترت قالب صفحات خادم Java (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 وصورتين لإنشاء العرض التالي:

اجعل صفحة الخطأ الخاصة بك سهلة الاستخدام

الغرض الأساسي من صفحة الخطأ هو إعلام المستخدم بحدوث خطأ محدد. ومع ذلك، لا تزال صفحة الخطأ هذه جانبًا من جوانب التطبيق. لذلك، يعد التأكد من أن صفحة الخطأ سهلة الاستخدام أيضًا أمرًا بالغ الأهمية.

وهذا يعني اختيار استخدام سمات الخطأ التي تنقل الخطأ بطريقة غير معقدة. لذلك، يمكنك اختيار استخدام سمة المسار بدلاً من سمة التتبع، وهي أكثر تعقيدًا وتحتوي على تفاصيل لا يحتاج المستخدم إلى معرفتها.

كما أنك لا ترغب في تزويد مستخدم عشوائي بمعلومات زائدة عن طريقة العمل الداخلية لتطبيقك، حيث قد يؤدي ذلك إلى تعريض أمان التطبيق للخطر.