هندل کردن ارور ها در react js

+ آقای (یا خانم) فلانی(ری اکت دولوپر)، این تغییره که دیروز دادین بالا، کاربرا به مشکل خورده لطفا حلش کنین.

- چه مشکلی؟ من دیروز قبل این که بدم بالا کلی تستش کردم که:///

+ یکیشون میگه ویس رو که وصل میکنم، پیام سوم از لیست پیام ها پاک میشه.

- ویس وصل می کنه پیام پاک میشه؟؟؟؟؟ اصلا تغییرات من که ربطی به ویس و پیام نداشت :////

+ دیگه نمیدونم دیگه. اینجوری به من گفتن.

- :///////

مشکل از کجاست؟

اگه فرانت دولوپر باشین، احتمالا زیاد با این سناریو مواجه شدین. یه تغییری تو کد میدین مثلا یه فیچر یجا اضافه می کنین، کلی خودتون تستش می کنین که مشکلی نداشته باشه، بعد که تغییر رو میبرین روی پروژه و میرسه دست یوزر که استفاده کنه، یهو به باگ های به شدت عجیبی میخوره که اصلا ربطی به اون کدهایی که شما تغییر دادین نداره. و شما اولین سوالی که براتون پیش میاد اینه که: "خب الان از کجا بفهمم که مشکل از کجاست؟؟؟؟"

بک اند کار ها به مراتب راحت تر میتونن مشکل رو پیدا کنن به خاطر این که باگ های سمت بک اند توی سرور اتفاق میفته و اونها میتونن به لاگ ها دسترسی داشته باشن و از اون طریق بفهمن که عه فلان جا فلان چیز رو فلان کردم که فلان شده. ولی مشکل فرانت کار ها زمانی شروع میشه که کد پروداکت شده و دست یوزره. اون وقت اگه به مشکلی بخورید باید به یوزر بگید: "لطفا developer option مرورگرت رو باز کن تا ببینم ارور چی بوده."(البته اول باید بهش توضیح بدید دولوپر آپشن چیه و چجوری باز میشه:)))))).

خلاصه ی امر اینکه می خوام راه حلی که خودم برای این مشکل پیدا کردم رو با شما هم در میون بزارم...

خب ما به راه حلی احتیاج داریم که بتونیم ارور هایی که سمت کاربر اتفاق میفته رو بفرستیم سمت سرور و اونجا در فایلی ذخیره بکنیم که بعد با دیدن این لاگ ها بتونیم کدمون رو دیباگ کنیم.

componentDidCatch:

بعضی از مواقع ممکنه شما خطایی داشته باشین، که کامپوننت ها به ارور بخورن و رندر نشن. این مثال رو نگاه کنین:

const customize = {
    language: &quotfa&quot,
};

const App = () => {
    return (
        <>
            { customize.color.darkMode ? <p>dark</p> : <p>light</p> }
        </>
    );
};

export default App;

اگه یکم در مورد این موضوع بسرچین(سرچیدن=سرچ کردن) متوجه میشین برای catch کردن خطای کامپوننت های داخل یک کامپوننت یا خود کامپوننت، نمیتونین کامپوننت رو داخل بلاک try, catch بزارین.(البته که میتونین به هر حال که خواستن توانستن است ولی فایده ای نداره). مثلا اینجوری نمیشه:

try{
    return <App/>;
}
catch(err){
    begiresh(err);
}

و اینکه چرا نمیشه؟ ارجاعتون میدم به داکیومنت خود react:

try / catch is great but it only works for imperative code:
However, React components are declarative and specify what should be rendered:

برای این کار باید از componentDidCatch استفاده کنین که میاد و هر اروری که باعث شده کامپوننت های داخلی یک کامپوننت نتونن رندر بشن رو catch میکنه. چون در مورد این ویژگی react زیاد مطلب هست من صرفا به گذاشتن یه لینک از اونا قناعت می کنم.

• استفاده از componentDidCatch در class component ها
• استفاده از componentDidCatch در function component ها

شما میتونید از componentDidCatch استفاده کنین و خطاهایی که catch میکنید رو بفرستید سمت سرور.

چیجوری خطاهارو بفرستین سمت سرور؟ ادامه رو بخونید:)

useErrorSender:

مشکل اصلی از جایی شروع میشه که خیلی مواقع شما به خطایی بر می خورین که کامپوننت ها با موفقیت رندر میشن ولی اون نتیجه ای که انتظار دارید رو نمیبینید. مثل همین سناریویی که اول مقاله گفتم. در این مواقع باید چه کرد؟ من یه hook برای react نوشتم که تا حدودی هندل کردن ارور ها در این حالت دوم رو اوکی میکنه.

این هوک به دو صورت ممکنه استفاده بشه:

• زمانی که خودتون یه اروری رو دارین هندل میکنین. مثلا یه دیتایی از api گرفتین که اون چیزی که می خواین نیست. در این حالت میتونین از try, catch استفاده کنید. و مثلا توی catch از این هوک استفاده کنین.
• خطاهایی که شما کلا حواستون نبوده اونا رو هندل کنین. که مجددا این خطاها با استفاده از این هوک هندل میشن و به سرورتون ارسال میشن.

خب چیجوری باید از این هوک استفاده بکنین؟:

این هوک رو به این صورت باید فراخونی کنید:

const url = &quothttp://localhost:3001/api/catchError&quot
const sendError = useErrorSender(url);

در زمان فراخونی باید url سروری که می خواید ارور ها به اون ارسال بشه رو به عنوان آرگومان بهش بدید. هوک هم یه متد به شما برمیگردونه که شما با استفاده از اون به این صورت میتونین ارور هاتون رو سمت سرور ارسال کنین:

try{
    throw new Error(&quoterror sender test&quot);
}
catch(err){
    sendError(err);
}

اما این در حالتیه که شما خودتون ارور هاتون رو هندل بکنید. اما اگه جایی هم باشه که ارور هاتون رو هندل نکرده باشین، اگه این هوک رو فراخونی کنید، هوک خودش اون ارور هارو میگیره و میفرسته سمت سرور. هوک این کار رو با مقدار دهی یه فانکشن به ایونت آبجکت گلوبال window انجام میده.

برای اطلاعات بیشتر در مورد این هوک، داکیومنتش رو بخونید اونجا کامل در موردش نوشتم:

جمع بندی:

خب پس تا اینجا تونستیم ارور هامون سمت فرانت رو هندل کنیم و به کمک هوک useErrorSender اونها رو بفرستیم سمت apiمون. تو یه مقاله ی دیگه در مورد اینکه تو api چیجوری این ارور های ارسال شده از سمت فرانت رو هندل کنیم مینویسم و لینکشو میزارم همینجا.