{"componentChunkName":"component---src-templates-blog-template-js","path":"/blogs/angular","result":{"data":{"post":{"title":"angular","text":{"json":{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Error Handling in React 16","nodeType":"text"}],"nodeType":"heading-1"},{"data":{},"content":[{"data":{},"marks":[],"value":"\nAs React 16 release is getting closer, we would like to announce a few changes to how React handles JavaScript errors inside components. These changes are included in React 16 beta versions, and will be a part of React 16.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Behavior in React 15 and Earlier","nodeType":"text"}],"nodeType":"heading-2"},{"data":{},"content":[{"data":{},"marks":[],"value":"In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to ","nodeType":"text"},{"data":{"uri":"https://github.com/facebook/react/issues/4026"},"content":[{"data":{},"marks":[],"value":"emit","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":" ","nodeType":"text"},{"data":{"uri":"https://github.com/facebook/react/issues/6895"},"content":[{"data":{},"marks":[],"value":"cryptic","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":" ","nodeType":"text"},{"data":{"uri":"https://github.com/facebook/react/issues/8579"},"content":[{"data":{},"marks":[],"value":"errors","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":" on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"vde8z9r4adms","contentful_id":"vde8z9r4adms"}},"id":"c5RZSEep0YMABTS6IihXk4D","type":"Asset","createdAt":"2020-04-24T20:54:00.711Z","updatedAt":"2020-04-24T20:54:00.711Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"5RZSEep0YMABTS6IihXk4D"},"fields":{"title":{"en-US":"image-5"},"file":{"en-US":{"url":"//images.ctfassets.net/vde8z9r4adms/5RZSEep0YMABTS6IihXk4D/ad897b807d91168ed3eba1a98b5220cc/image-5.jpeg","details":{"size":232370,"image":{"width":1880,"height":1244}},"fileName":"image-5.jpeg","contentType":"image/jpeg"}}}}},"content":[],"nodeType":"embedded-asset-block"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"The ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"componentDidCatch()","nodeType":"text"},{"data":{},"marks":[],"value":" method works like a JavaScript ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"catch {}","nodeType":"text"},{"data":{},"marks":[],"value":" block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"Note that ","nodeType":"text"},{"data":{},"marks":[{"type":"bold"}],"value":"error boundaries only catch errors in the components below them in the tree","nodeType":"text"},{"data":{},"marks":[],"value":". An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"catch {}","nodeType":"text"},{"data":{},"marks":[],"value":" block works in JavaScript","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[{"type":"code"}],"value":"try {\n  showButton();} catch (error) {\n  // ...}","nodeType":"text"},{"data":{},"marks":[],"value":"\n\nNaming Changes from React 15","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"React 15 included a very limited support for error boundaries under a different method name: ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"unstable_handleError","nodeType":"text"},{"data":{},"marks":[],"value":". This method no longer works, and you will need to change it to ","nodeType":"text"},{"data":{},"marks":[{"type":"code"}],"value":"componentDidCatch","nodeType":"text"},{"data":{},"marks":[],"value":" in your code starting from the first 16 beta release.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"For this change, we’ve provided a ","nodeType":"text"},{"data":{"uri":"https://github.com/reactjs/react-codemod#error-boundaries"},"content":[{"data":{},"marks":[],"value":"codemod","nodeType":"text"}],"nodeType":"hyperlink"},{"data":{},"marks":[],"value":" to automatically migrate your code.","nodeType":"text"}],"nodeType":"paragraph"},{"data":{},"content":[{"data":{},"marks":[],"value":"","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"}}}},"pageContext":{"slug":"angular"}}}