[{"_1":2,"_987":-5,"_988":-5},"loaderData",{"_3":4,"_624":625,"_839":840,"_986":-5},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_334":335,"_387":337,"_388":339,"_340":341,"_389":390,"_400":401,"_425":-5,"_426":-5,"_427":428},"userId",{"_7":8,"_9":10},"id","ylptj1yke7fu0vxu4fpy46fy","type","cookie.randomId","preferences","progress",[],"user","userHasAccess",false,"apps",[19,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326,330],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.js-hello-world/01.problem.hello","relativePath","exercises/01.js-hello-world/01.problem.hello",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.js-hello-world/01.solution.hello","exercises/01.js-hello-world/01.solution.hello",{"_20":31,"_22":32,"_24":33},"01.02.problem","/myapp/workshop-content/exercises/01.js-hello-world/02.problem.root","exercises/01.js-hello-world/02.problem.root",{"_20":35,"_22":36,"_24":37},"01.02.solution","/myapp/workshop-content/exercises/01.js-hello-world/02.solution.root","exercises/01.js-hello-world/02.solution.root",{"_20":39,"_22":40,"_24":41},"02.01.problem","/myapp/workshop-content/exercises/02.raw-react/01.problem.elements","exercises/02.raw-react/01.problem.elements",{"_20":43,"_22":44,"_24":45},"02.01.solution","/myapp/workshop-content/exercises/02.raw-react/01.solution.elements","exercises/02.raw-react/01.solution.elements",{"_20":47,"_22":48,"_24":49},"02.02.problem","/myapp/workshop-content/exercises/02.raw-react/02.problem.nesting","exercises/02.raw-react/02.problem.nesting",{"_20":51,"_22":52,"_24":53},"02.02.solution","/myapp/workshop-content/exercises/02.raw-react/02.solution.nesting","exercises/02.raw-react/02.solution.nesting",{"_20":55,"_22":56,"_24":57},"02.03.problem","/myapp/workshop-content/exercises/02.raw-react/03.problem.deep-nesting","exercises/02.raw-react/03.problem.deep-nesting",{"_20":59,"_22":60,"_24":61},"02.03.solution","/myapp/workshop-content/exercises/02.raw-react/03.solution.deep-nesting","exercises/02.raw-react/03.solution.deep-nesting",{"_20":63,"_22":64,"_24":65},"03.01.problem","/myapp/workshop-content/exercises/03.using-jsx/01.problem.compiler","exercises/03.using-jsx/01.problem.compiler",{"_20":67,"_22":68,"_24":69},"03.01.solution","/myapp/workshop-content/exercises/03.using-jsx/01.solution.compiler","exercises/03.using-jsx/01.solution.compiler",{"_20":71,"_22":72,"_24":73},"03.02.problem","/myapp/workshop-content/exercises/03.using-jsx/02.problem.interpolation","exercises/03.using-jsx/02.problem.interpolation",{"_20":75,"_22":76,"_24":77},"03.02.solution","/myapp/workshop-content/exercises/03.using-jsx/02.solution.interpolation","exercises/03.using-jsx/02.solution.interpolation",{"_20":79,"_22":80,"_24":81},"03.03.problem","/myapp/workshop-content/exercises/03.using-jsx/03.problem.spread","exercises/03.using-jsx/03.problem.spread",{"_20":83,"_22":84,"_24":85},"03.03.solution","/myapp/workshop-content/exercises/03.using-jsx/03.solution.spread","exercises/03.using-jsx/03.solution.spread",{"_20":87,"_22":88,"_24":89},"03.04.problem","/myapp/workshop-content/exercises/03.using-jsx/04.problem.nesting","exercises/03.using-jsx/04.problem.nesting",{"_20":91,"_22":92,"_24":93},"03.04.solution","/myapp/workshop-content/exercises/03.using-jsx/04.solution.nesting","exercises/03.using-jsx/04.solution.nesting",{"_20":95,"_22":96,"_24":97},"03.05.problem","/myapp/workshop-content/exercises/03.using-jsx/05.problem.fragments","exercises/03.using-jsx/05.problem.fragments",{"_20":99,"_22":100,"_24":101},"03.05.solution","/myapp/workshop-content/exercises/03.using-jsx/05.solution.fragments","exercises/03.using-jsx/05.solution.fragments",{"_20":103,"_22":104,"_24":105},"04.01.problem","/myapp/workshop-content/exercises/04.components/01.problem.function","exercises/04.components/01.problem.function",{"_20":107,"_22":108,"_24":109},"04.01.solution","/myapp/workshop-content/exercises/04.components/01.solution.function","exercises/04.components/01.solution.function",{"_20":111,"_22":112,"_24":113},"04.02.problem","/myapp/workshop-content/exercises/04.components/02.problem.raw","exercises/04.components/02.problem.raw",{"_20":115,"_22":116,"_24":117},"04.02.solution","/myapp/workshop-content/exercises/04.components/02.solution.raw","exercises/04.components/02.solution.raw",{"_20":119,"_22":120,"_24":121},"04.03.problem","/myapp/workshop-content/exercises/04.components/03.problem.jsx","exercises/04.components/03.problem.jsx",{"_20":123,"_22":124,"_24":125},"04.03.solution","/myapp/workshop-content/exercises/04.components/03.solution.jsx","exercises/04.components/03.solution.jsx",{"_20":127,"_22":128,"_24":129},"04.04.problem","/myapp/workshop-content/exercises/04.components/04.problem.props","exercises/04.components/04.problem.props",{"_20":131,"_22":132,"_24":133},"04.04.solution","/myapp/workshop-content/exercises/04.components/04.solution.props","exercises/04.components/04.solution.props",{"_20":135,"_22":136,"_24":137},"05.01.problem","/myapp/workshop-content/exercises/05.typescript/01.problem.props","exercises/05.typescript/01.problem.props",{"_20":139,"_22":140,"_24":141},"05.01.solution","/myapp/workshop-content/exercises/05.typescript/01.solution.props","exercises/05.typescript/01.solution.props",{"_20":143,"_22":144,"_24":145},"05.02.problem","/myapp/workshop-content/exercises/05.typescript/02.problem.narrow","exercises/05.typescript/02.problem.narrow",{"_20":147,"_22":148,"_24":149},"05.02.solution","/myapp/workshop-content/exercises/05.typescript/02.solution.narrow","exercises/05.typescript/02.solution.narrow",{"_20":151,"_22":152,"_24":153},"05.03.problem","/myapp/workshop-content/exercises/05.typescript/03.problem.derive","exercises/05.typescript/03.problem.derive",{"_20":155,"_22":156,"_24":157},"05.03.solution","/myapp/workshop-content/exercises/05.typescript/03.solution.derive","exercises/05.typescript/03.solution.derive",{"_20":159,"_22":160,"_24":161},"05.04.problem","/myapp/workshop-content/exercises/05.typescript/04.problem.default-props","exercises/05.typescript/04.problem.default-props",{"_20":163,"_22":164,"_24":165},"05.04.solution","/myapp/workshop-content/exercises/05.typescript/04.solution.default-props","exercises/05.typescript/04.solution.default-props",{"_20":167,"_22":168,"_24":169},"05.05.problem","/myapp/workshop-content/exercises/05.typescript/05.problem.function-types","exercises/05.typescript/05.problem.function-types",{"_20":171,"_22":172,"_24":173},"05.05.solution","/myapp/workshop-content/exercises/05.typescript/05.solution.function-types","exercises/05.typescript/05.solution.function-types",{"_20":175,"_22":176,"_24":177},"05.06.problem","/myapp/workshop-content/exercises/05.typescript/06.problem.satisfies","exercises/05.typescript/06.problem.satisfies",{"_20":179,"_22":180,"_24":181},"05.06.solution","/myapp/workshop-content/exercises/05.typescript/06.solution.satisfies","exercises/05.typescript/06.solution.satisfies",{"_20":183,"_22":184,"_24":185},"06.01.problem","/myapp/workshop-content/exercises/06.styling/01.problem.style","exercises/06.styling/01.problem.style",{"_20":187,"_22":188,"_24":189},"06.01.solution","/myapp/workshop-content/exercises/06.styling/01.solution.style","exercises/06.styling/01.solution.style",{"_20":191,"_22":192,"_24":193},"06.02.problem","/myapp/workshop-content/exercises/06.styling/02.problem.component","exercises/06.styling/02.problem.component",{"_20":195,"_22":196,"_24":197},"06.02.solution","/myapp/workshop-content/exercises/06.styling/02.solution.component","exercises/06.styling/02.solution.component",{"_20":199,"_22":200,"_24":201},"06.03.problem","/myapp/workshop-content/exercises/06.styling/03.problem.size-prop","exercises/06.styling/03.problem.size-prop",{"_20":203,"_22":204,"_24":205},"06.03.solution","/myapp/workshop-content/exercises/06.styling/03.solution.size-prop","exercises/06.styling/03.solution.size-prop",{"_20":207,"_22":208,"_24":209},"07.01.problem","/myapp/workshop-content/exercises/07.forms/01.problem.form","exercises/07.forms/01.problem.form",{"_20":211,"_22":212,"_24":213},"07.01.solution","/myapp/workshop-content/exercises/07.forms/01.solution.form","exercises/07.forms/01.solution.form",{"_20":215,"_22":216,"_24":217},"07.02.problem","/myapp/workshop-content/exercises/07.forms/02.problem.action","exercises/07.forms/02.problem.action",{"_20":219,"_22":220,"_24":221},"07.02.solution","/myapp/workshop-content/exercises/07.forms/02.solution.action","exercises/07.forms/02.solution.action",{"_20":223,"_22":224,"_24":225},"07.03.problem","/myapp/workshop-content/exercises/07.forms/03.problem.types","exercises/07.forms/03.problem.types",{"_20":227,"_22":228,"_24":229},"07.03.solution","/myapp/workshop-content/exercises/07.forms/03.solution.types","exercises/07.forms/03.solution.types",{"_20":231,"_22":232,"_24":233},"07.04.problem","/myapp/workshop-content/exercises/07.forms/04.problem.submit","exercises/07.forms/04.problem.submit",{"_20":235,"_22":236,"_24":237},"07.04.solution","/myapp/workshop-content/exercises/07.forms/04.solution.submit","exercises/07.forms/04.solution.submit",{"_20":239,"_22":240,"_24":241},"07.05.problem","/myapp/workshop-content/exercises/07.forms/05.problem.action","exercises/07.forms/05.problem.action",{"_20":243,"_22":244,"_24":245},"07.05.solution","/myapp/workshop-content/exercises/07.forms/05.solution.action","exercises/07.forms/05.solution.action",{"_20":247,"_22":248,"_24":249},"08.01.problem","/myapp/workshop-content/exercises/08.inputs/01.problem.checkbox","exercises/08.inputs/01.problem.checkbox",{"_20":251,"_22":252,"_24":253},"08.01.solution","/myapp/workshop-content/exercises/08.inputs/01.solution.checkbox","exercises/08.inputs/01.solution.checkbox",{"_20":255,"_22":256,"_24":257},"08.02.problem","/myapp/workshop-content/exercises/08.inputs/02.problem.select","exercises/08.inputs/02.problem.select",{"_20":259,"_22":260,"_24":261},"08.02.solution","/myapp/workshop-content/exercises/08.inputs/02.solution.select","exercises/08.inputs/02.solution.select",{"_20":263,"_22":264,"_24":265},"08.03.problem","/myapp/workshop-content/exercises/08.inputs/03.problem.radio","exercises/08.inputs/03.problem.radio",{"_20":267,"_22":268,"_24":269},"08.03.solution","/myapp/workshop-content/exercises/08.inputs/03.solution.radio","exercises/08.inputs/03.solution.radio",{"_20":271,"_22":272,"_24":273},"08.04.problem","/myapp/workshop-content/exercises/08.inputs/04.problem.hidden","exercises/08.inputs/04.problem.hidden",{"_20":275,"_22":276,"_24":277},"08.04.solution","/myapp/workshop-content/exercises/08.inputs/04.solution.hidden","exercises/08.inputs/04.solution.hidden",{"_20":279,"_22":280,"_24":281},"08.05.problem","/myapp/workshop-content/exercises/08.inputs/05.problem.default-value","exercises/08.inputs/05.problem.default-value",{"_20":283,"_22":284,"_24":285},"08.05.solution","/myapp/workshop-content/exercises/08.inputs/05.solution.default-value","exercises/08.inputs/05.solution.default-value",{"_20":287,"_22":288,"_24":289},"09.01.problem","/myapp/workshop-content/exercises/09.errors/01.problem.composition","exercises/09.errors/01.problem.composition",{"_20":291,"_22":292,"_24":293},"09.01.solution","/myapp/workshop-content/exercises/09.errors/01.solution.composition","exercises/09.errors/01.solution.composition",{"_20":295,"_22":296,"_24":297},"09.02.problem","/myapp/workshop-content/exercises/09.errors/02.problem.show-boundary","exercises/09.errors/02.problem.show-boundary",{"_20":299,"_22":300,"_24":301},"09.02.solution","/myapp/workshop-content/exercises/09.errors/02.solution.show-boundary","exercises/09.errors/02.solution.show-boundary",{"_20":303,"_22":304,"_24":305},"09.03.problem","/myapp/workshop-content/exercises/09.errors/03.problem.reset","exercises/09.errors/03.problem.reset",{"_20":307,"_22":308,"_24":309},"09.03.solution","/myapp/workshop-content/exercises/09.errors/03.solution.reset","exercises/09.errors/03.solution.reset",{"_20":311,"_22":312,"_24":313},"10.01.problem","/myapp/workshop-content/exercises/10.arrays/01.problem.key-prop","exercises/10.arrays/01.problem.key-prop",{"_20":315,"_22":316,"_24":317},"10.01.solution","/myapp/workshop-content/exercises/10.arrays/01.solution.key-prop","exercises/10.arrays/01.solution.key-prop",{"_20":319,"_22":320,"_24":321},"10.02.problem","/myapp/workshop-content/exercises/10.arrays/02.problem.focus-state","exercises/10.arrays/02.problem.focus-state",{"_20":323,"_22":324,"_24":325},"10.02.solution","/myapp/workshop-content/exercises/10.arrays/02.solution.focus-state","exercises/10.arrays/02.solution.focus-state",{"_20":327,"_22":328,"_24":329},"10.03.problem","/myapp/workshop-content/exercises/10.arrays/03.problem.key-reset","exercises/10.arrays/03.problem.key-reset",{"_20":331,"_22":332,"_24":333},"10.03.solution","/myapp/workshop-content/exercises/10.arrays/03.solution.key-reset","exercises/10.arrays/03.solution.key-reset","workshopConfig",{"_336":337,"_338":339,"_340":341,"_347":348,"_365":366,"_367":368,"_369":370,"_371":372,"_375":376,"_381":382,"_385":386},"title","React Fundamentals ⚛","subtitle","Learn the foundational concepts necessary for building React applications and libraries","instructor",{"_20":342,"_343":344,"_345":346},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-fundamentals","discordChannelId","1285244676286189569","discordTags",[363,364],"1285246046498328627","1285245484432228375","onboardingVideo","https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/react-fundamentals","githubRoot","https://github.com/epicweb-dev/react-fundamentals/tree/main","stackBlitzConfig",{"_373":374},"view","editor","forms",{"_377":378,"_379":380},"workshop","https://docs.google.com/forms/d/e/1FAIpQLSdRmj9p8-5zyoqRzxp3UpqSbC3aFkweXvvJIKes0a5s894gzg/viewform?hl=en&embedded=true&entry.2123647600={workshopTitle}","exercise","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234={workshopTitle}&entry.428900931={exerciseTitle}","testTab",{"_383":384},"enabled",true,"initialRoute","/","workshopTitle","workshopSubtitle","ENV",{"_391":392,"_393":394,"_395":368,"_396":370,"_397":384,"_398":399},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","5.10.1","requestInfo",{"_402":403,"_404":405,"_406":407,"_408":409,"_410":409,"_411":412,"_419":420,"_421":422,"_423":386,"_424":384},"protocol","http:","hostname","epicweb-dev-react-fundamentals.fly.dev","port","","origin","http://epicweb-dev-react-fundamentals.fly.dev","domain","hints",{"_413":414,"_415":416,"_417":418},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/09/finished","session",{"_413":-5},"separator","online","toast","confettiId","presence",{"_429":430},"users",[431,446,457,467,476,484,492,499,508,516,524,531,539,546,553,560,568,575,583,590,595,602,608,614,619],{"_7":432,"_433":384,"_434":435,"_436":437,"_20":438,"_439":440},"aea06e37-1282-4ba6-97eb-635bd3139724","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/292ea6bebe341a4a91c25d093a392aa0?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/292ea6bebe341a4a91c25d093a392aa0?size=512&default=identicon","Dominik Jurkowski","location",{"_387":441,"_408":442,"_379":443},"Advanced React Patterns 🤯","http://localhost:5639",{"_444":445},"exerciseNumber",3,{"_7":447,"_433":384,"_434":448,"_436":449,"_20":450,"_439":451},"ef3517cc-ac98-428e-a158-c479935046d7","https://www.gravatar.com/avatar/64ae0e9aba35c72c1164c7edadf026e0?size=64&default=identicon","https://www.gravatar.com/avatar/64ae0e9aba35c72c1164c7edadf026e0?size=512&default=identicon","ANDREI KARAS",{"_387":337,"_408":442,"_379":452},{"_9":453,"_444":454,"_455":456},"solution",5,"stepNumber",6,{"_7":458,"_433":384,"_434":459,"_436":460,"_20":461,"_439":462},"f504e10b-d046-4c96-89f1-3f090e0885e3","https://www.gravatar.com/avatar/f87835a54d002c0609316d80a5c542af?size=64&default=identicon","https://www.gravatar.com/avatar/f87835a54d002c0609316d80a5c542af?size=512&default=identicon","CHIBUZOR OBIORA",{"_387":463,"_408":442,"_379":464},"Data Modeling Deep Dive 💾",{"_9":465,"_444":456,"_455":466},"problem",2,{"_7":468,"_433":16,"_434":469,"_436":470,"_20":471,"_439":472},"5c7aec59-efc5-474c-829e-acf789e8bea9","https://avatars.githubusercontent.com/u/87215099?v=4&size=64","https://avatars.githubusercontent.com/u/87215099?v=4&size=512","Seaming",{"_387":473,"_408":442,"_379":474},"Advanced React APIs 🔥",{"_444":475},8,{"_7":477,"_433":16,"_434":478,"_436":479,"_20":480,"_439":481},"cf7a71cc-c53b-47e4-86c0-e77be27d3ad1","https://www.gravatar.com/avatar/ec0d9bfc2376eae4eb76954a8f0bd5fa?size=64&default=identicon","https://www.gravatar.com/avatar/ec0d9bfc2376eae4eb76954a8f0bd5fa?size=512&default=identicon","Abhishek Jain",{"_387":482,"_408":442,"_379":483},"React Suspense 🔀",{"_9":465,"_444":466,"_455":466},{"_7":485,"_433":384,"_434":486,"_436":487,"_20":488,"_439":489},"3d570fa7-1901-4093-bdb4-9d89c7239bc0","https://www.gravatar.com/avatar/e720b442acca96e79c76d4181dfff097?size=64&default=identicon","https://www.gravatar.com/avatar/e720b442acca96e79c76d4181dfff097?size=512&default=identicon","Nicki Moody",{"_387":337,"_408":442,"_379":490},{"_444":491},4,{"_7":493,"_433":384,"_434":494,"_436":495,"_20":496,"_439":497},"394f8748-6086-489c-9f23-9592d3df5bef","https://avatars.githubusercontent.com/u/24479568?v=4&size=64","https://avatars.githubusercontent.com/u/24479568?v=4&size=512","Garry R Burch",{"_387":337,"_408":442,"_379":498},{"_444":454},{"_7":500,"_433":384,"_434":501,"_436":502,"_20":503,"_439":504},"8489957b-03bb-4ae8-8135-c80284e2ba35","https://www.gravatar.com/avatar/5b54c9a8833efbca305589b2517332b7?size=64&default=identicon","https://www.gravatar.com/avatar/5b54c9a8833efbca305589b2517332b7?size=512&default=identicon","Ethan Spilker",{"_387":473,"_408":505,"_379":506},"http://192.168.1.100:5639",{"_9":465,"_444":507,"_455":445},1,{"_7":509,"_433":384,"_434":510,"_436":511,"_20":512,"_439":513},"26cf68b0-1194-43f1-b372-5256036a619e","https://www.gravatar.com/avatar/950c8bda45b554c48d6193a59ff9602f?size=64&default=identicon","https://www.gravatar.com/avatar/950c8bda45b554c48d6193a59ff9602f?size=512&default=identicon","Salym Akhmedov",{"_387":514,"_408":442,"_379":515},"React Performance ⚡",{"_444":507},{"_7":517,"_433":384,"_434":518,"_436":519,"_20":520,"_439":521},"225a1963-56d4-427f-acca-ee3db062ffa7","https://www.gravatar.com/avatar/9cb6095bc914ff51199de1abc0c73164?size=64&default=identicon","https://www.gravatar.com/avatar/9cb6095bc914ff51199de1abc0c73164?size=512&default=identicon","Juha-Matti Hakala",{"_387":441,"_408":442,"_379":522},{"_444":523},7,{"_7":525,"_433":384,"_434":526,"_436":527,"_20":528,"_439":529},"4aa6b56f-2849-4c17-9e17-3608e6f90e99","https://www.gravatar.com/avatar/c8cc80c0b01408f499a920d17b1482b5?size=64&default=identicon","https://www.gravatar.com/avatar/c8cc80c0b01408f499a920d17b1482b5?size=512&default=identicon","Jeiner Blanco",{"_387":337,"_408":442,"_379":530},{"_9":453,"_444":491,"_455":491},{"_7":532,"_433":384,"_434":533,"_436":534,"_20":535,"_439":536},"aeff60ba-306b-4571-aad5-4fa192ffaebd","https://www.gravatar.com/avatar/df8de2eca805dc9be5116048b822b21a?size=64&default=identicon","https://www.gravatar.com/avatar/df8de2eca805dc9be5116048b822b21a?size=512&default=identicon","Raoul-Gabriel Gheletus",{"_387":537,"_408":442,"_379":538},"Professional Web Forms 📝",{"_9":453,"_444":523,"_455":466},{"_7":540,"_433":384,"_434":541,"_436":542,"_20":543,"_439":544},"4c116321-e2d5-4506-b045-0d3a2b3f9638","https://www.gravatar.com/avatar/6a045f0793cbefa6ea7e7b54c5a8b71f?size=64&default=identicon","https://www.gravatar.com/avatar/6a045f0793cbefa6ea7e7b54c5a8b71f?size=512&default=identicon","Adam Kearney",{"_387":537,"_408":442,"_379":545},{"_444":523},{"_7":547,"_433":384,"_434":548,"_436":549,"_20":550,"_439":551},"d316f5d8-e5e8-4079-949e-ee5195a9c8f4","https://www.gravatar.com/avatar/f7bc55be219a433bc816de5628b4a9b5?size=64&default=identicon","https://www.gravatar.com/avatar/f7bc55be219a433bc816de5628b4a9b5?size=512&default=identicon","Benjamin Durand",{"_387":552,"_408":442},"Testing Fundamentals",{"_7":554,"_433":16,"_434":555,"_436":556,"_20":557,"_439":558},"add67219-240b-422c-8a93-036d69ce310a","https://www.gravatar.com/avatar/de411a68d8a38d91c8bd78c7e67546c9?size=64&default=identicon","https://www.gravatar.com/avatar/de411a68d8a38d91c8bd78c7e67546c9?size=512&default=identicon","Nikita",{"_387":482,"_408":442,"_379":559},{"_9":465,"_444":507,"_455":466},{"_7":561,"_433":384,"_434":562,"_436":563,"_20":564,"_439":565},"eae66020-9f49-4c00-a475-8b6d5d9af456","https://avatars.githubusercontent.com/u/36880398?v=4&size=64","https://avatars.githubusercontent.com/u/36880398?v=4&size=512","Jeremy Offori",{"_387":566,"_408":442,"_379":567},"Full Stack Foundations 🔭",{"_444":445},{"_7":569,"_433":384,"_434":570,"_436":571,"_20":572,"_439":573},"616fecb5-6dea-4c20-b872-84c6fc576d9d","https://www.gravatar.com/avatar/f6c03a94b25d3a1cf264e37619cc1e75?size=64&default=identicon","https://www.gravatar.com/avatar/f6c03a94b25d3a1cf264e37619cc1e75?size=512&default=identicon","Boris",{"_387":337,"_408":442,"_379":574},{"_9":465,"_444":445,"_455":491},{"_7":576,"_433":384,"_434":577,"_436":578,"_20":579,"_439":580},"42dff37e-fb3b-4fed-a4a4-e153740e7d68","https://avatars.githubusercontent.com/u/63620885?v=4&size=64","https://avatars.githubusercontent.com/u/63620885?v=4&size=512","ruanmeneguello",{"_387":581,"_408":442,"_379":582},"React Hooks 🎣",{"_9":465,"_444":491,"_455":466},{"_7":584,"_433":384,"_434":585,"_436":586,"_20":587,"_439":588},"d533ab8b-f390-4531-8f40-61381e799f04","https://www.gravatar.com/avatar/947d99cade641ac09ebf65abc6dce8b7?size=64&default=identicon","https://www.gravatar.com/avatar/947d99cade641ac09ebf65abc6dce8b7?size=512&default=identicon","Pedro Vazquez Caballero",{"_387":581,"_408":442,"_379":589},{"_9":465,"_444":507,"_455":466},{"_7":591,"_439":592},"s77xi0xz3c9fbib8tnyezepo",{"_387":441,"_408":593,"_379":594},"http://advanced-patterns.epicreact.dev",{"_444":491},{"_7":596,"_433":384,"_434":597,"_436":598,"_20":-5,"_439":599},"038abd80-2a78-45a7-9c46-f4f4974a0330","https://www.gravatar.com/avatar/46cf3bcb42db4fec65db2bbb3656fae7?size=64&default=identicon","https://www.gravatar.com/avatar/46cf3bcb42db4fec65db2bbb3656fae7?size=512&default=identicon",{"_387":600,"_408":442,"_379":601},"Get Started with React 🏃‍➡️",{"_9":465,"_444":466,"_455":507},{"_7":603,"_433":384,"_434":604,"_436":605,"_20":-5,"_439":606},"2a1e88bc-e1d5-4fc1-a7f0-d22eeb95f46f","https://cdn.discordapp.com/avatars/187604445498966016/b0ab470cbb9efdd4bc862b9cd4bd0e3d.png?size=64","https://cdn.discordapp.com/avatars/187604445498966016/b0ab470cbb9efdd4bc862b9cd4bd0e3d.png?size=512",{"_387":473,"_408":442,"_379":607},{"_9":453,"_444":507,"_455":456},{"_7":609,"_433":384,"_434":610,"_436":611,"_20":-5,"_439":612},"ca5a10ff-0b1c-4932-a5e9-888deed168a3","https://www.gravatar.com/avatar/09bbfb65726eaff35bd04c16cef554fa?size=64&default=identicon","https://www.gravatar.com/avatar/09bbfb65726eaff35bd04c16cef554fa?size=512&default=identicon",{"_387":337,"_408":442,"_379":613},{"_9":465,"_444":523,"_455":445},{"_7":615,"_433":384,"_434":616,"_436":617,"_20":-5,"_439":618},"91aeaa24-66b2-4f54-91f6-38e38cda1b00","https://www.gravatar.com/avatar/2a10cb9b89fef16141cdf58faf3f1051?size=64&default=identicon","https://www.gravatar.com/avatar/2a10cb9b89fef16141cdf58faf3f1051?size=512&default=identicon",{"_387":473,"_408":442},{"_7":620,"_439":621},"en1py8twm8afq0xakxa9qiro",{"_387":337,"_408":409,"_379":622},{"_444":623,"_455":-5,"_9":-5},9,"routes/_app+/_layout",{"_387":337,"_626":627,"_835":836,"_838":16},"exercises",[628,643,660,685,706,734,750,775,800,817],{"_444":507,"_336":629,"_630":631,"_635":636,"_639":640},"Hello World in JS","solutions",[632,633],{"_455":507,"_336":629,"_20":27},{"_455":466,"_336":634,"_20":35},"Generate the Root Node","problems",[637,638],{"_455":507,"_336":629,"_20":21},{"_455":466,"_336":634,"_20":31},"steps",[641,642],{"_455":507,"_336":629,"_20":21},{"_455":466,"_336":634,"_20":31},{"_444":466,"_336":644,"_630":645,"_635":652,"_639":656},"Raw React APIs",[646,648,650],{"_455":507,"_336":647,"_20":43},"Create React Elements",{"_455":466,"_336":649,"_20":51},"Nesting Elements",{"_455":445,"_336":651,"_20":59},"Deep Nesting Elements",[653,654,655],{"_455":507,"_336":647,"_20":39},{"_455":466,"_336":649,"_20":47},{"_455":445,"_336":651,"_20":55},[657,658,659],{"_455":507,"_336":647,"_20":39},{"_455":466,"_336":649,"_20":47},{"_455":445,"_336":651,"_20":55},{"_444":445,"_336":661,"_630":662,"_635":673,"_639":679},"Using JSX",[663,665,667,669,671],{"_455":507,"_336":664,"_20":67},"Compiling JSX",{"_455":466,"_336":666,"_20":75},"Interpolation",{"_455":445,"_336":668,"_20":83},"Spread props",{"_455":491,"_336":670,"_20":91},"Nesting JSX",{"_455":454,"_336":672,"_20":99},"Fragments",[674,675,676,677,678],{"_455":507,"_336":664,"_20":63},{"_455":466,"_336":666,"_20":71},{"_455":445,"_336":668,"_20":79},{"_455":491,"_336":670,"_20":87},{"_455":454,"_336":672,"_20":95},[680,681,682,683,684],{"_455":507,"_336":664,"_20":63},{"_455":466,"_336":666,"_20":71},{"_455":445,"_336":668,"_20":79},{"_455":491,"_336":670,"_20":87},{"_455":454,"_336":672,"_20":95},{"_444":491,"_336":686,"_630":687,"_635":696,"_639":701},"Custom Components",[688,690,692,694],{"_455":507,"_336":689,"_20":107},"Simple Function",{"_455":466,"_336":691,"_20":115},"Raw API",{"_455":445,"_336":693,"_20":123},"JSX Components",{"_455":491,"_336":695,"_20":131},"Props",[697,698,699,700],{"_455":507,"_336":689,"_20":103},{"_455":466,"_336":691,"_20":111},{"_455":445,"_336":693,"_20":119},{"_455":491,"_336":695,"_20":127},[702,703,704,705],{"_455":507,"_336":689,"_20":103},{"_455":466,"_336":691,"_20":111},{"_455":445,"_336":693,"_20":119},{"_455":491,"_336":695,"_20":127},{"_444":454,"_336":707,"_630":708,"_635":720,"_639":727},"TypeScript",[709,710,712,714,716,718],{"_455":507,"_336":695,"_20":139},{"_455":466,"_336":711,"_20":147},"Narrow Types",{"_455":445,"_336":713,"_20":155},"Derive Types",{"_455":491,"_336":715,"_20":163},"Default Props",{"_455":454,"_336":717,"_20":171},"Reduce Duplication",{"_455":456,"_336":719,"_20":179},"Satisfies",[721,722,723,724,725,726],{"_455":507,"_336":695,"_20":135},{"_455":466,"_336":711,"_20":143},{"_455":445,"_336":713,"_20":151},{"_455":491,"_336":715,"_20":159},{"_455":454,"_336":717,"_20":167},{"_455":456,"_336":719,"_20":175},[728,729,730,731,732,733],{"_455":507,"_336":695,"_20":135},{"_455":466,"_336":711,"_20":143},{"_455":445,"_336":713,"_20":151},{"_455":491,"_336":715,"_20":159},{"_455":454,"_336":717,"_20":167},{"_455":456,"_336":719,"_20":175},{"_444":456,"_336":735,"_630":736,"_635":742,"_639":746},"Styling",[737,738,740],{"_455":507,"_336":735,"_20":187},{"_455":466,"_336":739,"_20":195},"Custom Component",{"_455":445,"_336":741,"_20":203},"Size Prop",[743,744,745],{"_455":507,"_336":735,"_20":183},{"_455":466,"_336":739,"_20":191},{"_455":445,"_336":741,"_20":199},[747,748,749],{"_455":507,"_336":735,"_20":183},{"_455":466,"_336":739,"_20":191},{"_455":445,"_336":741,"_20":199},{"_444":523,"_336":751,"_630":752,"_635":763,"_639":769},"Forms",[753,755,757,759,761],{"_455":507,"_336":754,"_20":211},"Form",{"_455":466,"_336":756,"_20":219},"Form Action",{"_455":445,"_336":758,"_20":227},"Input Types",{"_455":491,"_336":760,"_20":235},"Submission",{"_455":454,"_336":762,"_20":243},"Form Actions",[764,765,766,767,768],{"_455":507,"_336":754,"_20":207},{"_455":466,"_336":756,"_20":215},{"_455":445,"_336":758,"_20":223},{"_455":491,"_336":760,"_20":231},{"_455":454,"_336":762,"_20":239},[770,771,772,773,774],{"_455":507,"_336":754,"_20":207},{"_455":466,"_336":756,"_20":215},{"_455":445,"_336":758,"_20":223},{"_455":491,"_336":760,"_20":231},{"_455":454,"_336":762,"_20":239},{"_444":475,"_336":776,"_630":777,"_635":788,"_639":794},"Inputs",[778,780,782,784,786],{"_455":507,"_336":779,"_20":251},"Checkbox",{"_455":466,"_336":781,"_20":259},"Select",{"_455":445,"_336":783,"_20":267},"Radios",{"_455":491,"_336":785,"_20":275},"Hidden Inputs",{"_455":454,"_336":787,"_20":283},"Default Value",[789,790,791,792,793],{"_455":507,"_336":779,"_20":247},{"_455":466,"_336":781,"_20":255},{"_455":445,"_336":783,"_20":263},{"_455":491,"_336":785,"_20":271},{"_455":454,"_336":787,"_20":279},[795,796,797,798,799],{"_455":507,"_336":779,"_20":247},{"_455":466,"_336":781,"_20":255},{"_455":445,"_336":783,"_20":263},{"_455":491,"_336":785,"_20":271},{"_455":454,"_336":787,"_20":279},{"_444":623,"_336":801,"_630":802,"_635":809,"_639":813},"Error Boundaries",[803,805,807],{"_455":507,"_336":804,"_20":291},"Composition",{"_455":466,"_336":806,"_20":299},"Other Errors",{"_455":445,"_336":808,"_20":307},"Reset",[810,811,812],{"_455":507,"_336":804,"_20":287},{"_455":466,"_336":806,"_20":295},{"_455":445,"_336":808,"_20":303},[814,815,816],{"_455":507,"_336":804,"_20":287},{"_455":466,"_336":806,"_20":295},{"_455":445,"_336":808,"_20":303},{"_444":818,"_336":819,"_630":820,"_635":827,"_639":831},10,"Rendering Arrays",[821,823,825],{"_455":507,"_336":822,"_20":315},"Key prop",{"_455":466,"_336":824,"_20":323},"Focus State",{"_455":445,"_336":826,"_20":331},"Key Reset",[828,829,830],{"_455":507,"_336":822,"_20":311},{"_455":466,"_336":824,"_20":319},{"_455":445,"_336":826,"_20":327},[832,833,834],{"_455":507,"_336":822,"_20":311},{"_455":466,"_336":824,"_20":319},{"_455":445,"_336":826,"_20":327},"playground",{"_837":-5,"_444":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_841":842,"_387":337,"_379":843,"_968":969,"_970":971,"_972":973,"_977":978,"_983":984},"articleId","workshop-react-fundamentals-9-finished",{"_444":623,"_844":845,"_336":801,"_846":847,"_848":849,"_850":851,"_853":854,"_639":856,"_635":936,"_630":952},"dirName","09.errors","instructionsCode","var Component=(()=>{var b=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var r in e)s(n,r,{get:e[r],enumerable:!0})},c=(n,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let l of y(e))!v.call(n,l)&&l!==r&&s(n,l,{get:()=>e[l],enumerable:!(o=p(e,l))||o.enumerable});return n};var f=(n,e,r)=>(r=n!=null?b(u(n)):{},c(e||!n||!n.__esModule?s(r,\"default\",{value:n,enumerable:!0}):r,n)),w=n=>c(s({},\"__esModule\",{value:!0}),n);var i=m((A,t)=>{t.exports=_jsx_runtime});var E={};k(E,{default:()=>h,frontmatter:()=>N});var a=f(i()),N=void 0;function d(n){let e={a:\"a\",code:\"code\",h1:\"h1\",h2:\"h2\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",...n.components},{EpicVideo:r}=e;return r||g(\"EpicVideo\",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Error Boundaries\"}),`\n`,(0,a.jsx)(r,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-error-boundaries\"}),`\n`,(0,a.jsx)(e.p,{children:`Unfortunately, sometimes things go wrong and we need to handle errors when they\ndo so we can show the user useful information. No matter how hard you try,\neventually your app code just isn't going to behave the way you expect it to and\nyou'll need to handle those exceptions. If an error is thrown and unhandled,\nyour application will be removed from the page, leaving the user with a blank\nscreen... Kind of awkward...`}),`\n`,(0,a.jsxs)(e.p,{children:[\"The problem is, you can't just wrap your entire application in a \",(0,a.jsx)(e.code,{children:\"try\"}),\"/\",(0,a.jsx)(e.code,{children:\"catch\"}),`\nbecause of the way JavaScript works. If you recall from earlier lessons, when\nthen you'll remember this:`]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"element\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"h1\"}),\">Calculator\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Calculator\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"left\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"operator\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"+\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"right\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"2\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Calculator\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"left\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"operator\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"-\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"right\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"2\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Calculator\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"left\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"operator\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"*\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"right\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"2\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Calculator\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"left\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"operator\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"/\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"right\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"2\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\")\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"console\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"log\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"element\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// logs something like:\"}),`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// {\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// \ttype: 'div',\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// \tprops: {\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// \t\tchildren: [\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// \t\t\t{ type: 'h1', props: { children: 'Calculator' } },\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// \t\t\t{ type: Calculator, props: { left: 1, operator: '+', right: 2 } },\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// \t\t\t{ type: Calculator, props: { left: 1, operator: '-', right: 2 } },\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// \t\t\t{ type: Calculator, props: { left: 1, operator: '*', right: 2 } },\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// \t\t\t{ type: Calculator, props: { left: 1, operator: '/', right: 2 } },\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// \t\t],\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// \t},\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// }\"}),`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"You'll notice that the \",(0,a.jsx)(e.code,{children:\"Calculator\"}),` is just referenced, but not actually called\nat this stage. So if we tried to wrap our JSX in a `,(0,a.jsx)(e.code,{children:\"try\"}),\"/\",(0,a.jsx)(e.code,{children:\"catch\"}),`, it would only\ncatch errors during the creation of those elements, but the real errors will\nhappen with React gets around to calling our component functions.`]}),`\n`,(0,a.jsxs)(e.p,{children:[\"So you could wrap all of the contents of your components in a \",(0,a.jsx)(e.code,{children:\"try\"}),\"/\",(0,a.jsx)(e.code,{children:\"catch\"}),`, but\nthat's super annoying boilerplate:`]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// no, don't do this...\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Calculator\"}),\"({ \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"left\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"operator\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"right\"}),\" }) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"try\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"result\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"operations\"}),\"[\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"operator\"}),\"](\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"left\"}),\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"right\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"code\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"left\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"operator\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"right\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" = <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"output\"}),\">\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"result\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t} \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"catch\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">Oh no! An error occurred!\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// ugh, that would be terrible\"}),`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:\"If only there were something like:\"}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Try\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"catch\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">Oh no!\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"App\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[`Oh wait! There is! They're called\n`,(0,a.jsx)(e.a,{href:\"https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary\",children:\"Error Boundaries\"}),\".\"]}),`\n`,(0,a.jsx)(e.p,{children:`So you can make a special kind of component that implements the Error Boundary\nAPI, and then use it like so:`}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ErrorBoundary\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fallback\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">Oh no!\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"App\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"And just like with \",(0,a.jsx)(e.code,{children:\"try/catch\"}),` you can place these error boundaries wherever you\nwant to catch errors. You can even nest them to catch errors in different parts\nof your application to give your users a more meaningful experience.`]}),`\n`,(0,a.jsx)(e.p,{children:`Unfortunately, React doesn't ship this component as a built-in component, and\nthere is currently no way to create an Error Boundary component as a modern\nfunction component so you have to use a class component instead.`}),`\n`,(0,a.jsx)(e.p,{children:\"Here's a simple version of an Error Boundary component:\"}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"class\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ErrorBoundary\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"extends\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Component\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"state\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { error: \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"null\"}),\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"static\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getDerivedStateFromError\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"render\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"this\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"state\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"?\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"this\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"props\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"fallback\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"this\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"props\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:\"Then you'd use it like so:\"}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ErrorBoundary\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fallback\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">Oh no!\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"App\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"And now any errors thrown in \",(0,a.jsx)(e.code,{children:\"App\"}),` will be caught by the Error\nBoundary and render out the error message instead of crashing the app.`]}),`\n`,(0,a.jsxs)(e.p,{children:[\"You're \",(0,a.jsx)(e.strong,{children:\"never going to need to do this\"}),` though. Instead we'll follow the\nofficial docs' recommendation and use\n`,(0,a.jsx)(e.a,{href:\"https://www.npmjs.com/package/react-error-boundary\",children:(0,a.jsx)(e.code,{children:\"react-error-boundary\"})}),`\nwhich has a really nice API with a variety of ways to use it for different use\ncases. Check `,(0,a.jsx)(e.a,{href:\"https://www.npmjs.com/package/react-error-boundary\",children:\"\\u{1F4DC} the docs\"}),`\nfor more details.`]}),`\n`,(0,a.jsx)(e.h2,{children:\"Async Errors\"}),`\n`,(0,a.jsxs)(e.p,{children:[`In React, you need to consider two types of errors: errors that happen during\nrendering, and errors that don't (like an event handler, a `,(0,a.jsx)(e.code,{children:\"useEffect\"}),` callback,\nor a promise `,(0,a.jsx)(e.code,{children:\".then\"}),\"/\",(0,a.jsx)(e.code,{children:\".catch\"}),\").\"]}),`\n`,(0,a.jsxs)(e.p,{children:[\"Under the hood, React is using \",(0,a.jsx)(e.code,{children:\"try\"}),\"/\",(0,a.jsx)(e.code,{children:\"catch\"}),` to catch errors that happen during\nrendering, but React cannot catch all of these kinds of errors because they\nhappen outside of React's call stack.`]}),`\n`,(0,a.jsxs)(e.p,{children:[`So you need to surface those to React yourself. It's not very often you'll need\nto handle these kinds of errors in real world applications using modern React\npatterns and frameworks, but you may run into cases where it's useful. The\neasiest way to do this is to use the `,(0,a.jsx)(e.code,{children:\"useErrorBoundary\"}),` hook from\n`,(0,a.jsx)(e.a,{href:\"https://www.npmjs.com/package/react-error-boundary\",children:(0,a.jsx)(e.code,{children:\"react-error-boundary\"})}),\":\"]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"App\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"showBoundary\"}),\" } \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useErrorBoundary\"}),\"()\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useEffect\"}),\"(() \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"handleMouseMove\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"event\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"try\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Do something that could throw\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\t} \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"catch\"}),\" (\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"showBoundary\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\t\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"window\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"addEventListener\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"mousemove\"}),\"'\",\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"handleMouseMove\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" () \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"=>\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"window\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"removeEventListener\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"mousemove\"}),\"'\",\", \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"handleMouseMove\"}),\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[\"\t\t}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"\t})\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Render ...\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:`An alternative to using an error boundary for this type of error is to store the\nerror in state and display that. Both approaches are valid, and which one you\nchoose comes down to which feels better. I typically try both and choose the one\nI hate the least \\u{1F605}`}),`\n`,(0,a.jsx)(e.h2,{children:\"Localized Error Handling\"}),`\n`,(0,a.jsx)(e.p,{children:`Most applications will use more than a single error boundary. You should really\nthink about error boundaries as try/catch blocks. You don't want to wrap your\nentire application in a single try/catch block because it's more difficult to\nhandle errors in a meaningful way. Instead, you wrap things in more practical\nplaces so you can handle errors in a more localized way with the kind of context\nthat makes sense for that part of the application.`}),`\n`,(0,a.jsx)(e.p,{children:`You'll use error boundaries in a similar way. Just think about what the user\nwill be able to do when errors occur and if you're able to give them more useful\nactions by handling the error more closely to where it originated, then do that.`}),`\n`,(0,a.jsx)(e.p,{children:`For example, let's say you have a list/detail view. You might want to have an\nerror boundary around the list and another around the detail view. This way, if\nthere's an error in the list, you can show a message to the user and give them\nthe option to retry fetching the list. If there's an error in the detail view,\nyou can show an error and they can at least try other items in the list.`}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"App\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ErrorBoundary\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fallback\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">Something went wrong with the list.\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"List\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ErrorBoundary\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\t\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"fallback\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">Something went wrong with this item, try another.\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t\t>\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Detail\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"\t\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[\"}\",`\n`]})]})})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function g(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(E);})();\n;return Component;","finishedCode","var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var l=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),_=(e,n)=>{for(var o in n)i(e,o,{get:n[o],enumerable:!0})},c=(e,n,o,s)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of h(n))!x.call(e,r)&&r!==o&&i(e,r,{get:()=>n[r],enumerable:!(s=f(n,r))||s.enumerable});return e};var j=(e,n,o)=>(o=e!=null?m(w(e)):{},c(n||!e||!e.__esModule?i(o,\"default\",{value:e,enumerable:!0}):o,e)),k=e=>c(i({},\"__esModule\",{value:!0}),e);var d=l((y,a)=>{a.exports=_jsx_runtime});var b={};_(b,{default:()=>u,frontmatter:()=>g});var t=j(d()),g=void 0;function p(e){let n={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=n;return o||E(\"EpicVideo\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{children:\"Error Boundaries\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-error-boundaries\"}),`\n`,(0,t.jsx)(n.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great work \\u{1F44F} You now know how to manage errors in React components!\"})]})}function u(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(p,{...e})}):p(e)}function E(e,n){throw new Error(\"Expected \"+(n?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(b);})();\n;return Component;","instructionsEpicVideoEmbeds",[852],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-error-boundaries","finishedEpicVideoEmbeds",[855],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-error-boundaries",[857,890,913],{"_455":507,"_465":858,"_453":878},{"_20":287,"_336":804,"_844":859,"_22":288,"_24":289,"_846":860,"_861":862,"_864":865,"_872":873,"_875":876,"_444":623,"_455":507,"_9":465,"_877":291},"01.problem.composition","var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var w=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var o in e)t(r,o,{get:e[o],enumerable:!0})},l=(r,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!y.call(r,a)&&a!==o&&t(r,a,{get:()=>e[a],enumerable:!(c=u(e,a))||c.enumerable});return r};var f=(r,e,o)=>(o=r!=null?h(b(r)):{},l(e||!r||!r.__esModule?t(o,\"default\",{value:r,enumerable:!0}):o,r)),v=r=>l(t({},\"__esModule\",{value:!0}),r);var s=w((A,d)=>{d.exports=_jsx_runtime});var F={};g(F,{default:()=>p,frontmatter:()=>x});var n=f(s()),x=void 0;function i(r){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...r.components},{EpicVideo:o}=e;return o||E(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Composition\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/composition\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} You'll notice that right now our onboarding form isn't showing up at all.\nThat's because someone made a typo... But errors like this could happen for any\nnumber of reasons (data issue, API version change, network error, etc.). So we\nshould definitely handle errors in our app.`}),`\n`,(0,n.jsxs)(e.p,{children:[\"Let's start by wrapping our existing \",(0,n.jsx)(e.code,{children:\"App\"}),` component in an Error Boundary to\nhandle any errors. We're going to have you use the `,(0,n.jsx)(e.code,{children:\"FallbackComponent\"}),` prop on\nthe `,(0,n.jsx)(e.code,{children:\"ErrorBoundary\"}),\" so we can define our own \",(0,n.jsx)(e.code,{children:\"ErrorFallback\"}),\" component.\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ErrorBoundary\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"FallbackComponent\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"ErrorFallback\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"/*...*/\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]})})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Right now we have an \",(0,n.jsx)(e.code,{children:\"App\"}),` component which we render using\n`,(0,n.jsx)(e.code,{children:\"createRoot(rootEl).render()\"}),`, so to get our stuff wrapped\nproperly, we'll rename our existing `,(0,n.jsx)(e.code,{children:\"App\"}),\" component (call it \",(0,n.jsx)(e.code,{children:\"OnboardingForm\"}),`) and\nthen make a new `,(0,n.jsx)(e.code,{children:\"App\"}),\" which renders the \",(0,n.jsx)(e.code,{children:\"ErrorBoundary\"}),\" around the \",(0,n.jsx)(e.code,{children:\"OnboardingForm\"}),`\ncomponent along with our `,(0,n.jsx)(e.code,{children:\"FallbackComponent\"}),\" called \",(0,n.jsx)(e.code,{children:\"ErrorFallback\"}),` (which you\nalso have to create).`]}),`\n`,(0,n.jsx)(e.p,{children:\"Get to it!\"})]})}function p(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(i,{...r})}):i(r)}function E(r,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+r+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return v(F);})();\n;return Component;","epicVideoEmbeds",[863],"https://www.epicreact.dev/workshops/react-fundamentals/composition","test",{"_9":866,"_867":868,"_869":870},"browser","pathname","/app/09.01.problem/test/","testFiles",[871],"error-boundary.test.ts","dev",{"_9":866,"_867":874},"/app/09.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/09.errors/01.problem.composition?view=editor&title=Composition+%28problem%29","solutionName",{"_20":291,"_336":804,"_844":879,"_22":292,"_24":293,"_846":880,"_861":881,"_864":883,"_872":886,"_875":888,"_444":623,"_455":507,"_9":453,"_889":-5},"01.solution.composition","var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var o in e)a(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!x.call(t,r)&&r!==o&&a(t,r,{get:()=>e[r],enumerable:!(i=l(e,r))||i.enumerable});return t};var j=(t,e,o)=>(o=t!=null?h(f(t)):{},s(e||!t||!t.__esModule?a(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>s(a({},\"__esModule\",{value:!0}),t);var p=w((M,c)=>{c.exports=_jsx_runtime});var g={};_(g,{default:()=>u,frontmatter:()=>k});var n=j(p()),k=void 0;function d(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||y(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Composition\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/composition/solution\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great job! You've successfully wrapped our app logic in an error boundary\nthat can handle any errors that occur in the app. But what about other kinds of\nerrors? The kind that React doesn't know about? Let's look at that next.`})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}function y(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(g);})();\n;return Component;",[882],"https://www.epicreact.dev/workshops/react-fundamentals/composition/solution",{"_9":866,"_867":884,"_869":885},"/app/09.01.solution/test/",[871],{"_9":866,"_867":887},"/app/09.01.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/09.errors/01.solution.composition?view=editor&title=Composition+%28solution%29","problemName",{"_455":466,"_465":891,"_453":902},{"_20":295,"_336":806,"_844":892,"_22":296,"_24":297,"_846":893,"_861":894,"_864":896,"_872":899,"_875":901,"_444":623,"_455":466,"_9":465,"_877":299},"02.problem.show-boundary","var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var a in e)l(r,a,{get:e[a],enumerable:!0})},t=(r,e,a,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of u(e))!m.call(r,o)&&o!==a&&l(r,o,{get:()=>e[o],enumerable:!(s=b(e,o))||s.enumerable});return r};var w=(r,e,a)=>(a=r!=null?p(y(r)):{},t(e||!r||!r.__esModule?l(a,\"default\",{value:r,enumerable:!0}):a,r)),k=r=>t(l({},\"__esModule\",{value:!0}),r);var i=v((N,c)=>{c.exports=_jsx_runtime});var E={};f(E,{default:()=>h,frontmatter:()=>g});var n=w(i()),g=void 0;function d(r){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...r.components},{EpicVideo:a}=e;return a||x(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Other Errors\"}),`\n`,(0,n.jsx)(a,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/other-errors\"}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Recall previously we learned that React doesn't catch all errors for you.\nWe've got an error in our `,(0,n.jsx)(e.code,{children:\"onSubmit\"}),` handler like this. If you try to submit the\nform, you'll notice in the console that there's an error (someone made a typo\n\\u{1F605}). The error looks something like:`]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"javascript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"Uncaught\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"TypeError\"}),\": \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"Cannot\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"read\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"properties\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"of\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"null\"}),\" (\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"reading\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"toUpperCase\"}),\"'\",\")\",`\n`]})})}),`\n`,(0,n.jsxs)(e.p,{children:[`Before we fix the typo, we want to give the user better feedback for when\nsomething like this happens (right now, they don't know it's not working and\nthat's terribly annoying). So what I want you to do is wrap that callback in our\nown `,(0,n.jsx)(e.code,{children:\"try/catch\"}),\" and then surface it to React using the \",(0,n.jsx)(e.code,{children:\"showBoundary\"}),` function\nyou get when you call the `,(0,n.jsx)(e.code,{children:\"useErrorBoundary\"}),\" utility:\"]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"useErrorBoundary\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"react-error-boundary\"}),\"'\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// ... in the component\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"showBoundary\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"useErrorBoundary\"}),\"()\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// ... in the `catch` block\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"showBoundary\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"error\"}),\")\",`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:\"So let's make that happen!\"})]})}function h(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}function x(r,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+r+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(E);})();\n;return Component;",[895],"https://www.epicreact.dev/workshops/react-fundamentals/other-errors",{"_9":866,"_867":897,"_869":898},"/app/09.02.problem/test/",[871],{"_9":866,"_867":900},"/app/09.02.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/09.errors/02.problem.show-boundary?view=editor&title=Other+Errors+%28problem%29",{"_20":299,"_336":806,"_844":903,"_22":300,"_24":301,"_846":904,"_861":905,"_864":907,"_872":910,"_875":912,"_444":623,"_455":466,"_9":453,"_889":-5},"02.solution.show-boundary","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let o of f(t))!x.call(e,o)&&o!==n&&i(e,o,{get:()=>t[o],enumerable:!(s=m(t,o))||s.enumerable});return e};var g=(e,t,n)=>(n=e!=null?u(l(e)):{},c(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>c(i({},\"__esModule\",{value:!0}),e);var h=w((k,a)=>{a.exports=_jsx_runtime});var b={};_(b,{default:()=>p,frontmatter:()=>y});var r=g(h()),y=void 0;function d(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||E(\"EpicVideo\",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h1,{children:\"Other Errors\"}),`\n`,(0,r.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/other-errors/solution\"}),`\n`,(0,r.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great work! Now you can handle errors and give the user a better experience\nthan nothing happening at all when they submit the form.`})]})}function p(e={}){let{wrapper:t}=e.components||{};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}function E(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(b);})();\n;return Component;",[906],"https://www.epicreact.dev/workshops/react-fundamentals/other-errors/solution",{"_9":866,"_867":908,"_869":909},"/app/09.02.solution/test/",[871],{"_9":866,"_867":911},"/app/09.02.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/09.errors/02.solution.show-boundary?view=editor&title=Other+Errors+%28solution%29",{"_455":445,"_465":914,"_453":925},{"_20":303,"_336":808,"_844":915,"_22":304,"_24":305,"_846":916,"_861":917,"_864":919,"_872":922,"_875":924,"_444":623,"_455":445,"_9":465,"_877":307},"03.problem.reset","var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!y.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(a=l(e,r))||a.enumerable});return t};var x=(t,e,o)=>(o=t!=null?p(f(t)):{},c(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),b=t=>c(i({},\"__esModule\",{value:!0}),t);var d=g((M,s)=>{s.exports=_jsx_runtime});var E={};w(E,{default:()=>h,frontmatter:()=>_});var n=x(d()),_=void 0;function u(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||j(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Reset\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/reset\"}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Sometimes errors are temporary and will go away if you just \"turn it off and\non again.\" `,(0,n.jsx)(e.code,{children:\"react-error-boundary\"}),\" supports this with a \",(0,n.jsx)(e.code,{children:\"resetErrorBoundary\"}),`\nfunction it passes to our `,(0,n.jsx)(e.code,{children:\"FallbackComponent\"}),`. We can use this to reset the\nerror boundary and try again.`]}),`\n`,(0,n.jsxs)(e.p,{children:[`Once you're done, you can test it out. We've still got the typo in our\n`,(0,n.jsx)(e.code,{children:\"onSubmit\"}),` handler, so go ahead and trigger the error by submitting the form,\nthen click the \"Try again\" button to see the error go away.`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(u,{...t})}):u(t)}function j(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return b(E);})();\n;return Component;",[918],"https://www.epicreact.dev/workshops/react-fundamentals/reset",{"_9":866,"_867":920,"_869":921},"/app/09.03.problem/test/",[871],{"_9":866,"_867":923},"/app/09.03.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/09.errors/03.problem.reset?view=editor&title=Reset+%28problem%29",{"_20":307,"_336":808,"_844":926,"_22":308,"_24":309,"_846":927,"_861":928,"_864":930,"_872":933,"_875":935,"_444":623,"_455":445,"_9":453,"_889":-5},"03.solution.reset","var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),y=(e,t)=>{for(var n in t)s(e,n,{get:t[n],enumerable:!0})},a=(e,t,n,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of p(t))!w.call(e,r)&&r!==n&&s(e,r,{get:()=>t[r],enumerable:!(i=f(t,r))||i.enumerable});return e};var g=(e,t,n)=>(n=e!=null?m(l(e)):{},a(t||!e||!e.__esModule?s(n,\"default\",{value:e,enumerable:!0}):n,e)),v=e=>a(s({},\"__esModule\",{value:!0}),e);var u=x((M,h)=>{h.exports=_jsx_runtime});var b={};y(b,{default:()=>d,frontmatter:()=>_});var o=g(u()),_=void 0;function c(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||j(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Reset\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/reset/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great! It's nice to give our users a path forward. One thing you may have\nnoticed is that if you enter in values into the form and there's an error, when\nyou restore your form, the values are gone. This is because we're not\npersisting the values in the form. That's beyond the scope of this exercise, but\nit's something to keep in mind. If that's something important to your situation,\nyou'll need to find a way to persist the form values and restore those values\nwhen the form is rendered again.`})]})}function d(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}function j(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return v(b);})();\n;return Component;",[929],"https://www.epicreact.dev/workshops/react-fundamentals/reset/solution",{"_9":866,"_867":931,"_869":932},"/app/09.03.solution/test/",[871],{"_9":866,"_867":934},"/app/09.03.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/09.errors/03.solution.reset?view=editor&title=Reset+%28solution%29",[937,942,947],{"_20":287,"_336":804,"_844":859,"_22":288,"_24":289,"_846":860,"_861":938,"_864":939,"_872":941,"_875":876,"_444":623,"_455":507,"_9":465,"_877":291},[863],{"_9":866,"_867":868,"_869":940},[871],{"_9":866,"_867":874},{"_20":295,"_336":806,"_844":892,"_22":296,"_24":297,"_846":893,"_861":943,"_864":944,"_872":946,"_875":901,"_444":623,"_455":466,"_9":465,"_877":299},[895],{"_9":866,"_867":897,"_869":945},[871],{"_9":866,"_867":900},{"_20":303,"_336":808,"_844":915,"_22":304,"_24":305,"_846":916,"_861":948,"_864":949,"_872":951,"_875":924,"_444":623,"_455":445,"_9":465,"_877":307},[918],{"_9":866,"_867":920,"_869":950},[871],{"_9":866,"_867":923},[953,958,963],{"_20":291,"_336":804,"_844":879,"_22":292,"_24":293,"_846":880,"_861":954,"_864":955,"_872":957,"_875":888,"_444":623,"_455":507,"_9":453,"_889":-5},[882],{"_9":866,"_867":884,"_869":956},[871],{"_9":866,"_867":887},{"_20":299,"_336":806,"_844":903,"_22":300,"_24":301,"_846":904,"_861":959,"_864":960,"_872":962,"_875":912,"_444":623,"_455":466,"_9":453,"_889":-5},[906],{"_9":866,"_867":908,"_869":961},[871],{"_9":866,"_867":911},{"_20":307,"_336":808,"_844":926,"_22":308,"_24":309,"_846":927,"_861":964,"_864":965,"_872":967,"_875":935,"_444":623,"_455":445,"_9":453,"_889":-5},[929],{"_9":866,"_867":931,"_869":966},[871],{"_9":866,"_867":934},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=React%20Fundamentals%20%E2%9A%9B&entry.428900931=Error%20Boundaries","epicVideoInfosPromise",["P",971],"exerciseFinished",{"_974":975,"_24":976},"file","/myapp/workshop-content/exercises/09.errors/FINISHED.mdx","exercises/09.errors/FINISHED.mdx","prevStepLink",{"_979":980,"_981":982},"to","/exercise/09/03/solution","aria-label","Reset (solution)","nextStepLink",{"_979":985,"_981":819},"/exercise/10","routes/_app+/exercise+/_layout","actionData","errors"]

09. Error Boundaries/Elaboration