{"id":373976,"date":"2023-03-31T13:53:56","date_gmt":"2023-03-31T13:53:56","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=373976"},"modified":"2024-11-28T11:56:31","modified_gmt":"2024-11-28T11:56:31","slug":"error-handling-in-react-16","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/","title":{"rendered":"How to use Error Boundaries in React 16\u00a0"},"content":{"rendered":"\n<p>A JavaScript error in a part of the UI shouldn\u2019t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an \u201cerror boundary\u201d.<\/p>\n\n\n\n<p>Error boundaries only catch errors in the components below them in the tree.<\/p>\n\n\n\n<p><strong>What are Error Boundaries?<\/strong><\/p>\n\n\n\n<p>Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed<\/p>\n\n\n\n<p><strong>Error Boundaries do not catch errors for:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Event handlers (<a href=\"https:\/\/legacy.reactjs.org\/docs\/error-boundaries.html#how-about-event-handlers\">learn more<\/a>)<\/li>\n\n\n\n<li>Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)<\/li>\n\n\n\n<li>Server side rendering<\/li>\n\n\n\n<li>Errors are thrown in the error boundary itself (rather than its children)<\/li>\n<\/ul>\n\n\n\n<p><strong>Disadvantages of Error Boundaries<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>It can only be used with Class Components.<\/li>\n\n\n\n<li>It does not catch errors for&nbsp;Event Handlers,&nbsp;Asynchronous code(Example request Animation Frame), Server Side Rendering,<strong>&nbsp;<\/strong>and<strong>&nbsp;<\/strong>Errors are thrown in the error boundary itself (rather than its children).<\/li>\n\n\n\n<li>It is available only in React 16 or after.<\/li>\n<\/ul>\n\n\n\n<p><strong>Before going towards error boundaries, let&#8217;s see why we need it.<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">import React from &#039;react&#039;;\nexport const App = () =&gt; {\n&nbsp;return &lt;Alert\/&gt;;\n};\n\nconst Alert = ({ props }) =&gt; {\n&nbsp;return &lt;h1&gt;{props.msg}&lt;\/h1&gt;;\n};<\/pre>\n\n\n\n<p>If you try to render Alert component you wil get error like this and whole page is blank.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"900\" height=\"609\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160.png\" alt=\"image-160\" class=\"wp-image-373978\" style=\"width:821px;height:auto\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160.png 900w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160-300x203.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160-250x169.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160-768x520.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><strong>Why this happen?<\/strong><\/p>\n\n\n\n<p>We are trying to access props.msg which doesn&#8217;t exist.This is a banal example, but&nbsp;<\/p>\n\n\n\n<p>it shows that we cannot catch these errors with the try&#8230;catch statement.<\/p>\n\n\n\n<p>This tells us why we need Error Boundaries<\/p>\n\n\n\n<p>A class component becomes an error boundary if it defines either (or both) of the lifecycle methods <a href=\"https:\/\/legacy.reactjs.org\/docs\/react-component.html#static-getderivedstatefromerror\">static getDerivedStateFromError()<\/a> or <a href=\"https:\/\/legacy.reactjs.org\/docs\/react-component.html#componentdidcatch\">componentDidCatch()<\/a>. <\/p>\n\n\n\n<p>Use static getDerivedStateFromError() to render a fallback UI after an error has been thrown. Use componentDidCatch() to log error information. <\/p>\n\n\n\n<p>The limitation of error boundary is that it is only available for the class based components.&nbsp;<\/p>\n\n\n\n<p>error boundaries only catch errors in the components below them in the tree. Then, they log those caught errors and display a fallback UI instead of the component tree that crashed.<\/p>\n\n\n\n<p>Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.<\/p>\n\n\n\n<p><strong>Let&#8217;s create the Error boundary component&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a class based component of name ErrorBoundary.<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\">class ErrorBoundary extends React.Component{}<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now create a constructor of this component in which we set state hasError false&nbsp;<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\">class ErrorBoundary extends React.Component{\n&nbsp;constructor(props){\n&nbsp;&nbsp;&nbsp;super();\n&nbsp;&nbsp;&nbsp;this.state = {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hasError:false\n&nbsp;&nbsp;&nbsp;}<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now use componentDidCatch function that allows us to handle the error boundaries of the application. In this function, we setState of hasError to true<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\">componentDidCatch(error){\n&nbsp;&nbsp;&nbsp;this.setState({hasError:true})\n&nbsp;}<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Now we use conditional rendering in which we use hasError state to check error occurs or not, if it is then we print some message overwise the child props of component will render.<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\">render(){\n&nbsp;&nbsp;&nbsp;if(this.state.hasError){\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &lt;h1&gt; Some Error Occurred &lt;\/h1&gt;\n&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;return this.props.children;=\n&nbsp;}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">import React from &#039;react&#039;; \n\nclass ErrorBoundary extends React.Component{\n&nbsp;constructor(props){\n&nbsp;&nbsp;&nbsp;super();\n&nbsp;&nbsp;&nbsp;this.state = {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hasError:false\n&nbsp;&nbsp;&nbsp;}\n&nbsp;}\n&nbsp;componentDidCatch(error){\n&nbsp;&nbsp;&nbsp;this.setState({hasError:true})\n&nbsp;}\n\n&nbsp;render(){\n&nbsp;&nbsp;&nbsp;if(this.state.hasError){\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &lt;h1&gt; Some Error Occurred &lt;\/h1&gt;\n&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;return this.props.children;\n&nbsp;}\n}\n\nexport default ErrorBoundary;<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>At last wrap up the discussed above alert component to see how it works<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\">import React from &#039;react&#039;;\nimport ErrorBoundary from &quot;.\/ErrorBoundary&quot;;\n\nexport const App = () =&gt; {\nreturn (\n&nbsp;&nbsp;&lt;ErrorBoundary&gt;&lt;Alert\/&gt;&lt;\/ErrorBoundary&gt;\n&nbsp;&nbsp;);\n};\nconst Alert = ({ props }) =&gt; {\nreturn &lt;h1&gt;{props.msg}&lt;\/h1&gt;;\n};<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Now you can see some errors like this with the error message on your website&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"976\" height=\"602\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-161.png\" alt=\"image-161\" class=\"wp-image-373985\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-161.png 976w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-161-300x185.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-161-250x154.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-161-768x474.png 768w\" sizes=\"(max-width: 976px) 100vw, 976px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"900\" height=\"609\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160.png\" alt=\"image-160\" class=\"wp-image-373979\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160.png 900w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160-300x203.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160-250x169.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160-768x520.png 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>It is because you are in developer mode if you build your website it will gone.<\/p>\n\n\n\n<p>That is all. If you need <a href=\"https:\/\/webkul.com\/wordpress-theme-development-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">React Development Services<\/a>&nbsp;then feel free to&nbsp;<a href=\"https:\/\/webkul.com\/contacts\" target=\"_blank\" rel=\"noreferrer noopener\">reach us<\/a>.<\/p>\n\n\n\n<p><strong>References<\/strong><\/p>\n\n\n\n<p>https:\/\/legacy.reactjs.org\/<\/p>\n\n\n\n<p>Have a Good Day ahead!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A JavaScript error in a part of the UI shouldn\u2019t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an \u201cerror boundary\u201d. Error boundaries only catch errors in the components below them in the tree. What are Error Boundaries? Error Boundaries are React components that catch <a href=\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":502,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-373976","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use Error Boundaries in React 16\u00a0 - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Error Boundaries in React 16\u00a0 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-31T13:53:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-28T11:56:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160.png\" \/>\n<meta name=\"author\" content=\"Nitish Vashistha\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nitish Vashistha\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/\"},\"author\":{\"name\":\"Nitish Vashistha\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/21ea8837939ca1f0a79992be08afe9d3\"},\"headline\":\"How to use Error Boundaries in React 16\u00a0\",\"datePublished\":\"2023-03-31T13:53:56+00:00\",\"dateModified\":\"2024-11-28T11:56:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/\"},\"wordCount\":510,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/\",\"url\":\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/\",\"name\":\"How to use Error Boundaries in React 16\u00a0 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160.png\",\"datePublished\":\"2023-03-31T13:53:56+00:00\",\"dateModified\":\"2024-11-28T11:56:31+00:00\",\"description\":\"Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160.png\",\"width\":983,\"height\":604,\"caption\":\"image-160\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Error Boundaries in React 16\u00a0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/21ea8837939ca1f0a79992be08afe9d3\",\"name\":\"Nitish Vashistha\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a74461f8bd2ea3656105ffbe4b82c99401b2ffbc5906a2a14aa74d1c343a5997?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a74461f8bd2ea3656105ffbe4b82c99401b2ffbc5906a2a14aa74d1c343a5997?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Nitish Vashistha\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/nitish-wp634\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Error Boundaries in React 16\u00a0 - Webkul Blog","description":"Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/","og_locale":"en_US","og_type":"article","og_title":"How to use Error Boundaries in React 16\u00a0 - Webkul Blog","og_description":"Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree.","og_url":"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-03-31T13:53:56+00:00","article_modified_time":"2024-11-28T11:56:31+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160.png","type":"","width":"","height":""}],"author":"Nitish Vashistha","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Nitish Vashistha","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/"},"author":{"name":"Nitish Vashistha","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/21ea8837939ca1f0a79992be08afe9d3"},"headline":"How to use Error Boundaries in React 16\u00a0","datePublished":"2023-03-31T13:53:56+00:00","dateModified":"2024-11-28T11:56:31+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/"},"wordCount":510,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/","url":"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/","name":"How to use Error Boundaries in React 16\u00a0 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160.png","datePublished":"2023-03-31T13:53:56+00:00","dateModified":"2024-11-28T11:56:31+00:00","description":"Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/error-handling-in-react-16\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/03\/image-160.png","width":983,"height":604,"caption":"image-160"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/error-handling-in-react-16\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to use Error Boundaries in React 16\u00a0"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/21ea8837939ca1f0a79992be08afe9d3","name":"Nitish Vashistha","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a74461f8bd2ea3656105ffbe4b82c99401b2ffbc5906a2a14aa74d1c343a5997?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a74461f8bd2ea3656105ffbe4b82c99401b2ffbc5906a2a14aa74d1c343a5997?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Nitish Vashistha"},"url":"https:\/\/webkul.com\/blog\/author\/nitish-wp634\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/373976","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/502"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=373976"}],"version-history":[{"count":39,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/373976\/revisions"}],"predecessor-version":[{"id":475885,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/373976\/revisions\/475885"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=373976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=373976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=373976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}