[{"_1":2,"_923":-5,"_924":-5},"loaderData",{"_3":4,"_558":559,"_775":776,"_922":-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","no54o2vhd3w8njcigwev2x2o","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.9.0","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,456,464,473,482,489,497,504,511,519,522,529,534,539,546,553],{"_7":432,"_433":16,"_434":435,"_436":437,"_20":438,"_439":440},"8913be90-5c7e-44e7-942c-73a3337b0316","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/99e831fcdd378894b87cd81e0cf06bcf?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/99e831fcdd378894b87cd81e0cf06bcf?size=512&default=identicon","Ekwugha Andrew","location",{"_387":441,"_408":442,"_379":443},"React Hooks 🎣","http://localhost:5639",{"_444":445},"exerciseNumber",2,{"_7":447,"_433":384,"_434":448,"_436":449,"_20":450,"_439":451},"1da91eac-df0f-4541-a637-2633ebe8b7e8","https://www.gravatar.com/avatar/69f2cf01a716bbde0d284f2b41d8c826?size=64&default=identicon","https://www.gravatar.com/avatar/69f2cf01a716bbde0d284f2b41d8c826?size=512&default=identicon","Renado",{"_387":452,"_408":442,"_379":453},"React Performance ⚡",{"_9":454,"_444":445,"_455":445},"problem","stepNumber",{"_7":457,"_433":384,"_434":458,"_436":459,"_20":460,"_439":461},"661babcf-ccd2-4b07-af16-3676d066d776","https://www.gravatar.com/avatar/ecc0626249a439da2c4e73b089e8b50c?size=64&default=identicon","https://www.gravatar.com/avatar/ecc0626249a439da2c4e73b089e8b50c?size=512&default=identicon","Epic React-Jun",{"_387":337,"_408":442,"_379":462},{"_444":463},3,{"_7":465,"_433":16,"_434":466,"_436":467,"_20":468,"_439":469},"f6040321-feff-4977-8f13-eff063fa2b19","https://avatars.githubusercontent.com/u/71365794?v=4&size=64","https://avatars.githubusercontent.com/u/71365794?v=4&size=512","museadam",{"_387":470,"_408":442,"_379":471},"Advanced React APIs 🔥",{"_444":472},4,{"_7":474,"_433":384,"_434":475,"_436":476,"_20":477,"_439":478},"3357b472-bdc5-498c-9827-61bc5da9cfac","https://www.gravatar.com/avatar/a5dbe6c83239ddad828756c15147e1c3?size=64&default=identicon","https://www.gravatar.com/avatar/a5dbe6c83239ddad828756c15147e1c3?size=512&default=identicon","Krisztina Pap",{"_387":337,"_408":442,"_379":479},{"_9":480,"_444":463,"_455":481},"solution",1,{"_7":483,"_433":384,"_434":484,"_436":485,"_20":486,"_439":487},"a2d84426-2cfe-474b-9ec1-104a81dc8afe","https://cdn.discordapp.com/avatars/783073109476638731/dff0b9b4ee2b3c652e663bdddd29ecf0.png?size=64","https://cdn.discordapp.com/avatars/783073109476638731/dff0b9b4ee2b3c652e663bdddd29ecf0.png?size=512","Pablo Fogliazza",{"_387":441,"_408":442,"_379":488},{"_9":480,"_444":481,"_455":481},{"_7":490,"_433":384,"_434":491,"_436":492,"_20":493,"_439":494},"cc23ff97-d4d2-435c-a947-ae0697988649","https://avatars.githubusercontent.com/u/15137214?v=4&size=64","https://avatars.githubusercontent.com/u/15137214?v=4&size=512","Jun-Xin Huang",{"_387":495,"_408":442,"_379":496},"Data Modeling Deep Dive 💾",{"_444":463},{"_7":498,"_433":384,"_434":499,"_436":500,"_20":501,"_439":502},"46d16ce2-1b04-4ba5-9310-d9b242bf9013","https://www.gravatar.com/avatar/841635628adc50c4580af219eb2f7feb?size=64&default=identicon","https://www.gravatar.com/avatar/841635628adc50c4580af219eb2f7feb?size=512&default=identicon","Wojciech Płaczek",{"_387":337,"_408":442,"_379":503},{"_444":445},{"_7":505,"_433":384,"_434":506,"_436":507,"_20":508,"_439":509},"0f5b8a78-d62b-44e9-bc94-3fba13abab00","https://www.gravatar.com/avatar/2c118fa8ccb6f6ba543f408de37546a0?size=64&default=identicon","https://www.gravatar.com/avatar/2c118fa8ccb6f6ba543f408de37546a0?size=512&default=identicon","Eduardo Ocampo Lopez Escalera",{"_387":337,"_408":442,"_379":510},{"_9":454,"_444":481,"_455":481},{"_7":512,"_433":384,"_434":513,"_436":514,"_20":515,"_439":516},"15837a67-5bc7-4128-b17b-d81678ee897e","https://www.gravatar.com/avatar/9cc69f7970a625abf97b56c9fa39e368?size=64&default=identicon","https://www.gravatar.com/avatar/9cc69f7970a625abf97b56c9fa39e368?size=512&default=identicon","Cris Curelaru",{"_387":441,"_408":442,"_379":517},{"_9":454,"_444":518,"_455":445},6,{"_7":520,"_439":521},"d0zacknky8xjiqndudqextwy",{"_387":337,"_408":442},{"_7":523,"_433":384,"_434":524,"_436":525,"_20":-5,"_439":526},"b29562b0-1c8f-4888-857c-8b30f2918d06","https://www.gravatar.com/avatar/0527a43e1308267ac94b0dfbc6f974ac?size=64&default=identicon","https://www.gravatar.com/avatar/0527a43e1308267ac94b0dfbc6f974ac?size=512&default=identicon",{"_387":527,"_408":442,"_379":528},"Advanced React Patterns 🤯",{"_9":454,"_444":472,"_455":481},{"_7":530,"_439":531},"morlfmq7ltbnf9bagxel0d7l",{"_387":532,"_408":442,"_379":533},"React Suspense 🔀",{"_9":454,"_444":518,"_455":445},{"_7":535,"_439":536},"pr62opzjp24f00vls19dhm0u",{"_387":527,"_408":537,"_379":538},"http://advanced-patterns.epicreact.dev",{"_444":472},{"_7":540,"_439":541},"kyeg2px8xgolq4o8m3h0iyak",{"_387":542,"_408":543,"_379":544},"Full Stack Testing 🧪","http://testing.epicweb.dev",{"_444":545},7,{"_7":547,"_433":384,"_434":548,"_436":549,"_20":-5,"_439":550},"388ae3b4-841c-4854-8c7d-d290ea29e6d3","https://www.gravatar.com/avatar/ae986614d33dde352c4f716900de40fb?size=64&default=identicon","https://www.gravatar.com/avatar/ae986614d33dde352c4f716900de40fb?size=512&default=identicon",{"_387":441,"_408":551,"_379":552},"http://localhost:5640",{"_9":454,"_444":518,"_455":463},{"_7":554,"_439":555},"lf6sxyd3esyjmjup1rw2w70d",{"_387":337,"_408":409,"_379":556},{"_444":557,"_455":-5,"_9":-5},9,"routes/_app+/_layout",{"_387":337,"_560":561,"_771":772,"_774":16},"exercises",[562,577,594,620,641,669,685,710,736,753],{"_444":481,"_336":563,"_564":565,"_569":570,"_573":574},"Hello World in JS","solutions",[566,567],{"_455":481,"_336":563,"_20":27},{"_455":445,"_336":568,"_20":35},"Generate the Root Node","problems",[571,572],{"_455":481,"_336":563,"_20":21},{"_455":445,"_336":568,"_20":31},"steps",[575,576],{"_455":481,"_336":563,"_20":21},{"_455":445,"_336":568,"_20":31},{"_444":445,"_336":578,"_564":579,"_569":586,"_573":590},"Raw React APIs",[580,582,584],{"_455":481,"_336":581,"_20":43},"Create React Elements",{"_455":445,"_336":583,"_20":51},"Nesting Elements",{"_455":463,"_336":585,"_20":59},"Deep Nesting Elements",[587,588,589],{"_455":481,"_336":581,"_20":39},{"_455":445,"_336":583,"_20":47},{"_455":463,"_336":585,"_20":55},[591,592,593],{"_455":481,"_336":581,"_20":39},{"_455":445,"_336":583,"_20":47},{"_455":463,"_336":585,"_20":55},{"_444":463,"_336":595,"_564":596,"_569":608,"_573":614},"Using JSX",[597,599,601,603,605],{"_455":481,"_336":598,"_20":67},"Compiling JSX",{"_455":445,"_336":600,"_20":75},"Interpolation",{"_455":463,"_336":602,"_20":83},"Spread props",{"_455":472,"_336":604,"_20":91},"Nesting JSX",{"_455":606,"_336":607,"_20":99},5,"Fragments",[609,610,611,612,613],{"_455":481,"_336":598,"_20":63},{"_455":445,"_336":600,"_20":71},{"_455":463,"_336":602,"_20":79},{"_455":472,"_336":604,"_20":87},{"_455":606,"_336":607,"_20":95},[615,616,617,618,619],{"_455":481,"_336":598,"_20":63},{"_455":445,"_336":600,"_20":71},{"_455":463,"_336":602,"_20":79},{"_455":472,"_336":604,"_20":87},{"_455":606,"_336":607,"_20":95},{"_444":472,"_336":621,"_564":622,"_569":631,"_573":636},"Custom Components",[623,625,627,629],{"_455":481,"_336":624,"_20":107},"Simple Function",{"_455":445,"_336":626,"_20":115},"Raw API",{"_455":463,"_336":628,"_20":123},"JSX Components",{"_455":472,"_336":630,"_20":131},"Props",[632,633,634,635],{"_455":481,"_336":624,"_20":103},{"_455":445,"_336":626,"_20":111},{"_455":463,"_336":628,"_20":119},{"_455":472,"_336":630,"_20":127},[637,638,639,640],{"_455":481,"_336":624,"_20":103},{"_455":445,"_336":626,"_20":111},{"_455":463,"_336":628,"_20":119},{"_455":472,"_336":630,"_20":127},{"_444":606,"_336":642,"_564":643,"_569":655,"_573":662},"TypeScript",[644,645,647,649,651,653],{"_455":481,"_336":630,"_20":139},{"_455":445,"_336":646,"_20":147},"Narrow Types",{"_455":463,"_336":648,"_20":155},"Derive Types",{"_455":472,"_336":650,"_20":163},"Default Props",{"_455":606,"_336":652,"_20":171},"Reduce Duplication",{"_455":518,"_336":654,"_20":179},"Satisfies",[656,657,658,659,660,661],{"_455":481,"_336":630,"_20":135},{"_455":445,"_336":646,"_20":143},{"_455":463,"_336":648,"_20":151},{"_455":472,"_336":650,"_20":159},{"_455":606,"_336":652,"_20":167},{"_455":518,"_336":654,"_20":175},[663,664,665,666,667,668],{"_455":481,"_336":630,"_20":135},{"_455":445,"_336":646,"_20":143},{"_455":463,"_336":648,"_20":151},{"_455":472,"_336":650,"_20":159},{"_455":606,"_336":652,"_20":167},{"_455":518,"_336":654,"_20":175},{"_444":518,"_336":670,"_564":671,"_569":677,"_573":681},"Styling",[672,673,675],{"_455":481,"_336":670,"_20":187},{"_455":445,"_336":674,"_20":195},"Custom Component",{"_455":463,"_336":676,"_20":203},"Size Prop",[678,679,680],{"_455":481,"_336":670,"_20":183},{"_455":445,"_336":674,"_20":191},{"_455":463,"_336":676,"_20":199},[682,683,684],{"_455":481,"_336":670,"_20":183},{"_455":445,"_336":674,"_20":191},{"_455":463,"_336":676,"_20":199},{"_444":545,"_336":686,"_564":687,"_569":698,"_573":704},"Forms",[688,690,692,694,696],{"_455":481,"_336":689,"_20":211},"Form",{"_455":445,"_336":691,"_20":219},"Form Action",{"_455":463,"_336":693,"_20":227},"Input Types",{"_455":472,"_336":695,"_20":235},"Submission",{"_455":606,"_336":697,"_20":243},"Form Actions",[699,700,701,702,703],{"_455":481,"_336":689,"_20":207},{"_455":445,"_336":691,"_20":215},{"_455":463,"_336":693,"_20":223},{"_455":472,"_336":695,"_20":231},{"_455":606,"_336":697,"_20":239},[705,706,707,708,709],{"_455":481,"_336":689,"_20":207},{"_455":445,"_336":691,"_20":215},{"_455":463,"_336":693,"_20":223},{"_455":472,"_336":695,"_20":231},{"_455":606,"_336":697,"_20":239},{"_444":711,"_336":712,"_564":713,"_569":724,"_573":730},8,"Inputs",[714,716,718,720,722],{"_455":481,"_336":715,"_20":251},"Checkbox",{"_455":445,"_336":717,"_20":259},"Select",{"_455":463,"_336":719,"_20":267},"Radios",{"_455":472,"_336":721,"_20":275},"Hidden Inputs",{"_455":606,"_336":723,"_20":283},"Default Value",[725,726,727,728,729],{"_455":481,"_336":715,"_20":247},{"_455":445,"_336":717,"_20":255},{"_455":463,"_336":719,"_20":263},{"_455":472,"_336":721,"_20":271},{"_455":606,"_336":723,"_20":279},[731,732,733,734,735],{"_455":481,"_336":715,"_20":247},{"_455":445,"_336":717,"_20":255},{"_455":463,"_336":719,"_20":263},{"_455":472,"_336":721,"_20":271},{"_455":606,"_336":723,"_20":279},{"_444":557,"_336":737,"_564":738,"_569":745,"_573":749},"Error Boundaries",[739,741,743],{"_455":481,"_336":740,"_20":291},"Composition",{"_455":445,"_336":742,"_20":299},"Other Errors",{"_455":463,"_336":744,"_20":307},"Reset",[746,747,748],{"_455":481,"_336":740,"_20":287},{"_455":445,"_336":742,"_20":295},{"_455":463,"_336":744,"_20":303},[750,751,752],{"_455":481,"_336":740,"_20":287},{"_455":445,"_336":742,"_20":295},{"_455":463,"_336":744,"_20":303},{"_444":754,"_336":755,"_564":756,"_569":763,"_573":767},10,"Rendering Arrays",[757,759,761],{"_455":481,"_336":758,"_20":315},"Key prop",{"_455":445,"_336":760,"_20":323},"Focus State",{"_455":463,"_336":762,"_20":331},"Key Reset",[764,765,766],{"_455":481,"_336":758,"_20":311},{"_455":445,"_336":760,"_20":319},{"_455":463,"_336":762,"_20":327},[768,769,770],{"_455":481,"_336":758,"_20":311},{"_455":445,"_336":760,"_20":319},{"_455":463,"_336":762,"_20":327},"playground",{"_773":-5,"_444":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_777":778,"_387":337,"_379":779,"_904":905,"_906":907,"_908":909,"_913":914,"_919":920},"articleId","workshop-react-fundamentals-9-finished",{"_444":557,"_780":781,"_336":737,"_782":783,"_784":785,"_786":787,"_789":790,"_573":792,"_569":872,"_564":888},"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",[788],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-error-boundaries","finishedEpicVideoEmbeds",[791],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-error-boundaries",[793,826,849],{"_455":481,"_454":794,"_480":814},{"_20":287,"_336":740,"_780":795,"_22":288,"_24":289,"_782":796,"_797":798,"_800":801,"_808":809,"_811":812,"_444":557,"_455":481,"_9":454,"_813":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",[799],"https://www.epicreact.dev/workshops/react-fundamentals/composition","test",{"_9":802,"_803":804,"_805":806},"browser","pathname","/app/09.01.problem/test/","testFiles",[807],"error-boundary.test.ts","dev",{"_9":802,"_803":810},"/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":740,"_780":815,"_22":292,"_24":293,"_782":816,"_797":817,"_800":819,"_808":822,"_811":824,"_444":557,"_455":481,"_9":480,"_825":-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;",[818],"https://www.epicreact.dev/workshops/react-fundamentals/composition/solution",{"_9":802,"_803":820,"_805":821},"/app/09.01.solution/test/",[807],{"_9":802,"_803":823},"/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":445,"_454":827,"_480":838},{"_20":295,"_336":742,"_780":828,"_22":296,"_24":297,"_782":829,"_797":830,"_800":832,"_808":835,"_811":837,"_444":557,"_455":445,"_9":454,"_813":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;",[831],"https://www.epicreact.dev/workshops/react-fundamentals/other-errors",{"_9":802,"_803":833,"_805":834},"/app/09.02.problem/test/",[807],{"_9":802,"_803":836},"/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":742,"_780":839,"_22":300,"_24":301,"_782":840,"_797":841,"_800":843,"_808":846,"_811":848,"_444":557,"_455":445,"_9":480,"_825":-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;",[842],"https://www.epicreact.dev/workshops/react-fundamentals/other-errors/solution",{"_9":802,"_803":844,"_805":845},"/app/09.02.solution/test/",[807],{"_9":802,"_803":847},"/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":463,"_454":850,"_480":861},{"_20":303,"_336":744,"_780":851,"_22":304,"_24":305,"_782":852,"_797":853,"_800":855,"_808":858,"_811":860,"_444":557,"_455":463,"_9":454,"_813":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;",[854],"https://www.epicreact.dev/workshops/react-fundamentals/reset",{"_9":802,"_803":856,"_805":857},"/app/09.03.problem/test/",[807],{"_9":802,"_803":859},"/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":744,"_780":862,"_22":308,"_24":309,"_782":863,"_797":864,"_800":866,"_808":869,"_811":871,"_444":557,"_455":463,"_9":480,"_825":-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;",[865],"https://www.epicreact.dev/workshops/react-fundamentals/reset/solution",{"_9":802,"_803":867,"_805":868},"/app/09.03.solution/test/",[807],{"_9":802,"_803":870},"/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",[873,878,883],{"_20":287,"_336":740,"_780":795,"_22":288,"_24":289,"_782":796,"_797":874,"_800":875,"_808":877,"_811":812,"_444":557,"_455":481,"_9":454,"_813":291},[799],{"_9":802,"_803":804,"_805":876},[807],{"_9":802,"_803":810},{"_20":295,"_336":742,"_780":828,"_22":296,"_24":297,"_782":829,"_797":879,"_800":880,"_808":882,"_811":837,"_444":557,"_455":445,"_9":454,"_813":299},[831],{"_9":802,"_803":833,"_805":881},[807],{"_9":802,"_803":836},{"_20":303,"_336":744,"_780":851,"_22":304,"_24":305,"_782":852,"_797":884,"_800":885,"_808":887,"_811":860,"_444":557,"_455":463,"_9":454,"_813":307},[854],{"_9":802,"_803":856,"_805":886},[807],{"_9":802,"_803":859},[889,894,899],{"_20":291,"_336":740,"_780":815,"_22":292,"_24":293,"_782":816,"_797":890,"_800":891,"_808":893,"_811":824,"_444":557,"_455":481,"_9":480,"_825":-5},[818],{"_9":802,"_803":820,"_805":892},[807],{"_9":802,"_803":823},{"_20":299,"_336":742,"_780":839,"_22":300,"_24":301,"_782":840,"_797":895,"_800":896,"_808":898,"_811":848,"_444":557,"_455":445,"_9":480,"_825":-5},[842],{"_9":802,"_803":844,"_805":897},[807],{"_9":802,"_803":847},{"_20":307,"_336":744,"_780":862,"_22":308,"_24":309,"_782":863,"_797":900,"_800":901,"_808":903,"_811":871,"_444":557,"_455":463,"_9":480,"_825":-5},[865],{"_9":802,"_803":867,"_805":902},[807],{"_9":802,"_803":870},"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",907],"exerciseFinished",{"_910":911,"_24":912},"file","/myapp/workshop-content/exercises/09.errors/FINISHED.mdx","exercises/09.errors/FINISHED.mdx","prevStepLink",{"_915":916,"_917":918},"to","/exercise/09/03/solution","aria-label","Reset (solution)","nextStepLink",{"_915":921,"_917":755},"/exercise/10","routes/_app+/exercise+/_layout","actionData","errors"]

09. Error Boundaries/Elaboration