{"id":5572,"date":"2022-04-21T09:03:09","date_gmt":"2022-04-21T09:03:09","guid":{"rendered":"https:\/\/www.folio3.com\/mobile\/?p=5572"},"modified":"2022-04-21T09:08:36","modified_gmt":"2022-04-21T09:08:36","slug":"error-boundary-in-react-native","status":"publish","type":"post","link":"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/","title":{"rendered":"Error Boundary in React Native"},"content":{"rendered":"\n

Users hate it the most when they are using their app and they are presented with a white screen or suddenly an \u201cApp keeps closing\u201d popup comes up. So how do we tackle this, how can we try to make the user experience a bit better than this frustrating one? That\u2019s where ErrorBoundary comes in. ErrorBoundary is an API provided by React but it is more of a concept than an actual API. So what it says is that you create a HOC that implements the componentDidCatch lifecycle to grab the error that\u2019s gonna crash the app, and also the getDrivedStateFromError which decides the state that we can use to display a fallback UI instead of the creepy white screen or the crash popup. Also, the componentDidCatch<\/code> can be used to report the error to the Error Logging service.<\/p>\n\n\n\n

With our understanding ready about the ErrorBoundary<\/code>, let’s see how to use it:<\/p>\n\n\n\n

We will first create a fresh react-native app in TypeScript:<\/p>\n\n\n\n

npx react-native init ErrorBoundaryDemo --template react-native-template-typescript<\/code><\/pre>\n\n\n\n
And install react-native-restart<\/code>, so when our app crashes we display them a good sorry message and an option to retry, and we then restart our app.<\/p>\n\n\n\n
Next, we run the app to see if all is good. Now we need to create ErrorBoundary<\/code> HOC, so we will create a folder hierarchy like src\/components\/error-boundary\/index.tsx<\/code><\/p>\n\n\n\n
import React, {ErrorInfo, ReactNode} from 'react';\nimport {Button, StyleSheet, Text, View} from 'react-native';\nimport RNRestart from 'react-native-restart';\n \ninterface Props {\n children: ReactNode;\n}\n \ninterface State {\n hasError: boolean;\n}\n \nclass ErrorBoundary extends React.Component<Props, State> {\n constructor(props: Props) {\n   super(props);\n   this.state = {hasError: false};\n }\n \n static getDerivedStateFromError(_: Error): State {\n   \/\/ Update state so the next render will show the fallback UI.\n   return {hasError: true};\n }\n \n componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n   \/\/ You can also log the error to an error reporting service\n   console.log('componentDidCatch ', error, ' ', errorInfo);\n }\n \n render() {\n   if (this.state.hasError) {\n     \/\/ You can render any custom fallback UI\n     return (\n       <View style={styles.container}>\n         <Text style={styles.message}>\n           Something went wrong.{'\\n'} Our team has taken a note of this issue.\n         <\/Text>\n         <Button title=\"Try Again\" onPress={() => RNRestart.Restart()} \/>\n       <\/View>\n     );\n   }\n \n   return this.props.children;\n }\n}\n \nexport default ErrorBoundary;\n \nconst styles = StyleSheet.create({\n container: {\n   flex: 1,\n   justifyContent: 'center',\n   alignItems: 'center',\n },\n message: {\n   fontSize: 16,\n   marginBottom: 20,\n   textAlign: 'center',\n   paddingHorizontal: 10,\n },\n});<\/code><\/pre>\n\n\n\n
As we have already discussed, the componentDidCatch<\/code> will be called whenever the underlying tree crashes. So we can use it to register the crash to an error reporting service. Also, the getDerivedStateFromError<\/code> gives us the state update that we can use to display the fallback UI. We can use beautiful Lottie animations here, but for the sake of simplicity, I haven\u2019t added them.<\/p>\n\n\n\n
Also, let’s create this home screen in src\/screens\/home-screen\/index.tsx<\/code>, so it looks like this.<\/p>\n\n\n\n
import React from 'react';\nimport {Text, View, StyleSheet} from 'react-native';\n \ninterface IHomeScreenProps {}\n \nconst userData = {\n email: 'mhurali@folio3.com',\n name: 'Hur Ali',\n};\n \nconst HomeScreen = (_: IHomeScreenProps) => {\n return (\n   <View style={styles.container}>\n     <Text>Home Screen<\/Text>\n     <Text>User Email: {userData.email}<\/Text>\n     <Text>User Name: {userData.name}<\/Text>\n   <\/View>\n );\n};\n \nexport default HomeScreen;\n \nconst styles = StyleSheet.create({\n container: {\n   alignItems: 'center',\n   paddingTop: 20,\n   flex: 1,\n },\n});<\/code><\/pre>\n\n\n\n
After that, update your App.tsx with the following code as we clean out the old boilerplate:<\/p>\n\n\n\n
import React from 'react';\nimport {\n SafeAreaView,\n StatusBar,\n StyleSheet,\n useColorScheme,\n} from 'react-native';\n \nimport {Colors} from 'react-native\/Libraries\/NewAppScreen';\nimport ErrorBoundary from '.\/src\/components\/error-boundary';\nimport HomeScreen from '.\/src\/screens\/home-screen';\n \nconst App = () => {\n const isDarkMode = useColorScheme() === 'dark';\n \n const backgroundStyle = {\n   backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,\n   flex: 1,\n };\n \n return (\n   <SafeAreaView style={backgroundStyle}>\n     <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} \/>\n     <ErrorBoundary>\n       <HomeScreen \/>\n     <\/ErrorBoundary>\n   <\/SafeAreaView>\n );\n};\n \nconst styles = StyleSheet.create({});\n \nexport default App;<\/code><\/pre>\n\n\n\n
So, what we\u2019ve done is that we wrapped our HomeScreen inside of ErrorBoundary<\/code>. Practically, we will be placing the whole app container here which is the Navigation.<\/p>\n\n\n\n
Now run your app and see if everything is good. Okay, so now we want to test it. So whenever something causes a crash in the rendering, our ErrorBoundary<\/code> will handle it by displaying the fallback UI.<\/p>\n\n\n\n
So we will add a console.log(userDat)<\/code> statement in the HomeScreen before the return statement. Since userDat<\/code> doesn\u2019t exist, this JS error will cause the crash. If you save it now, you\u2019ll be shown with the red error screen, since it\u2019s in debug mode. But if you dismiss the screen, our FallbackUI<\/code> will be shown. This red Error screen won\u2019t appear in the release mode, hence the user will be directly shown the fallback UI. <\/p>\n\n\n\n
That\u2019s all. For more information, please refer to the following references.<\/p>\n\n\n\n
For reference:<\/p>\n\n\n\n
https:\/\/reactjs.org\/docs\/error-boundaries.html#:~:text=Error%20boundaries%20are%20React%20components,the%20whole%20tree%20below%20them<\/a><\/p>\n\n\n\n
https:\/\/github.com\/mhurali-folio\/ErrorBoundaryDemo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Users hate it the most when they are using their app and they are presented with a white screen or suddenly an \u201cApp keeps closing\u201d popup comes up. So how do we tackle this, how can we try to make the user experience a bit better than this frustrating one? That\u2019s where ErrorBoundary comes in. … Continue reading “Error Boundary in React Native”<\/span><\/a><\/p>\n","protected":false},"author":37,"featured_media":5575,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[50],"tags":[],"class_list":["post-5572","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"yoast_head":"\nError Boundary in React Native - Mobile App Development Services<\/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.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Error Boundary in React Native - Mobile App Development Services\" \/>\n<meta property=\"og:description\" content=\"Users hate it the most when they are using their app and they are presented with a white screen or suddenly an \u201cApp keeps closing\u201d popup comes up. So how do we tackle this, how can we try to make the user experience a bit better than this frustrating one? That\u2019s where ErrorBoundary comes in. … Continue reading "Error Boundary in React Native"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Mobile App Development Services\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-21T09:03:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-21T09:08:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-2.03.13-PM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2008\" \/>\n\t<meta property=\"og:image:height\" content=\"956\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Noc Folio3\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noc Folio3\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/\"},\"author\":{\"name\":\"Noc Folio3\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\"},\"headline\":\"Error Boundary in React Native\",\"datePublished\":\"2022-04-21T09:03:09+00:00\",\"dateModified\":\"2022-04-21T09:08:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/\"},\"wordCount\":485,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-2.03.13-PM.png\",\"articleSection\":[\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/\",\"name\":\"Error Boundary in React Native - Mobile App Development Services\",\"isPartOf\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-2.03.13-PM.png\",\"datePublished\":\"2022-04-21T09:03:09+00:00\",\"dateModified\":\"2022-04-21T09:08:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#primaryimage\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-2.03.13-PM.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-2.03.13-PM.png\",\"width\":2008,\"height\":956},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.folio3.com\/mobile\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Error Boundary in React Native\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#website\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"name\":\"Mobile App Development Services\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#organization\",\"name\":\"Mobile App Development Services\",\"url\":\"https:\/\/www.folio3.com\/mobile\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"contentUrl\":\"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png\",\"width\":210,\"height\":50,\"caption\":\"Mobile App Development Services\"},\"image\":{\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb\",\"name\":\"Noc Folio3\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g\",\"caption\":\"Noc Folio3\"},\"url\":\"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Error Boundary in React Native - Mobile App Development Services","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.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/","og_locale":"en_US","og_type":"article","og_title":"Error Boundary in React Native - Mobile App Development Services","og_description":"Users hate it the most when they are using their app and they are presented with a white screen or suddenly an \u201cApp keeps closing\u201d popup comes up. So how do we tackle this, how can we try to make the user experience a bit better than this frustrating one? That\u2019s where ErrorBoundary comes in. … Continue reading \"Error Boundary in React Native\"","og_url":"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/","og_site_name":"Mobile App Development Services","article_published_time":"2022-04-21T09:03:09+00:00","article_modified_time":"2022-04-21T09:08:36+00:00","og_image":[{"width":2008,"height":956,"url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-2.03.13-PM.png","type":"image\/png"}],"author":"Noc Folio3","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Noc Folio3","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#article","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/"},"author":{"name":"Noc Folio3","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb"},"headline":"Error Boundary in React Native","datePublished":"2022-04-21T09:03:09+00:00","dateModified":"2022-04-21T09:08:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/"},"wordCount":485,"commentCount":0,"publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-2.03.13-PM.png","articleSection":["React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/","url":"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/","name":"Error Boundary in React Native - Mobile App Development Services","isPartOf":{"@id":"https:\/\/www.folio3.com\/mobile\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#primaryimage"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#primaryimage"},"thumbnailUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-2.03.13-PM.png","datePublished":"2022-04-21T09:03:09+00:00","dateModified":"2022-04-21T09:08:36+00:00","breadcrumb":{"@id":"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#primaryimage","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-2.03.13-PM.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-21-at-2.03.13-PM.png","width":2008,"height":956},{"@type":"BreadcrumbList","@id":"https:\/\/www.folio3.com\/mobile\/blog\/error-boundary-in-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.folio3.com\/mobile\/"},{"@type":"ListItem","position":2,"name":"Error Boundary in React Native"}]},{"@type":"WebSite","@id":"https:\/\/www.folio3.com\/mobile\/#website","url":"https:\/\/www.folio3.com\/mobile\/","name":"Mobile App Development Services","description":"","publisher":{"@id":"https:\/\/www.folio3.com\/mobile\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.folio3.com\/mobile\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.folio3.com\/mobile\/#organization","name":"Mobile App Development Services","url":"https:\/\/www.folio3.com\/mobile\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/","url":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","contentUrl":"https:\/\/www.folio3.com\/mobile\/wp-content\/uploads\/2020\/12\/folio3-mobile.png","width":210,"height":50,"caption":"Mobile App Development Services"},"image":{"@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/0b6e4f68efbd12d222ac9422766c61eb","name":"Noc Folio3","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.folio3.com\/mobile\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/29f05a21b8db20048e7717694b024bbd?s=96&d=mm&r=g","caption":"Noc Folio3"},"url":"https:\/\/www.folio3.com\/mobile\/blog\/author\/noc\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5572"}],"collection":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/comments?post=5572"}],"version-history":[{"count":2,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5572\/revisions"}],"predecessor-version":[{"id":5579,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/posts\/5572\/revisions\/5579"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media\/5575"}],"wp:attachment":[{"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/media?parent=5572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/categories?post=5572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.folio3.com\/mobile\/wp-json\/wp\/v2\/tags?post=5572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}