{"id":6021,"date":"2020-06-02T15:36:27","date_gmt":"2020-06-02T10:06:27","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6021"},"modified":"2020-06-05T16:08:06","modified_gmt":"2020-06-05T10:38:06","slug":"understanding-error-boundaries-in-react-js-2","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/","title":{"rendered":"Understanding Error Boundaries In React Js"},"content":{"rendered":"

It is a new feature of React Js introduced in version16. This concept is used for handling UI errors which we face. Before version 16 there is no concept to handle this type of issue, we use try\u2026 catch\u2026 for handling.\u00a0\u00a0<\/span><\/p>\n

When an error occurs in our app our complete app will crash and our browser shows a white blank screen. Error boundary is part of the React lifecycle method and will be used to catch errors and generate meaningful information to users. We can use it as an error reporting service for our app.<\/span><\/p>\n

How error boundaries work in the react lifecycle?<\/b><\/p>\n

In React JS , We can make\u00a0 a class component treat like a error boundary by using two methods\u00a0<\/span><\/p>\n

static getDerivedStateFromError() or componentDidCatch() . <\/b>We can also use both together<\/span><\/p>\n

For creating error boundary in React Component\u00a0<\/span><\/p>\n

static getDerivedStateFromError() :-\u00a0 <\/b>It is<\/span> used for handling UI error after the error has been thrown.<\/span><\/p>\n

    \n
  1. componentDidCatch() :- <\/b>It <\/span>\u00a0<\/b>is used for rendering error information<\/span><\/li>\n<\/ol>\n

    We can use only <\/span>componentDidCatch() <\/b>to handle UI error and create error reporting for our app.<\/span><\/p>\n

    Implementing error boundary in react : –<\/span><\/p>\n

      \n
    1. Create a new project with below command,<\/span><\/li>\n<\/ol>\n
      \u00a0=>\u00a0 npx create-react-app errorboundry-demo<\/pre>\n
      2. Create file Home.js in src with below code\u00a0<\/span><\/p>\n
      import React from 'react';\r\nimport Test from '.\/Test';\r\n \r\nclass Home extends React.Component {\r\n \r\n    state={\r\n        hasError:false,\r\n        error:null,\r\n        errorInfo:null\r\n    }\r\n \r\n    static getDerivedStateFromError() {\r\n        return { hasError: true }\r\n    }\r\n \r\n    componentDidCatch(error, info) {\r\n         this.setState({ error: error, errorInfo:info})\r\n     }\r\n     \r\n \r\n    render() {\r\n        if(this.state.hasError) {\r\n            return <div>Sorry,Something went wrong!<\/div>\r\n          }\r\n          return(\r\n              <div>\r\n                <Test {...this.props} \/>\r\n              <\/div>\r\n          )\r\n \r\n    }\r\n}\r\n \r\nexport default Home;\r\n<\/pre>\n
      3. Create Test.js file in src folder with below code<\/span><\/p>\n
      import React from 'react';\r\n \r\nconst Test = props => {\r\n    return(\r\n        <div>{props.name.toString()}<\/div>\r\n    )\r\n}\r\n \r\nexport default Test\r\n<\/pre>\n
      4. Import Test.js in Home.js\u00a0<\/span><\/p>\n
      5. Import Home.js in app.js with below code<\/span><\/p>\n
      import React from 'react';\r\nimport Home from '.\/Home';\r\n \r\nfunction App() {\r\n  return (\r\n    <div className=\"App\">\r\n      <h1 style={{color: 'red'}}>Showing Error Info<\/h1>\r\n      <Home \/>\r\n    <\/div>\r\n  );\r\n}\r\n \r\nexport default App;\r\n<\/pre>\n
      6. Go to the terminal and start the project with <\/span>npm start, <\/b>after the project starts we will get<\/span><\/p>\n
      \"\"<\/p>\n
      Projects created with create-react-app have built-in error reporting, when we are in development mode error reporting and error boundaries both appear in runtime. But in production, it only shows error boundaries in case of any error. When we create projects using create-react-app command it overlaps the error boundary by its own error reporting layout.<\/p>\n
      \"\"<\/p>\n
      To see the actual error we have to close the create-react-app default reporting layout as shown below<\/span><\/p>\n
      \"\"<\/p>\n
      If we create a project without using create-react-app or any boilerplate without any error reporting tool we will get above output directly by running the project.<\/span><\/p>\n
      If we want to see only error boundary in projects created using create-react-app we need to create production build which will automatically remove error reporting layout and shows only error boundary\u00a0<\/span><\/p>\n
      You can also read our below blog on React:<\/strong><\/p>\n
      Working of React Portals<\/a><\/p>\n
      MobX in React<\/a><\/p>\n
       <\/p>\n
      Thanks for giving your valuable time. Keep reading and keep learning<\/p>\n
       <\/p>\n
       <\/p>\n
       <\/p>\n","protected":false},"excerpt":{"rendered":"
      It is a new feature of React Js introduced in version16. This concept is used for handling UI errors which we face. Before version 16 there is no concept to handle this type of issue, we use try\u2026 catch\u2026 for handling.\u00a0\u00a0 When an error occurs in our app our complete app will crash and our […]<\/p>\n","protected":false},"author":1,"featured_media":5994,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[108,360,71,257,258],"tags":[],"class_list":["post-6021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css-js","category-javascript","category-mobile","category-react","category-web-technology"],"yoast_head":"\nUnderstanding Error Boundaries In React Js - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding Error Boundaries In React Js - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"It is a new feature of React Js introduced in version16. This concept is used for handling UI errors which we face. Before version 16 there is no concept to handle this type of issue, we use try\u2026 catch\u2026 for handling.\u00a0\u00a0 When an error occurs in our app our complete app will crash and our […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-02T10:06:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-05T10:38:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/05\/React-Boundaries.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1141\" \/>\n\t<meta property=\"og:image:height\" content=\"634\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\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:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-error-boundaries-in-react-js-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-error-boundaries-in-react-js-2\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Understanding Error Boundaries In React Js\",\"datePublished\":\"2020-06-02T10:06:27+00:00\",\"dateModified\":\"2020-06-05T10:38:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-error-boundaries-in-react-js-2\\\/\"},\"wordCount\":408,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-error-boundaries-in-react-js-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/React-Boundaries.png\",\"articleSection\":[\"HTML5 \\\/ CSS \\\/ JS\",\"JavaScript\",\"Mobile\",\"React\",\"Web Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-error-boundaries-in-react-js-2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-error-boundaries-in-react-js-2\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-error-boundaries-in-react-js-2\\\/\",\"name\":\"Understanding Error Boundaries In React Js - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-error-boundaries-in-react-js-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-error-boundaries-in-react-js-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/React-Boundaries.png\",\"datePublished\":\"2020-06-02T10:06:27+00:00\",\"dateModified\":\"2020-06-05T10:38:06+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-error-boundaries-in-react-js-2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-error-boundaries-in-react-js-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-error-boundaries-in-react-js-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/React-Boundaries.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/React-Boundaries.png\",\"width\":1141,\"height\":634},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/understanding-error-boundaries-in-react-js-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding Error Boundaries In React Js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Understanding Error Boundaries In React Js - InnovationM - Blog","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:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/","og_locale":"en_US","og_type":"article","og_title":"Understanding Error Boundaries In React Js - InnovationM - Blog","og_description":"It is a new feature of React Js introduced in version16. This concept is used for handling UI errors which we face. Before version 16 there is no concept to handle this type of issue, we use try\u2026 catch\u2026 for handling.\u00a0\u00a0 When an error occurs in our app our complete app will crash and our […]","og_url":"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/","og_site_name":"InnovationM - Blog","article_published_time":"2020-06-02T10:06:27+00:00","article_modified_time":"2020-06-05T10:38:06+00:00","og_image":[{"width":1141,"height":634,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/05\/React-Boundaries.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Understanding Error Boundaries In React Js","datePublished":"2020-06-02T10:06:27+00:00","dateModified":"2020-06-05T10:38:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/"},"wordCount":408,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/05\/React-Boundaries.png","articleSection":["HTML5 \/ CSS \/ JS","JavaScript","Mobile","React","Web Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/","url":"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/","name":"Understanding Error Boundaries In React Js - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/05\/React-Boundaries.png","datePublished":"2020-06-02T10:06:27+00:00","dateModified":"2020-06-05T10:38:06+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/05\/React-Boundaries.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/05\/React-Boundaries.png","width":1141,"height":634},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/understanding-error-boundaries-in-react-js-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understanding Error Boundaries In React Js"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6021"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6021\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/5994"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}