{"id":69963,"date":"2024-07-19T16:43:48","date_gmt":"2024-07-19T13:13:48","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d8%aa%d8%b3%d9%84%d8%b7-%d8%a8%d8%b1-%d9%85%d8%b1%d8%b2%d9%87%d8%a7%db%8c-%d8%ae%d8%b7%d8%a7-%d8%af%d8%b1-react-%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d9%85\/"},"modified":"2024-07-19T16:43:48","modified_gmt":"2024-07-19T13:13:48","slug":"%d8%aa%d8%b3%d9%84%d8%b7-%d8%a8%d8%b1-%d9%85%d8%b1%d8%b2%d9%87%d8%a7%db%8c-%d8%ae%d8%b7%d8%a7-%d8%af%d8%b1-react-%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d9%85","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d8%aa%d8%b3%d9%84%d8%b7-%d8%a8%d8%b1-%d9%85%d8%b1%d8%b2%d9%87%d8%a7%db%8c-%d8%ae%d8%b7%d8%a7-%d8%af%d8%b1-react-%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d9%85\/","title":{"rendered":"\u062a\u0633\u0644\u0637 \u0628\u0631 \u0645\u0631\u0632\u0647\u0627\u06cc \u062e\u0637\u0627 \u062f\u0631 React: \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u0648\u062b\u0631 \u062e\u0637\u0627"},"content":{"rendered":"<p><\/p>\n<div data-article-id=\"1928962\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%d8%aa%d8%b3%d9%84%d8%b7-%d8%a8%d8%b1-%d9%85%d8%b1%d8%b2%d9%87%d8%a7%db%8c-%d8%ae%d8%b7%d8%a7-%d8%af%d8%b1-react-%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d9%85\/#%D9%85%D8%B1%D8%B2_%D8%AE%D8%B7%D8%A7_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\u0645\u0631\u0632 \u062e\u0637\u0627 \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/%d8%aa%d8%b3%d9%84%d8%b7-%d8%a8%d8%b1-%d9%85%d8%b1%d8%b2%d9%87%d8%a7%db%8c-%d8%ae%d8%b7%d8%a7-%d8%af%d8%b1-react-%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d9%85\/#%D9%85%D8%B1%D8%B2_%D8%AE%D8%B7%D8%A7_%DA%86%DA%AF%D9%88%D9%86%D9%87_%DA%A9%D9%85%DA%A9_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF%D8%9F\" >\u0645\u0631\u0632 \u062e\u0637\u0627 \u0686\u06af\u0648\u0646\u0647 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%d8%aa%d8%b3%d9%84%d8%b7-%d8%a8%d8%b1-%d9%85%d8%b1%d8%b2%d9%87%d8%a7%db%8c-%d8%ae%d8%b7%d8%a7-%d8%af%d8%b1-react-%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d9%85\/#%DA%86%DA%AF%D9%88%D9%86%D9%87_%D8%A7%D8%B2_%D9%85%D8%B1%D8%B2_%D8%AE%D8%B7%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%DA%A9%D9%86%DB%8C%D9%85%D8%9F\" >\u0686\u06af\u0648\u0646\u0647 \u0627\u0632 \u0645\u0631\u0632 \u062e\u0637\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/%d8%aa%d8%b3%d9%84%d8%b7-%d8%a8%d8%b1-%d9%85%d8%b1%d8%b2%d9%87%d8%a7%db%8c-%d8%ae%d8%b7%d8%a7-%d8%af%d8%b1-react-%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d9%85\/#%D9%85%D8%B4%DA%A9%D9%84_%D9%85%D8%B1%D8%B2_%D8%AE%D8%B7%D8%A7%DB%8C_React_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\u0645\u0634\u06a9\u0644 \u0645\u0631\u0632 \u062e\u0637\u0627\u06cc React \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%d8%aa%d8%b3%d9%84%d8%b7-%d8%a8%d8%b1-%d9%85%d8%b1%d8%b2%d9%87%d8%a7%db%8c-%d8%ae%d8%b7%d8%a7-%d8%af%d8%b1-react-%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d9%85\/#%D8%B1%D8%A7%D9%87_%D8%AD%D9%84_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\u0631\u0627\u0647 \u062d\u0644 \u0686\u06cc\u0633\u062a\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%d8%aa%d8%b3%d9%84%d8%b7-%d8%a8%d8%b1-%d9%85%d8%b1%d8%b2%d9%87%d8%a7%db%8c-%d8%ae%d8%b7%d8%a7-%d8%af%d8%b1-react-%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d9%85\/#%DA%86%DA%AF%D9%88%D9%86%D9%87_%D8%A7%D8%B2_%D8%A2%D9%86_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%DA%A9%D9%86%DB%8C%D9%85%D8%9F\" >\u0686\u06af\u0648\u0646\u0647 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%d8%aa%d8%b3%d9%84%d8%b7-%d8%a8%d8%b1-%d9%85%d8%b1%d8%b2%d9%87%d8%a7%db%8c-%d8%ae%d8%b7%d8%a7-%d8%af%d8%b1-react-%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d9%85\/#%D8%AF%D8%B1%DA%A9_%D9%88%D8%A7%DA%A9%D9%86%D8%B4_%D8%AE%D8%B7%D8%A7-%D9%85%D8%B1%D8%B2_API\" >\u062f\u0631\u06a9 \u0648\u0627\u06a9\u0646\u0634 \u062e\u0637\u0627-\u0645\u0631\u0632 API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%d8%aa%d8%b3%d9%84%d8%b7-%d8%a8%d8%b1-%d9%85%d8%b1%d8%b2%d9%87%d8%a7%db%8c-%d8%ae%d8%b7%d8%a7-%d8%af%d8%b1-react-%d8%b1%d8%a7%d9%87%d9%86%d9%85%d8%a7%db%8c-%d9%85%d8%af%db%8c%d8%b1%db%8c%d8%aa-%d9%85\/#%DA%86%D9%86%D8%AF_%D8%AA%D8%A7_%DA%AF%D9%88%DA%86%D8%A7\" >\u0686\u0646\u062f \u062a\u0627 \u06af\u0648\u0686\u0627<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%B2_%D8%AE%D8%B7%D8%A7_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  \u0645\u0631\u0632 \u062e\u0637\u0627 \u0686\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u060c \u062e\u0637\u0627\u0647\u0627 \u0627\u062c\u062a\u0646\u0627\u0628 \u0646\u0627\u067e\u0630\u06cc\u0631 \u0647\u0633\u062a\u0646\u062f.  \u0622\u0646\u0647\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u0632 API \u0647\u0627\u060c UI \u06cc\u0627 \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u0645\u06a9\u0627\u0646 \u062f\u06cc\u06af\u0631 \u0622\u0645\u062f\u0647 \u0628\u0627\u0634\u0646\u062f.<\/p>\n<p>\u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0627\u06cc\u0646 \u062e\u0637\u0627\u0647\u0627 \u0628\u0627 \u0638\u0631\u0627\u0641\u062a \u0628\u0631\u062e\u0648\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0627 \u0648\u062c\u0648\u062f \u0627\u06cc\u0646 \u062e\u0637\u0627\u0647\u0627 UX \u062e\u0648\u0628 \u0631\u0627 \u062d\u0641\u0638 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>Error Boundary \u06cc\u06a9\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627 \u062f\u0631 React \u0627\u0633\u062a.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%B2_%D8%AE%D8%B7%D8%A7_%DA%86%DA%AF%D9%88%D9%86%D9%87_%DA%A9%D9%85%DA%A9_%D9%85%DB%8C_%DA%A9%D9%86%D8%AF%D8%9F\"><\/span>\n<p>  \u0645\u0631\u0632 \u062e\u0637\u0627 \u0686\u06af\u0648\u0646\u0647 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0648\u0636\u0639\u06cc\u062a \u0642\u0628\u0644 \u0627\u0632 \u0645\u0639\u0631\u0641\u06cc \u0645\u0631\u0632 \u062e\u0637\u0627 \u0631\u0627 \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0642\u0628\u0644 \u0627\u0632 Error Boundaries\u060c \u062e\u0637\u0627\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627 \u0631\u062e \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u0647 \u0648 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0627 \u0634\u06a9\u0633\u062a\u0647 \u06cc\u0627 \u0635\u0641\u062d\u0647 \u0633\u0641\u06cc\u062f \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0628\u0627\u0639\u062b \u06cc\u06a9 UX \u0648\u0627\u0642\u0639\u0627 \u0628\u062f \u0634\u062f.<\/p>\n<p>\u0645\u0631\u0632 \u062e\u0637\u0627 \u0628\u0647 \u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0628\u0627 \u0686\u0646\u06cc\u0646 \u062e\u0637\u0627\u0647\u0627\u06cc\u06cc \u0628\u0631\u062e\u0648\u0631\u062f \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0647 \u062c\u0627\u06cc \u0634\u06a9\u0633\u062a\u0646 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u06cc\u0627 \u0635\u0641\u062d\u0647 \u0633\u0641\u06cc\u062f \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647\u060c \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0627\u0632\u06af\u0634\u062a\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u0645.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%DA%86%DA%AF%D9%88%D9%86%D9%87_%D8%A7%D8%B2_%D9%85%D8%B1%D8%B2_%D8%AE%D8%B7%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%DA%A9%D9%86%DB%8C%D9%85%D8%9F\"><\/span>\n<p>  \u0686\u06af\u0648\u0646\u0647 \u0627\u0632 \u0645\u0631\u0632 \u062e\u0637\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React v16 \u0628\u0647 \u0637\u0648\u0631 \u0631\u0633\u0645\u06cc Error Boundary \u0631\u0627 \u0645\u0639\u0631\u0641\u06cc \u06a9\u0631\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u06cc\u06a9 \u062c\u0632\u0621 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u06a9\u0644\u0627\u0633 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0627\u0632\u06af\u0634\u062a\u06cc \u0631\u0627 \u0645\u06cc\u200c\u067e\u0630\u06cc\u0631\u062f \u062a\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u062f\u0627\u0631\u0627\u06cc \u062e\u0637\u0627 \u0628\u0627\u0634\u062f \u06cc\u0627 \u062f\u0631 \u063a\u06cc\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f\u060c \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0645\u0624\u0644\u0641\u0647 \u0641\u0631\u0632\u0646\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0632 \u0633\u0631\u06af\u06cc\u0631\u06cc \u062c\u0631\u06cc\u0627\u0646 \u0639\u0627\u062f\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0627\u0633\u062a \u06a9\u0647 React Documentation \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0631\u0627 \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">class<\/span> <span class=\"nc\">ErrorBoundary<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">super<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span> <span class=\"na\">hasError<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span> <span class=\"p\">};<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"kd\">static<\/span> <span class=\"nf\">getDerivedStateFromError<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Update state so the next render will show the fallback UI.<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"na\">hasError<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">};<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">componentDidCatch<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">,<\/span> <span class=\"nx\">info<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ Example \"componentStack\":<\/span>\n    <span class=\"c1\">\/\/   in ComponentThatThrows (created by App)<\/span>\n    <span class=\"c1\">\/\/   in ErrorBoundary (created by App)<\/span>\n    <span class=\"c1\">\/\/   in div (created by App)<\/span>\n    <span class=\"c1\">\/\/   in App<\/span>\n    <span class=\"nf\">logErrorToMyService<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">,<\/span> <span class=\"nx\">info<\/span><span class=\"p\">.<\/span><span class=\"nx\">componentStack<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">hasError<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ You can render any custom fallback UI<\/span>\n      <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">fallback<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">children<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B4%DA%A9%D9%84_%D9%85%D8%B1%D8%B2_%D8%AE%D8%B7%D8%A7%DB%8C_React_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  \u0645\u0634\u06a9\u0644 \u0645\u0631\u0632 \u062e\u0637\u0627\u06cc React \u0686\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0646\u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062e\u0637\u0627\u0647\u0627\u06cc \u0631\u062e \u062f\u0627\u062f\u0647 \u062f\u0631\u060c<\/p>\n<ul>\n<li>\u0631\u0648\u06cc\u062f\u0627\u062f Handlers (\u0627\u06cc\u0646 \u062e\u0637\u0627\u0647\u0627 \u0628\u0627\u06cc\u062f \u0628\u0627 \u0628\u0644\u0648\u06a9\u200c\u0647\u0627\u06cc try-catch \u06a9\u0646\u062a\u0631\u0644 \u0634\u0648\u0646\u062f)<\/li>\n<li>\u06a9\u062f \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 (API \u0647\u0627\u060c setTimeout\u060c requestAnimationFrame \u0648 \u063a\u06cc\u0631\u0647)<\/li>\n<li>\u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631<\/li>\n<li>\u062e\u0637\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u062e\u0648\u062f Error Boundary \u0631\u062e \u0645\u06cc \u062f\u0647\u062f<\/li>\n<li>\u0628\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u06a9\u0627\u0631 \u0646\u0645\u06cc \u06a9\u0646\u062f.  \u0627\u06af\u0631\u0686\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0686\u0646\u062f \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u062f \u06a9\u0627\u0631 \u06a9\u0646\u06cc\u0645.<\/li>\n<li>\u062f\u0627\u062e\u0644 \u0622\u0646 \u0646\u0645\u06cc \u062a\u0648\u0627\u0646 \u0627\u0632 \u0642\u0644\u0627\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.<\/li>\n<\/ul>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%AD%D9%84_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  \u0631\u0627\u0647 \u062d\u0644 \u0686\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u06cc\u06a9 \u0628\u0633\u062a\u0647 npm \u0628\u0647 \u0646\u0627\u0645 react-error-boundary \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0645\u0648\u0644\u0641\u0647 \u0633\u0646\u062a\u06cc Error Boundary \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f.<\/p>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0628\u0633\u062a\u0647\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0631 \u062a\u0645\u0627\u0645 \u0645\u0634\u06a9\u0644\u0627\u062a \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0645\u0631\u0632 \u062e\u0637\u0627\u06cc \u0633\u0646\u062a\u06cc \u063a\u0644\u0628\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%DA%86%DA%AF%D9%88%D9%86%D9%87_%D8%A7%D8%B2_%D8%A2%D9%86_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%DA%A9%D9%86%DB%8C%D9%85%D8%9F\"><\/span>\n<p>  \u0686\u06af\u0648\u0646\u0647 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u06cc\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u062c\u0632\u0627\u06cc \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0631\u0627 \u0628\u0627 .<\/p>\n<p>\u062c\u0632\u0626\u06cc\u0627\u062a \u0627\u062c\u0631\u0627 \u0628\u0647 \u0639\u0647\u062f\u0647 \u0634\u0645\u0627\u0633\u062a.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0631\u0627 \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ErrorBoundary<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-error-boundary<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">App<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n<span class=\"k\">return<\/span> <span class=\"o\"><span class=\"nx\">ErrorBoundary<\/span> <span class=\"nx\">fallback<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\"><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Something<\/span> <span class=\"nx\">went<\/span> <span class=\"nx\">wrong<\/span><span class=\"o\"><span class=\"sr\">\/div&gt;}<\/span><span class=\"err\">&gt;\n<\/span><span class=\"cm\">\/* rest of your component *\/<\/span>\n<span class=\"o\"><span class=\"sr\">\/ErrorBoundary<\/span><span class=\"err\">&gt;\n<\/span><span class=\"p\">}<\/span>\n\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0633\u0627\u062f\u0647 \u062a\u0631\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 ErrorBoundary \u0627\u0633\u062a.  \u0686\u06cc\u0632\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1%DA%A9_%D9%88%D8%A7%DA%A9%D9%86%D8%B4_%D8%AE%D8%B7%D8%A7-%D9%85%D8%B1%D8%B2_API\"><\/span>\n<p>  \u062f\u0631\u06a9 \u0648\u0627\u06a9\u0646\u0634 \u062e\u0637\u0627-\u0645\u0631\u0632 API<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0633\u0639\u06cc \u06a9\u0646\u06cc\u0645 API \u0631\u0627 \u0628\u0627 \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u0645.<\/p>\n<p><strong>1. \u0645\u0646 \u0645\u06cc \u062e\u0648\u0627\u0647\u0645 \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0639\u0645\u0648\u0645\u06cc \u0628\u0631\u0627\u06cc \u062e\u0637\u0627\u0647\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0634\u0627\u0646 \u062f\u0647\u0645<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ErrorBoundary<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-error-boundary<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n <span class=\"kd\">const<\/span> <span class=\"nx\">App<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n <span class=\"k\">return<\/span> <span class=\"o\"><span class=\"nx\">ErrorBoundary<\/span> <span class=\"nx\">fallback<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"o\"><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Something<\/span> <span class=\"nx\">went<\/span> <span class=\"nx\">wrong<\/span><span class=\"o\"><span class=\"sr\">\/div&gt;}<\/span><span class=\"err\">&gt;\n<\/span> <span class=\"cm\">\/* rest of your component *\/<\/span>\n <span class=\"o\"><span class=\"sr\">\/ErrorBoundary<\/span><span class=\"err\">&gt;\n<\/span> <span class=\"p\">}<\/span>\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>2. \u0645\u0646 \u0645\u06cc \u062e\u0648\u0627\u0647\u0645 \u062c\u0632\u0626\u06cc\u0627\u062a \u062e\u0637\u0627\u06cc \u062e\u0627\u0635\u06cc \u0631\u0627 \u062f\u0631 \u062c\u0632\u0621 \u0628\u0627\u0632\u06af\u0634\u062a\u06cc \u062e\u0648\u062f \u0646\u0634\u0627\u0646 \u062f\u0647\u0645<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ErrorBoundary<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-error-boundary<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n <span class=\"kd\">function<\/span> <span class=\"nf\">fallbackRender<\/span><span class=\"p\">({<\/span> <span class=\"nx\">error<\/span><span class=\"p\">,<\/span> <span class=\"nx\">resetErrorBoundary<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n   <span class=\"c1\">\/\/ Call resetErrorBoundary() to reset the error boundary and retry the render.<\/span>\n   <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n     <span class=\"o\"><span class=\"nx\">div<\/span> <span class=\"nx\">role<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">alert<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n       <span class=\"o\"><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Something<\/span> <span class=\"nx\">went<\/span> <span class=\"nx\">wrong<\/span><span class=\"p\">:<\/span><span class=\"o\"><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>       <span class=\"o\"><span class=\"nx\">pre<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">red<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}}<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"p\">}<\/span><span class=\"o\"><span class=\"sr\">\/pre<\/span><span class=\"err\">&gt;\n<\/span>     <span class=\"o\"><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>   <span class=\"p\">);<\/span>\n <span class=\"p\">}<\/span>\n\n <span class=\"kd\">const<\/span> <span class=\"nx\">App<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n <span class=\"k\">return<\/span> <span class=\"o\"><span class=\"nx\">ErrorBoundary<\/span> \n <span class=\"nx\">fallbackRender<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">fallbackRender<\/span><span class=\"p\">}<\/span>\n <span class=\"nx\">onReset<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">details<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n     <span class=\"c1\">\/\/ Reset the state of your app so the error doesn't happen again<\/span>\n   <span class=\"p\">}}<\/span>\n <span class=\"o\">&gt;<\/span>\n <span class=\"cm\">\/* rest of your component *\/<\/span>\n <span class=\"o\"><span class=\"sr\">\/ErrorBoundary<\/span><span class=\"err\">&gt;\n<\/span> <span class=\"p\">}<\/span>\n\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0647 \u062c\u0627\u06cc \u0628\u0627\u0632\u06af\u0634\u062a \u0645\u062c\u062f\u062f \u06cc\u0627 \u0631\u0646\u062f\u0631\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 React Component \u0646\u06cc\u0632 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ErrorBoundary<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-error-boundary<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n <span class=\"kd\">const<\/span> <span class=\"nx\">Fallback<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">error<\/span><span class=\"p\">,<\/span> <span class=\"nx\">resetErrorBoundary<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n   <span class=\"c1\">\/\/ Call resetErrorBoundary() to reset the error boundary and retry the render.<\/span>\n   <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n     <span class=\"o\"><span class=\"nx\">div<\/span> <span class=\"nx\">role<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">alert<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n       <span class=\"o\"><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Something<\/span> <span class=\"nx\">went<\/span> <span class=\"na\">wrong<\/span><span class=\"p\">:<\/span><span class=\"o\"><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>       <span class=\"o\"><span class=\"nx\">pre<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">red<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}}<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"p\">}<\/span><span class=\"o\"><span class=\"sr\">\/pre<\/span><span class=\"err\">&gt;\n<\/span>     <span class=\"o\"><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>   <span class=\"p\">);<\/span>\n <span class=\"p\">}<\/span>\n\n <span class=\"kd\">const<\/span> <span class=\"nx\">App<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n <span class=\"k\">return<\/span> <span class=\"o\"><span class=\"nx\">ErrorBoundary<\/span> \n <span class=\"nx\">FallbackComponent<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Fallback<\/span><span class=\"p\">}<\/span>\n <span class=\"nx\">onReset<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">details<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n     <span class=\"c1\">\/\/ Reset the state of your app so the error doesn't happen again<\/span>\n   <span class=\"p\">}}<\/span>\n <span class=\"o\">&gt;<\/span>\n <span class=\"cm\">\/* rest of your component *\/<\/span>\n <span class=\"o\"><span class=\"sr\">\/ErrorBoundary<\/span><span class=\"err\">&gt;\n<\/span> <span class=\"p\">}<\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>3. \u0645\u0646 \u0645\u06cc \u062e\u0648\u0627\u0647\u0645 \u062e\u0637\u0627\u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062b\u0628\u062a \u06a9\u0646\u0645<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code> <span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ErrorBoundary<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-error-boundary<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n <span class=\"kd\">const<\/span> <span class=\"nx\">logError<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Error<\/span><span class=\"p\">,<\/span> <span class=\"nx\">info<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"nl\">componentStack<\/span><span class=\"p\">:<\/span> <span class=\"nx\">string<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n   <span class=\"c1\">\/\/ Do something with the error, e.g. log to an external API<\/span>\n <span class=\"p\">};<\/span>\n\n <span class=\"kd\">const<\/span> <span class=\"nx\">Fallback<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">error<\/span><span class=\"p\">,<\/span> <span class=\"nx\">resetErrorBoundary<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n   <span class=\"c1\">\/\/ Call resetErrorBoundary() to reset the error boundary and retry the render.<\/span>\n   <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n     <span class=\"o\"><span class=\"nx\">div<\/span> <span class=\"nx\">role<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">alert<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n       <span class=\"o\"><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">Something<\/span> <span class=\"nx\">went<\/span> <span class=\"na\">wrong<\/span><span class=\"p\">:<\/span><span class=\"o\"><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\n<\/span>       <span class=\"o\"><span class=\"nx\">pre<\/span> <span class=\"nx\">style<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">red<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}}<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"p\">}<\/span><span class=\"o\"><span class=\"sr\">\/pre<\/span><span class=\"err\">&gt;\n<\/span>     <span class=\"o\"><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>   <span class=\"p\">);<\/span>\n <span class=\"p\">}<\/span>\n <span class=\"c1\">\/\/ You can use fallback \/ fallbackRender \/ FallbackComponent anything<\/span>\n <span class=\"kd\">const<\/span> <span class=\"nx\">App<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n <span class=\"k\">return<\/span> <span class=\"o\"><span class=\"nx\">ErrorBoundary<\/span> \n <span class=\"nx\">FallbackComponent<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">Fallback<\/span><span class=\"p\">}<\/span>\n <span class=\"nx\">onError<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">logError<\/span><span class=\"p\">}<\/span>\n <span class=\"nx\">onReset<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">details<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n     <span class=\"c1\">\/\/ Reset the state of your app so the error doesn't happen again<\/span>\n   <span class=\"p\">}}<\/span>\n <span class=\"o\">&gt;<\/span>\n <span class=\"cm\">\/* rest of your component *\/<\/span>\n <span class=\"o\"><span class=\"sr\">\/ErrorBoundary<\/span><span class=\"err\">&gt;\n<\/span> <span class=\"p\">}<\/span>\n\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>4. \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u0645 \u062e\u0637\u0627\u0647\u0627 \u0631\u0627 \u062f\u0631 \u06a9\u0646\u062a\u0631\u0644\u200c\u06a9\u0646\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u0648 \u06a9\u062f\u0647\u0627\u06cc \u0647\u0645\u06af\u0627\u0645\u200c\u0633\u0627\u0632\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0645<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code> <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useErrorBoundary<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-error-boundary<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n <span class=\"kd\">function<\/span> <span class=\"nf\">Example<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n   <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">showBoundary<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useErrorBoundary<\/span><span class=\"p\">();<\/span>\n   <span class=\"kd\">const<\/span> <span class=\"nx\">getGreeting<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async<\/span><span class=\"p\">(<\/span><span class=\"nx\">name<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n     <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n         <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetchGreeting<\/span><span class=\"p\">(<\/span><span class=\"nx\">name<\/span><span class=\"p\">);<\/span>\n         <span class=\"c1\">\/\/ rest of your code<\/span>\n     <span class=\"p\">}<\/span> <span class=\"k\">catch<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">){<\/span>\n          <span class=\"c1\">\/\/ Show error boundary<\/span>\n         <span class=\"nf\">showBoundary<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n     <span class=\"p\">}<\/span>\n   <span class=\"p\">}<\/span>\n   <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">getGreeting<\/span><span class=\"p\">()<\/span>\n   <span class=\"p\">});<\/span>\n\n   <span class=\"k\">return<\/span> <span class=\"o\"><span class=\"nx\">Whatever<\/span> <span class=\"nx\">UI<\/span> <span class=\"nx\">you<\/span> <span class=\"nx\">want<\/span> <span class=\"nx\">to<\/span> <span class=\"nx\">render<\/span><span class=\"o\">\/&gt;<\/span>\n <span class=\"p\">}<\/span>\n\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%DA%86%D9%86%D8%AF_%D8%AA%D8%A7_%DA%AF%D9%88%DA%86%D8%A7\"><\/span>\n<p>  \u0686\u0646\u062f \u062a\u0627 \u06af\u0648\u0686\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<blockquote>\n<p>ErrorBoundary \u06cc\u06a9 \u062c\u0632\u0621 \u0645\u0634\u062a\u0631\u06cc \u0627\u0633\u062a.  \u0634\u0645\u0627 \u0641\u0642\u0637 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u067e\u0631\u0648\u067e\u0648\u0632\u0627\u0644 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0642\u0627\u0628\u0644 \u0633\u0631\u06cc\u0627\u0644 \u0633\u0627\u0632\u06cc \u0647\u0633\u062a\u0646\u062f \u06cc\u0627 \u0627\u0632 \u0622\u0646 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0627\u0631\u0627\u06cc &#8220;use Client&#8221; \u0647\u0633\u062a\u0646\u062f.  \u0628\u062e\u0634\u0646\u0627\u0645\u0647<\/p>\n<\/blockquote>\n<p><strong>1. \u0633\u0631\u067e\u0627\u06cc\u06cc \u0642\u0627\u0628\u0644 \u0633\u0631\u06cc\u0627\u0644 \u0686\u06cc\u0633\u062a\u061f<\/strong><\/p>\n<p>Prop Serilzable \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u062c\u0631\u06cc\u0627\u0646 \u0628\u0627\u06cc\u062a\u06cc \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062f \u0628\u0647 \u06af\u0648\u0646\u0647 \u0627\u06cc \u06a9\u0647 \u062c\u0631\u06cc\u0627\u0646 \u0628\u0627\u06cc\u062a \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0647 \u067e\u0627\u06cc\u0647 \u0627\u0635\u0644\u06cc \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062f.<\/p>\n<p>\u06cc\u06a9 \u0631\u0627\u0647 \u0645\u0639\u0645\u0648\u0644 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a JSON.stringify() \u0648 JSON.parse() \u0627\u0633\u062a.<\/p>\n<p><strong>2. \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 &#8220;\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0634\u062a\u0631\u06cc&#8221;;  \u0628\u062e\u0634\u0646\u0627\u0645\u0647\u061f<\/strong><\/p>\n<p>\u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0641\u0627\u06cc\u0644 \u0630\u06a9\u0631 \u06a9\u0646\u06cc\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\"use client\";\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<p>\u0686\u0646\u062f \u062a\u063a\u06cc\u06cc\u0631 \u062f\u06cc\u06af\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.  \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0627\u0641\u06cc \u062e\u0648\u0628 \u0627\u0633\u062a \u062a\u0627 \u0634\u0645\u0627 \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u0633\u0646\u0627\u062f \u06a9\u0627\u0645\u0644 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0644\u0637\u0641\u0627 \u0627\u06af\u0631 \u0645\u0641\u06cc\u062f \u0628\u0648\u062f \u062f\u0631 \u0646\u0638\u0631\u0627\u062a \u0628\u0647 \u0645\u0646 \u0627\u0637\u0644\u0627\u0639 \u062f\u0647\u06cc\u062f.<\/p>\n<p>\u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0631\u0632 \u062e\u0637\u0627 \u0686\u06cc\u0633\u062a\u061f \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u060c \u062e\u0637\u0627\u0647\u0627 \u0627\u062c\u062a\u0646\u0627\u0628 \u0646\u0627\u067e\u0630\u06cc\u0631 \u0647\u0633\u062a\u0646\u062f. \u0622\u0646\u0647\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u0632 API \u0647\u0627\u060c UI \u06cc\u0627 \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u0645\u06a9\u0627\u0646 \u062f\u06cc\u06af\u0631 \u0622\u0645\u062f\u0647 \u0628\u0627\u0634\u0646\u062f. \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0627\u06cc\u0646 \u062e\u0637\u0627\u0647\u0627 \u0628\u0627 \u0638\u0631\u0627\u0641\u062a \u0628\u0631\u062e\u0648\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0627 \u0648\u062c\u0648\u062f \u0627\u06cc\u0646 \u062e\u0637\u0627\u0647\u0627 UX \u062e\u0648\u0628 \u0631\u0627 \u062d\u0641\u0638 \u06a9\u0646\u06cc\u062f. Error Boundary \u06cc\u06a9\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":69964,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media.dev.to\/cdn-cgi\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5pk3p3docv1wvfd5elmm.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-69963","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/69963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=69963"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/69963\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/69964"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=69963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=69963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=69963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}