رسالة الخطأ تظهر حتى مع إستخدام ErrorBoundary في مكون React؟

أولاً هذا الخطأ error overlay الخاص ب react يظهر فقط في وضع ال Development mode ولن يظهر في ال production mode ويمكنك تعطيل ذلك عن طريق package تسمى react-error-overlay وتستخدم الدالة stopReportingRuntimeErrors كالتالي

أولاً تقوم بإضافة ال package 

yarn add react-error-overlay

ثم قم بعد ذلك بإستخدامها في ال root قبل استخدام ال render كالتالي

import { stopReportingRuntimeErrors } from "react-error-overlay";

if (process.env.NODE_ENV === "development") {
  stopReportingRuntimeErrors(); 
}

.بعد عمل الخطوات السابقة لن تظهر error overlay مرةأخرى

يمكنك القيام بذلك بشكل بسيط دون الإستعادنه بأي مكتبات خارجيه عن طريق عمل capture للإيفنت الخاص بال error عن طريق إضافة الكود التالي في الملف "public/index.html"  في الجزء الخاص ب ال "head"

<script>
      window.addEventListener('error', function(e){
 		// قم بمنع ريأكت من تشغيل ال listener الخاص بهم 
        e.stopImmediatePropagation();
  		// منع المتصفح من عمل console.log للإيرور أيضا
        e.preventDefault();
      });
</script>

في حالة كنت تريد إستخدام error overlay في أي خطأ خارج ال error boundary يمكنك إستخدام الكود التالي

<script>
      window.addEventListener('error', function(e){
        const {error} = e;
        if (!error.captured) {
          error.captured = true;
          e.stopImmediatePropagation();
          e.preventDefault();
          setTimeout(()=>{
            if (!error.shouldIgnore) {
              throw error;
            }
          })
        }
      });
</script>