[{"_1":2,"_911":-5,"_912":-5},"loaderData",{"_3":4,"_547":548,"_763":764,"_910":-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","d2gswwck8fowv8o2mek3a8c2","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.5","requestInfo",{"_402":403,"_404":405,"_406":407,"_408":409,"_410":409,"_411":412,"_419":420,"_421":422,"_423":386,"_424":384},"protocol","http:","hostname","fundamentals.epicreact.dev","port","","origin","http://fundamentals.epicreact.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,466,475,484,492,501,509,513,519,526,531,536,543],{"_7":432,"_433":434,"_20":435,"_436":437},"f7bc55be219a433bc816de5628b4a9b5","avatarUrl","https://cdn.discordapp.com/avatars/1316820405436284989/4cf322d2bea8732605e60f8a6c7b20fb?size=512","Esquinte 🌌 🚀","location",{"_387":438,"_408":439,"_379":440},"📐 Pixel Perfect Tailwind","http://localhost:5639",{"_9":441,"_442":443,"_444":445},"problem","exerciseNumber",7,"stepNumber",1,{"_7":447,"_448":384,"_449":450,"_451":452,"_20":453,"_436":454},"9357d036-a09b-494e-9252-6f04d4e07018","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/1606502e666849138999bcaeb365d757?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/1606502e666849138999bcaeb365d757?size=512&default=identicon","Victor Abel Garcia Martinez",{"_387":337,"_408":439,"_379":455},{"_9":441,"_442":456,"_444":445},2,{"_7":458,"_448":384,"_449":459,"_451":460,"_20":461,"_436":462},"3bd45598-a9e6-402b-81ac-278f0722c4d2","https://www.gravatar.com/avatar/a9ff800d9267df84c60052972376e5f7?size=64&default=identicon","https://www.gravatar.com/avatar/a9ff800d9267df84c60052972376e5f7?size=512&default=identicon","Naga Divya Haridasula",{"_387":337,"_408":439,"_379":463},{"_9":464,"_442":465,"_444":445},"solution",8,{"_7":467,"_448":384,"_449":468,"_451":469,"_20":470,"_436":471},"7e603eca-c7a4-4cea-af27-efbf2359cfb0","https://www.gravatar.com/avatar/f3ce0b432e54b10b29191131ee2cc3f7?size=64&default=identicon","https://www.gravatar.com/avatar/f3ce0b432e54b10b29191131ee2cc3f7?size=512&default=identicon","Emily K Peterson",{"_387":337,"_408":439,"_379":472},{"_9":441,"_442":473,"_444":474},6,3,{"_7":476,"_448":384,"_449":477,"_451":478,"_20":479,"_436":480},"2ad3f9a0-d8e6-49c8-bf82-2b41199a1bbf","https://www.gravatar.com/avatar/3c77ed63b0adbee55a74923d76fbc818?size=64&default=identicon","https://www.gravatar.com/avatar/3c77ed63b0adbee55a74923d76fbc818?size=512&default=identicon","Tiago Benedetti",{"_387":481,"_408":482,"_379":483},"Professional Web Forms 📝","http://192.168.0.14:5639",{"_9":441,"_442":445,"_444":474},{"_7":485,"_448":384,"_449":486,"_451":487,"_20":488,"_436":489},"6103beee-2a3d-4262-8b55-b84a0d164bd6","https://www.gravatar.com/avatar/7c8e0d3f56bfe3448223781b241eb832?size=64&default=identicon","https://www.gravatar.com/avatar/7c8e0d3f56bfe3448223781b241eb832?size=512&default=identicon","Cian O’Gralaigh",{"_387":490,"_408":439,"_379":491},"React Performance ⚡",{"_442":474},{"_7":493,"_448":384,"_449":494,"_451":495,"_20":496,"_436":497},"1661039c-8124-4145-8bcf-5bbfae2c9e1d","https://www.gravatar.com/avatar/3973bbe40ab3d36aabe4f59311fa4353?size=64&default=identicon","https://www.gravatar.com/avatar/3973bbe40ab3d36aabe4f59311fa4353?size=512&default=identicon","josep arrufat vicente",{"_387":498,"_408":499,"_379":500},"React Suspense 🔀","http://192.168.5.234:5639",{"_442":473},{"_7":502,"_448":384,"_449":503,"_451":504,"_20":505,"_436":506},"a50b42ba-0139-476f-bb96-8ec8fb521af4","https://www.gravatar.com/avatar/ca7bd1f279dac444a203e27a09993394?size=64&default=identicon","https://www.gravatar.com/avatar/ca7bd1f279dac444a203e27a09993394?size=512&default=identicon","Zack Hitchcock",{"_387":337,"_408":439,"_379":507},{"_442":508},4,{"_7":510,"_436":511},"dxdun7kfsgwo4ugggp3pfqfp",{"_387":490,"_408":512},"http://performance.epicreact.dev",{"_7":514,"_448":384,"_449":515,"_451":516,"_20":-5,"_436":517},"58c31bc4-1231-4b72-a46d-329155a1de43","https://www.gravatar.com/avatar/579a745e6a4927ecb634099a1072052b?size=64&default=identicon","https://www.gravatar.com/avatar/579a745e6a4927ecb634099a1072052b?size=512&default=identicon",{"_387":337,"_408":439,"_379":518},{"_9":441,"_442":443,"_444":508},{"_7":520,"_448":384,"_449":521,"_451":522,"_20":-5,"_436":523},"231d312b-351f-4efe-9fdc-5e71ae382ac6","https://www.gravatar.com/avatar/9f63dec11dd595402bea648524586a29?size=64&default=identicon","https://www.gravatar.com/avatar/9f63dec11dd595402bea648524586a29?size=512&default=identicon",{"_387":524,"_408":439,"_379":525},"Web Authentication 🔐",{"_9":441,"_442":473,"_444":508},{"_7":527,"_436":528},"kyd0h4sd13vero80dm1vbmet",{"_387":481,"_408":529,"_379":530},"http://forms.epicweb.dev",{"_9":441,"_442":473,"_444":474},{"_7":532,"_436":533},"bafmdwfl2gsolmm3o19qhe5r",{"_387":534,"_408":439,"_379":535},"React Hooks 🎣",{"_9":441,"_442":508,"_444":474},{"_7":537,"_448":384,"_449":538,"_451":539,"_20":-5,"_436":540},"0c156f1a-4abf-4784-8f17-8086592964de","https://www.gravatar.com/avatar/ec5640cd3d84358a5a1ab6558e373b3d?size=64&default=identicon","https://www.gravatar.com/avatar/ec5640cd3d84358a5a1ab6558e373b3d?size=512&default=identicon",{"_387":337,"_408":439,"_379":541},{"_442":542},9,{"_7":544,"_436":545},"q4lxf796pcswnu3whp2aq7kn",{"_387":337,"_408":409,"_379":546},{"_442":542,"_444":-5,"_9":-5},"routes/_app+/_layout",{"_387":337,"_549":550,"_759":760,"_762":16},"exercises",[551,566,583,609,630,658,674,699,724,741],{"_442":445,"_336":552,"_553":554,"_558":559,"_562":563},"Hello World in JS","solutions",[555,556],{"_444":445,"_336":552,"_20":27},{"_444":456,"_336":557,"_20":35},"Generate the Root Node","problems",[560,561],{"_444":445,"_336":552,"_20":21},{"_444":456,"_336":557,"_20":31},"steps",[564,565],{"_444":445,"_336":552,"_20":21},{"_444":456,"_336":557,"_20":31},{"_442":456,"_336":567,"_553":568,"_558":575,"_562":579},"Raw React APIs",[569,571,573],{"_444":445,"_336":570,"_20":43},"Create React Elements",{"_444":456,"_336":572,"_20":51},"Nesting Elements",{"_444":474,"_336":574,"_20":59},"Deep Nesting Elements",[576,577,578],{"_444":445,"_336":570,"_20":39},{"_444":456,"_336":572,"_20":47},{"_444":474,"_336":574,"_20":55},[580,581,582],{"_444":445,"_336":570,"_20":39},{"_444":456,"_336":572,"_20":47},{"_444":474,"_336":574,"_20":55},{"_442":474,"_336":584,"_553":585,"_558":597,"_562":603},"Using JSX",[586,588,590,592,594],{"_444":445,"_336":587,"_20":67},"Compiling JSX",{"_444":456,"_336":589,"_20":75},"Interpolation",{"_444":474,"_336":591,"_20":83},"Spread props",{"_444":508,"_336":593,"_20":91},"Nesting JSX",{"_444":595,"_336":596,"_20":99},5,"Fragments",[598,599,600,601,602],{"_444":445,"_336":587,"_20":63},{"_444":456,"_336":589,"_20":71},{"_444":474,"_336":591,"_20":79},{"_444":508,"_336":593,"_20":87},{"_444":595,"_336":596,"_20":95},[604,605,606,607,608],{"_444":445,"_336":587,"_20":63},{"_444":456,"_336":589,"_20":71},{"_444":474,"_336":591,"_20":79},{"_444":508,"_336":593,"_20":87},{"_444":595,"_336":596,"_20":95},{"_442":508,"_336":610,"_553":611,"_558":620,"_562":625},"Custom Components",[612,614,616,618],{"_444":445,"_336":613,"_20":107},"Simple Function",{"_444":456,"_336":615,"_20":115},"Raw API",{"_444":474,"_336":617,"_20":123},"JSX Components",{"_444":508,"_336":619,"_20":131},"Props",[621,622,623,624],{"_444":445,"_336":613,"_20":103},{"_444":456,"_336":615,"_20":111},{"_444":474,"_336":617,"_20":119},{"_444":508,"_336":619,"_20":127},[626,627,628,629],{"_444":445,"_336":613,"_20":103},{"_444":456,"_336":615,"_20":111},{"_444":474,"_336":617,"_20":119},{"_444":508,"_336":619,"_20":127},{"_442":595,"_336":631,"_553":632,"_558":644,"_562":651},"TypeScript",[633,634,636,638,640,642],{"_444":445,"_336":619,"_20":139},{"_444":456,"_336":635,"_20":147},"Narrow Types",{"_444":474,"_336":637,"_20":155},"Derive Types",{"_444":508,"_336":639,"_20":163},"Default Props",{"_444":595,"_336":641,"_20":171},"Reduce Duplication",{"_444":473,"_336":643,"_20":179},"Satisfies",[645,646,647,648,649,650],{"_444":445,"_336":619,"_20":135},{"_444":456,"_336":635,"_20":143},{"_444":474,"_336":637,"_20":151},{"_444":508,"_336":639,"_20":159},{"_444":595,"_336":641,"_20":167},{"_444":473,"_336":643,"_20":175},[652,653,654,655,656,657],{"_444":445,"_336":619,"_20":135},{"_444":456,"_336":635,"_20":143},{"_444":474,"_336":637,"_20":151},{"_444":508,"_336":639,"_20":159},{"_444":595,"_336":641,"_20":167},{"_444":473,"_336":643,"_20":175},{"_442":473,"_336":659,"_553":660,"_558":666,"_562":670},"Styling",[661,662,664],{"_444":445,"_336":659,"_20":187},{"_444":456,"_336":663,"_20":195},"Custom Component",{"_444":474,"_336":665,"_20":203},"Size Prop",[667,668,669],{"_444":445,"_336":659,"_20":183},{"_444":456,"_336":663,"_20":191},{"_444":474,"_336":665,"_20":199},[671,672,673],{"_444":445,"_336":659,"_20":183},{"_444":456,"_336":663,"_20":191},{"_444":474,"_336":665,"_20":199},{"_442":443,"_336":675,"_553":676,"_558":687,"_562":693},"Forms",[677,679,681,683,685],{"_444":445,"_336":678,"_20":211},"Form",{"_444":456,"_336":680,"_20":219},"Form Action",{"_444":474,"_336":682,"_20":227},"Input Types",{"_444":508,"_336":684,"_20":235},"Submission",{"_444":595,"_336":686,"_20":243},"Form Actions",[688,689,690,691,692],{"_444":445,"_336":678,"_20":207},{"_444":456,"_336":680,"_20":215},{"_444":474,"_336":682,"_20":223},{"_444":508,"_336":684,"_20":231},{"_444":595,"_336":686,"_20":239},[694,695,696,697,698],{"_444":445,"_336":678,"_20":207},{"_444":456,"_336":680,"_20":215},{"_444":474,"_336":682,"_20":223},{"_444":508,"_336":684,"_20":231},{"_444":595,"_336":686,"_20":239},{"_442":465,"_336":700,"_553":701,"_558":712,"_562":718},"Inputs",[702,704,706,708,710],{"_444":445,"_336":703,"_20":251},"Checkbox",{"_444":456,"_336":705,"_20":259},"Select",{"_444":474,"_336":707,"_20":267},"Radios",{"_444":508,"_336":709,"_20":275},"Hidden Inputs",{"_444":595,"_336":711,"_20":283},"Default Value",[713,714,715,716,717],{"_444":445,"_336":703,"_20":247},{"_444":456,"_336":705,"_20":255},{"_444":474,"_336":707,"_20":263},{"_444":508,"_336":709,"_20":271},{"_444":595,"_336":711,"_20":279},[719,720,721,722,723],{"_444":445,"_336":703,"_20":247},{"_444":456,"_336":705,"_20":255},{"_444":474,"_336":707,"_20":263},{"_444":508,"_336":709,"_20":271},{"_444":595,"_336":711,"_20":279},{"_442":542,"_336":725,"_553":726,"_558":733,"_562":737},"Error Boundaries",[727,729,731],{"_444":445,"_336":728,"_20":291},"Composition",{"_444":456,"_336":730,"_20":299},"Other Errors",{"_444":474,"_336":732,"_20":307},"Reset",[734,735,736],{"_444":445,"_336":728,"_20":287},{"_444":456,"_336":730,"_20":295},{"_444":474,"_336":732,"_20":303},[738,739,740],{"_444":445,"_336":728,"_20":287},{"_444":456,"_336":730,"_20":295},{"_444":474,"_336":732,"_20":303},{"_442":742,"_336":743,"_553":744,"_558":751,"_562":755},10,"Rendering Arrays",[745,747,749],{"_444":445,"_336":746,"_20":315},"Key prop",{"_444":456,"_336":748,"_20":323},"Focus State",{"_444":474,"_336":750,"_20":331},"Key Reset",[752,753,754],{"_444":445,"_336":746,"_20":311},{"_444":456,"_336":748,"_20":319},{"_444":474,"_336":750,"_20":327},[756,757,758],{"_444":445,"_336":746,"_20":311},{"_444":456,"_336":748,"_20":319},{"_444":474,"_336":750,"_20":327},"playground",{"_761":-5,"_442":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_765":766,"_387":337,"_379":767,"_892":893,"_894":895,"_896":897,"_901":902,"_907":908},"articleId","workshop-react-fundamentals-9-finished",{"_442":542,"_768":769,"_336":725,"_770":771,"_772":773,"_774":775,"_777":778,"_562":780,"_558":860,"_553":876},"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",[776],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-error-boundaries","finishedEpicVideoEmbeds",[779],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-error-boundaries",[781,814,837],{"_444":445,"_441":782,"_464":802},{"_20":287,"_336":728,"_768":783,"_22":288,"_24":289,"_770":784,"_785":786,"_788":789,"_796":797,"_799":800,"_442":542,"_444":445,"_9":441,"_801":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",[787],"https://www.epicreact.dev/workshops/react-fundamentals/composition","test",{"_9":790,"_791":792,"_793":794},"browser","pathname","/app/09.01.problem/test/","testFiles",[795],"error-boundary.test.ts","dev",{"_9":790,"_791":798},"/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":728,"_768":803,"_22":292,"_24":293,"_770":804,"_785":805,"_788":807,"_796":810,"_799":812,"_442":542,"_444":445,"_9":464,"_813":-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;",[806],"https://www.epicreact.dev/workshops/react-fundamentals/composition/solution",{"_9":790,"_791":808,"_793":809},"/app/09.01.solution/test/",[795],{"_9":790,"_791":811},"/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",{"_444":456,"_441":815,"_464":826},{"_20":295,"_336":730,"_768":816,"_22":296,"_24":297,"_770":817,"_785":818,"_788":820,"_796":823,"_799":825,"_442":542,"_444":456,"_9":441,"_801":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;",[819],"https://www.epicreact.dev/workshops/react-fundamentals/other-errors",{"_9":790,"_791":821,"_793":822},"/app/09.02.problem/test/",[795],{"_9":790,"_791":824},"/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":730,"_768":827,"_22":300,"_24":301,"_770":828,"_785":829,"_788":831,"_796":834,"_799":836,"_442":542,"_444":456,"_9":464,"_813":-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;",[830],"https://www.epicreact.dev/workshops/react-fundamentals/other-errors/solution",{"_9":790,"_791":832,"_793":833},"/app/09.02.solution/test/",[795],{"_9":790,"_791":835},"/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",{"_444":474,"_441":838,"_464":849},{"_20":303,"_336":732,"_768":839,"_22":304,"_24":305,"_770":840,"_785":841,"_788":843,"_796":846,"_799":848,"_442":542,"_444":474,"_9":441,"_801":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;",[842],"https://www.epicreact.dev/workshops/react-fundamentals/reset",{"_9":790,"_791":844,"_793":845},"/app/09.03.problem/test/",[795],{"_9":790,"_791":847},"/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":732,"_768":850,"_22":308,"_24":309,"_770":851,"_785":852,"_788":854,"_796":857,"_799":859,"_442":542,"_444":474,"_9":464,"_813":-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;",[853],"https://www.epicreact.dev/workshops/react-fundamentals/reset/solution",{"_9":790,"_791":855,"_793":856},"/app/09.03.solution/test/",[795],{"_9":790,"_791":858},"/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",[861,866,871],{"_20":287,"_336":728,"_768":783,"_22":288,"_24":289,"_770":784,"_785":862,"_788":863,"_796":865,"_799":800,"_442":542,"_444":445,"_9":441,"_801":291},[787],{"_9":790,"_791":792,"_793":864},[795],{"_9":790,"_791":798},{"_20":295,"_336":730,"_768":816,"_22":296,"_24":297,"_770":817,"_785":867,"_788":868,"_796":870,"_799":825,"_442":542,"_444":456,"_9":441,"_801":299},[819],{"_9":790,"_791":821,"_793":869},[795],{"_9":790,"_791":824},{"_20":303,"_336":732,"_768":839,"_22":304,"_24":305,"_770":840,"_785":872,"_788":873,"_796":875,"_799":848,"_442":542,"_444":474,"_9":441,"_801":307},[842],{"_9":790,"_791":844,"_793":874},[795],{"_9":790,"_791":847},[877,882,887],{"_20":291,"_336":728,"_768":803,"_22":292,"_24":293,"_770":804,"_785":878,"_788":879,"_796":881,"_799":812,"_442":542,"_444":445,"_9":464,"_813":-5},[806],{"_9":790,"_791":808,"_793":880},[795],{"_9":790,"_791":811},{"_20":299,"_336":730,"_768":827,"_22":300,"_24":301,"_770":828,"_785":883,"_788":884,"_796":886,"_799":836,"_442":542,"_444":456,"_9":464,"_813":-5},[830],{"_9":790,"_791":832,"_793":885},[795],{"_9":790,"_791":835},{"_20":307,"_336":732,"_768":850,"_22":308,"_24":309,"_770":851,"_785":888,"_788":889,"_796":891,"_799":859,"_442":542,"_444":474,"_9":464,"_813":-5},[853],{"_9":790,"_791":855,"_793":890},[795],{"_9":790,"_791":858},"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",895],"exerciseFinished",{"_898":899,"_24":900},"file","/myapp/workshop-content/exercises/09.errors/FINISHED.mdx","exercises/09.errors/FINISHED.mdx","prevStepLink",{"_903":904,"_905":906},"to","/exercise/09/03/solution","aria-label","Reset (solution)","nextStepLink",{"_903":909,"_905":743},"/exercise/10","routes/_app+/exercise+/_layout","actionData","errors"]

09. Error Boundaries/Elaboration