[{"_1":2,"_957":-5,"_958":-5},"loaderData",{"_3":4,"_513":514,"_809":810},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_334":335,"_337":338,"_339":16,"_340":341,"_398":343,"_399":345,"_346":347,"_400":401,"_422":423,"_447":-5,"_448":-5,"_449":450},"userId",{"_7":8,"_9":10},"id","6421b4d1-fdff-447f-8ff3-df29f05430cd","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","repoUpdates",{"_336":16},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_342":343,"_344":345,"_346":347,"_353":354,"_371":372,"_374":375,"_376":377,"_378":379,"_382":383,"_388":389,"_392":393,"_394":395,"_396":397},"title","React Fundamentals ⚛","subtitle","Learn the foundational concepts necessary for building React applications and libraries","instructor",{"_20":348,"_349":350,"_351":352},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-fundamentals","discordChannelId","1285244676286189569","discordTags",[369,370],"1285246046498328627","1285245484432228375","onboardingVideo",[373],"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",{"_380":381},"view","editor","forms",{"_384":385,"_386":387},"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",{"_390":391},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_402":403,"_404":405,"_406":407,"_408":375,"_409":377,"_410":391,"_411":412,"_413":414,"_415":416,"_417":391,"_418":419,"_420":421},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_WORKSHOP_INSTANCE_ID","4e1570b81d1baf3d16bd3a08ece570cb","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","6.41.3","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","657fd7e1b6cc9871fdd8ef86e2f7137edd10552023565164ae9adc480a8eed4c","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_424":425,"_426":427,"_428":429,"_430":431,"_432":431,"_433":434,"_441":442,"_443":444,"_445":393,"_446":391},"protocol","http:","hostname","fundamentals.epicreact.dev","port","","origin","http://fundamentals.epicreact.dev","domain","hints",{"_435":436,"_437":438,"_439":440},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/09/finished","session",{"_435":-5},"separator","online","toast","confettiId","presence",{"_451":452},"users",[453,471,480,490,498,502,505,508],{"_7":454,"_455":391,"_456":457,"_458":459,"_20":460,"_461":462},"7295df03-4602-4f97-884b-7ee60687c2c6","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/fc99d1b5fb80166c37a8d73188f9acd0?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/fc99d1b5fb80166c37a8d73188f9acd0?size=512&default=identicon","Trista Mueller","location",{"_398":463,"_430":464,"_386":465},"React Router Fundamentals part 1 ⛓️","http://localhost:5639",{"_9":466,"_467":468,"_469":470},"problem","exerciseNumber",3,"stepNumber",1,{"_7":472,"_455":391,"_456":473,"_458":474,"_20":475,"_461":476},"70078aa1-7b41-40f4-9930-79013303627b","https://avatars.githubusercontent.com/u/4356894?v=4&size=64","https://avatars.githubusercontent.com/u/4356894?v=4&size=512","Thor Anderson",{"_398":477,"_430":464,"_386":478},"MCP Fundamentals 🧱",{"_9":466,"_467":479,"_469":468},2,{"_7":481,"_455":391,"_456":482,"_458":483,"_20":484,"_461":485},"2bfa0b8e-494e-4e0d-896b-3befde27dc4f","https://www.gravatar.com/avatar/06d4bf3ae925cce17be2699cc6241cc3?size=64&default=identicon","https://www.gravatar.com/avatar/06d4bf3ae925cce17be2699cc6241cc3?size=512&default=identicon","Ryo",{"_398":486,"_430":464,"_386":487},"Web Authentication 🔐",{"_9":488,"_467":489,"_469":470},"solution",7,{"_7":491,"_455":391,"_456":492,"_458":493,"_20":494,"_461":495},"d2ccce33-aad2-4704-a53b-f7b0c5a738d5","https://cdn.discordapp.com/avatars/278339773159178242/10344d969235e6c14432ff9be06d4b31.png?size=64","https://cdn.discordapp.com/avatars/278339773159178242/10344d969235e6c14432ff9be06d4b31.png?size=512","Alexander Danowicz",{"_398":343,"_430":464,"_386":496},{"_9":466,"_467":497,"_469":479},4,{"_7":499,"_461":500},"iezx7c4dnunv8i764pftunuc",{"_398":343,"_430":431,"_386":501},{"_467":470},{"_7":503,"_461":504},"cc02bf6e-549e-4088-a4d2-78574a1bd687",{"_398":463,"_430":464},{"_7":506,"_461":507},"fs6zhs8wen5f3epayo2brsft",{"_398":343,"_430":464},{"_7":509,"_461":510},"9744190c-4b2d-4ec3-a30d-87ffdb8132b7",{"_398":343,"_430":431,"_386":511},{"_467":512,"_469":-5,"_9":-5},9,"routes/_app+/_layout",{"_398":343,"_515":516,"_805":806,"_808":16},"exercises",[517,536,559,595,624,665,687,722,758,781],{"_467":470,"_342":518,"_519":520,"_524":525,"_528":529},"Hello World in JS","solutions",[521,522],{"_469":470,"_342":518,"_20":27},{"_469":479,"_342":523,"_20":35},"Generate the Root Node","problems",[526,527],{"_469":470,"_342":518,"_20":21},{"_469":479,"_342":523,"_20":31},"steps",[530,533],{"_469":470,"_342":518,"_20":21,"_466":531,"_488":532},{"_20":21,"_342":518},{"_20":27,"_342":518},{"_469":479,"_342":523,"_20":31,"_466":534,"_488":535},{"_20":31,"_342":523},{"_20":35,"_342":523},{"_467":479,"_342":537,"_519":538,"_524":545,"_528":549},"Raw React APIs",[539,541,543],{"_469":470,"_342":540,"_20":43},"Create React Elements",{"_469":479,"_342":542,"_20":51},"Nesting Elements",{"_469":468,"_342":544,"_20":59},"Deep Nesting Elements",[546,547,548],{"_469":470,"_342":540,"_20":39},{"_469":479,"_342":542,"_20":47},{"_469":468,"_342":544,"_20":55},[550,553,556],{"_469":470,"_342":540,"_20":39,"_466":551,"_488":552},{"_20":39,"_342":540},{"_20":43,"_342":540},{"_469":479,"_342":542,"_20":47,"_466":554,"_488":555},{"_20":47,"_342":542},{"_20":51,"_342":542},{"_469":468,"_342":544,"_20":55,"_466":557,"_488":558},{"_20":55,"_342":544},{"_20":59,"_342":544},{"_467":468,"_342":560,"_519":561,"_524":573,"_528":579},"Using JSX",[562,564,566,568,570],{"_469":470,"_342":563,"_20":67},"Compiling JSX",{"_469":479,"_342":565,"_20":75},"Interpolation",{"_469":468,"_342":567,"_20":83},"Spread props",{"_469":497,"_342":569,"_20":91},"Nesting JSX",{"_469":571,"_342":572,"_20":99},5,"Fragments",[574,575,576,577,578],{"_469":470,"_342":563,"_20":63},{"_469":479,"_342":565,"_20":71},{"_469":468,"_342":567,"_20":79},{"_469":497,"_342":569,"_20":87},{"_469":571,"_342":572,"_20":95},[580,583,586,589,592],{"_469":470,"_342":563,"_20":63,"_466":581,"_488":582},{"_20":63,"_342":563},{"_20":67,"_342":563},{"_469":479,"_342":565,"_20":71,"_466":584,"_488":585},{"_20":71,"_342":565},{"_20":75,"_342":565},{"_469":468,"_342":567,"_20":79,"_466":587,"_488":588},{"_20":79,"_342":567},{"_20":83,"_342":567},{"_469":497,"_342":569,"_20":87,"_466":590,"_488":591},{"_20":87,"_342":569},{"_20":91,"_342":569},{"_469":571,"_342":572,"_20":95,"_466":593,"_488":594},{"_20":95,"_342":572},{"_20":99,"_342":572},{"_467":497,"_342":596,"_519":597,"_524":606,"_528":611},"Custom Components",[598,600,602,604],{"_469":470,"_342":599,"_20":107},"Simple Function",{"_469":479,"_342":601,"_20":115},"Raw API",{"_469":468,"_342":603,"_20":123},"JSX Components",{"_469":497,"_342":605,"_20":131},"Props",[607,608,609,610],{"_469":470,"_342":599,"_20":103},{"_469":479,"_342":601,"_20":111},{"_469":468,"_342":603,"_20":119},{"_469":497,"_342":605,"_20":127},[612,615,618,621],{"_469":470,"_342":599,"_20":103,"_466":613,"_488":614},{"_20":103,"_342":599},{"_20":107,"_342":599},{"_469":479,"_342":601,"_20":111,"_466":616,"_488":617},{"_20":111,"_342":601},{"_20":115,"_342":601},{"_469":468,"_342":603,"_20":119,"_466":619,"_488":620},{"_20":119,"_342":603},{"_20":123,"_342":603},{"_469":497,"_342":605,"_20":127,"_466":622,"_488":623},{"_20":127,"_342":605},{"_20":131,"_342":605},{"_467":571,"_342":625,"_519":626,"_524":639,"_528":646},"TypeScript",[627,628,630,632,634,636],{"_469":470,"_342":605,"_20":139},{"_469":479,"_342":629,"_20":147},"Narrow Types",{"_469":468,"_342":631,"_20":155},"Derive Types",{"_469":497,"_342":633,"_20":163},"Default Props",{"_469":571,"_342":635,"_20":171},"Reduce Duplication",{"_469":637,"_342":638,"_20":179},6,"Satisfies",[640,641,642,643,644,645],{"_469":470,"_342":605,"_20":135},{"_469":479,"_342":629,"_20":143},{"_469":468,"_342":631,"_20":151},{"_469":497,"_342":633,"_20":159},{"_469":571,"_342":635,"_20":167},{"_469":637,"_342":638,"_20":175},[647,650,653,656,659,662],{"_469":470,"_342":605,"_20":135,"_466":648,"_488":649},{"_20":135,"_342":605},{"_20":139,"_342":605},{"_469":479,"_342":629,"_20":143,"_466":651,"_488":652},{"_20":143,"_342":629},{"_20":147,"_342":629},{"_469":468,"_342":631,"_20":151,"_466":654,"_488":655},{"_20":151,"_342":631},{"_20":155,"_342":631},{"_469":497,"_342":633,"_20":159,"_466":657,"_488":658},{"_20":159,"_342":633},{"_20":163,"_342":633},{"_469":571,"_342":635,"_20":167,"_466":660,"_488":661},{"_20":167,"_342":635},{"_20":171,"_342":635},{"_469":637,"_342":638,"_20":175,"_466":663,"_488":664},{"_20":175,"_342":638},{"_20":179,"_342":638},{"_467":637,"_342":666,"_519":667,"_524":673,"_528":677},"Styling",[668,669,671],{"_469":470,"_342":666,"_20":187},{"_469":479,"_342":670,"_20":195},"Custom Component",{"_469":468,"_342":672,"_20":203},"Size Prop",[674,675,676],{"_469":470,"_342":666,"_20":183},{"_469":479,"_342":670,"_20":191},{"_469":468,"_342":672,"_20":199},[678,681,684],{"_469":470,"_342":666,"_20":183,"_466":679,"_488":680},{"_20":183,"_342":666},{"_20":187,"_342":666},{"_469":479,"_342":670,"_20":191,"_466":682,"_488":683},{"_20":191,"_342":670},{"_20":195,"_342":670},{"_469":468,"_342":672,"_20":199,"_466":685,"_488":686},{"_20":199,"_342":672},{"_20":203,"_342":672},{"_467":489,"_342":688,"_519":689,"_524":700,"_528":706},"Forms",[690,692,694,696,698],{"_469":470,"_342":691,"_20":211},"Form",{"_469":479,"_342":693,"_20":219},"Form Action",{"_469":468,"_342":695,"_20":227},"Input Types",{"_469":497,"_342":697,"_20":235},"Submission",{"_469":571,"_342":699,"_20":243},"Form Actions",[701,702,703,704,705],{"_469":470,"_342":691,"_20":207},{"_469":479,"_342":693,"_20":215},{"_469":468,"_342":695,"_20":223},{"_469":497,"_342":697,"_20":231},{"_469":571,"_342":699,"_20":239},[707,710,713,716,719],{"_469":470,"_342":691,"_20":207,"_466":708,"_488":709},{"_20":207,"_342":691},{"_20":211,"_342":691},{"_469":479,"_342":693,"_20":215,"_466":711,"_488":712},{"_20":215,"_342":693},{"_20":219,"_342":693},{"_469":468,"_342":695,"_20":223,"_466":714,"_488":715},{"_20":223,"_342":695},{"_20":227,"_342":695},{"_469":497,"_342":697,"_20":231,"_466":717,"_488":718},{"_20":231,"_342":697},{"_20":235,"_342":697},{"_469":571,"_342":699,"_20":239,"_466":720,"_488":721},{"_20":239,"_342":699},{"_20":243,"_342":699},{"_467":723,"_342":724,"_519":725,"_524":736,"_528":742},8,"Inputs",[726,728,730,732,734],{"_469":470,"_342":727,"_20":251},"Checkbox",{"_469":479,"_342":729,"_20":259},"Select",{"_469":468,"_342":731,"_20":267},"Radios",{"_469":497,"_342":733,"_20":275},"Hidden Inputs",{"_469":571,"_342":735,"_20":283},"Default Value",[737,738,739,740,741],{"_469":470,"_342":727,"_20":247},{"_469":479,"_342":729,"_20":255},{"_469":468,"_342":731,"_20":263},{"_469":497,"_342":733,"_20":271},{"_469":571,"_342":735,"_20":279},[743,746,749,752,755],{"_469":470,"_342":727,"_20":247,"_466":744,"_488":745},{"_20":247,"_342":727},{"_20":251,"_342":727},{"_469":479,"_342":729,"_20":255,"_466":747,"_488":748},{"_20":255,"_342":729},{"_20":259,"_342":729},{"_469":468,"_342":731,"_20":263,"_466":750,"_488":751},{"_20":263,"_342":731},{"_20":267,"_342":731},{"_469":497,"_342":733,"_20":271,"_466":753,"_488":754},{"_20":271,"_342":733},{"_20":275,"_342":733},{"_469":571,"_342":735,"_20":279,"_466":756,"_488":757},{"_20":279,"_342":735},{"_20":283,"_342":735},{"_467":512,"_342":759,"_519":760,"_524":767,"_528":771},"Error Boundaries",[761,763,765],{"_469":470,"_342":762,"_20":291},"Composition",{"_469":479,"_342":764,"_20":299},"Other Errors",{"_469":468,"_342":766,"_20":307},"Reset",[768,769,770],{"_469":470,"_342":762,"_20":287},{"_469":479,"_342":764,"_20":295},{"_469":468,"_342":766,"_20":303},[772,775,778],{"_469":470,"_342":762,"_20":287,"_466":773,"_488":774},{"_20":287,"_342":762},{"_20":291,"_342":762},{"_469":479,"_342":764,"_20":295,"_466":776,"_488":777},{"_20":295,"_342":764},{"_20":299,"_342":764},{"_469":468,"_342":766,"_20":303,"_466":779,"_488":780},{"_20":303,"_342":766},{"_20":307,"_342":766},{"_467":782,"_342":783,"_519":784,"_524":791,"_528":795},10,"Rendering Arrays",[785,787,789],{"_469":470,"_342":786,"_20":315},"Key prop",{"_469":479,"_342":788,"_20":323},"Focus State",{"_469":468,"_342":790,"_20":331},"Key Reset",[792,793,794],{"_469":470,"_342":786,"_20":311},{"_469":479,"_342":788,"_20":319},{"_469":468,"_342":790,"_20":327},[796,799,802],{"_469":470,"_342":786,"_20":311,"_466":797,"_488":798},{"_20":311,"_342":786},{"_20":315,"_342":786},{"_469":479,"_342":788,"_20":319,"_466":800,"_488":801},{"_20":319,"_342":788},{"_20":323,"_342":788},{"_469":468,"_342":790,"_20":327,"_466":803,"_488":804},{"_20":327,"_342":790},{"_20":331,"_342":790},"playground",{"_807":-5,"_467":-2,"_469":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_811":812,"_398":343,"_386":813,"_939":940,"_941":942,"_943":944,"_948":949,"_954":955},"articleId","workshop-react-fundamentals-9-finished",{"_22":814,"_467":512,"_815":816,"_342":759,"_817":818,"_819":820,"_821":822,"_824":825,"_528":827,"_524":907,"_519":923},"/myapp/workshop-content/exercises/09.errors","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, then\nyou'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",[823],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-error-boundaries","finishedEpicVideoEmbeds",[826],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-error-boundaries",[828,861,884],{"_469":470,"_466":829,"_488":849},{"_20":287,"_342":762,"_815":830,"_22":288,"_24":289,"_817":831,"_832":833,"_835":836,"_843":844,"_846":847,"_467":512,"_469":470,"_9":466,"_848":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",[834],"https://www.epicreact.dev/workshops/react-fundamentals/composition","test",{"_9":837,"_838":839,"_840":841},"browser","pathname","/app/09.01.problem/test/","testFiles",[842],"error-boundary.test.ts","dev",{"_9":837,"_838":845},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":291,"_342":762,"_815":850,"_22":292,"_24":293,"_817":851,"_832":852,"_835":854,"_843":857,"_846":859,"_467":512,"_469":470,"_9":488,"_860":-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;",[853],"https://www.epicreact.dev/workshops/react-fundamentals/composition/solution",{"_9":837,"_838":855,"_840":856},"/app/09.01.solution/test/",[842],{"_9":837,"_838":858},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",{"_469":479,"_466":862,"_488":873},{"_20":295,"_342":764,"_815":863,"_22":296,"_24":297,"_817":864,"_832":865,"_835":867,"_843":870,"_846":872,"_467":512,"_469":479,"_9":466,"_848":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;",[866],"https://www.epicreact.dev/workshops/react-fundamentals/other-errors",{"_9":837,"_838":868,"_840":869},"/app/09.02.problem/test/",[842],{"_9":837,"_838":871},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":299,"_342":764,"_815":874,"_22":300,"_24":301,"_817":875,"_832":876,"_835":878,"_843":881,"_846":883,"_467":512,"_469":479,"_9":488,"_860":-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;",[877],"https://www.epicreact.dev/workshops/react-fundamentals/other-errors/solution",{"_9":837,"_838":879,"_840":880},"/app/09.02.solution/test/",[842],{"_9":837,"_838":882},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_469":468,"_466":885,"_488":896},{"_20":303,"_342":766,"_815":886,"_22":304,"_24":305,"_817":887,"_832":888,"_835":890,"_843":893,"_846":895,"_467":512,"_469":468,"_9":466,"_848":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;",[889],"https://www.epicreact.dev/workshops/react-fundamentals/reset",{"_9":837,"_838":891,"_840":892},"/app/09.03.problem/test/",[842],{"_9":837,"_838":894},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":307,"_342":766,"_815":897,"_22":308,"_24":309,"_817":898,"_832":899,"_835":901,"_843":904,"_846":906,"_467":512,"_469":468,"_9":488,"_860":-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;",[900],"https://www.epicreact.dev/workshops/react-fundamentals/reset/solution",{"_9":837,"_838":902,"_840":903},"/app/09.03.solution/test/",[842],{"_9":837,"_838":905},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",[908,913,918],{"_20":287,"_342":762,"_815":830,"_22":288,"_24":289,"_817":831,"_832":909,"_835":910,"_843":912,"_846":847,"_467":512,"_469":470,"_9":466,"_848":291},[834],{"_9":837,"_838":839,"_840":911},[842],{"_9":837,"_838":845},{"_20":295,"_342":764,"_815":863,"_22":296,"_24":297,"_817":864,"_832":914,"_835":915,"_843":917,"_846":872,"_467":512,"_469":479,"_9":466,"_848":299},[866],{"_9":837,"_838":868,"_840":916},[842],{"_9":837,"_838":871},{"_20":303,"_342":766,"_815":886,"_22":304,"_24":305,"_817":887,"_832":919,"_835":920,"_843":922,"_846":895,"_467":512,"_469":468,"_9":466,"_848":307},[889],{"_9":837,"_838":891,"_840":921},[842],{"_9":837,"_838":894},[924,929,934],{"_20":291,"_342":762,"_815":850,"_22":292,"_24":293,"_817":851,"_832":925,"_835":926,"_843":928,"_846":859,"_467":512,"_469":470,"_9":488,"_860":-5},[853],{"_9":837,"_838":855,"_840":927},[842],{"_9":837,"_838":858},{"_20":299,"_342":764,"_815":874,"_22":300,"_24":301,"_817":875,"_832":930,"_835":931,"_843":933,"_846":883,"_467":512,"_469":479,"_9":488,"_860":-5},[877],{"_9":837,"_838":879,"_840":932},[842],{"_9":837,"_838":882},{"_20":307,"_342":766,"_815":897,"_22":308,"_24":309,"_817":898,"_832":935,"_835":936,"_843":938,"_846":906,"_467":512,"_469":468,"_9":488,"_860":-5},[900],{"_9":837,"_838":902,"_840":937},[842],{"_9":837,"_838":905},"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",942],"exerciseFinished",{"_945":946,"_24":947},"file","/myapp/workshop-content/exercises/09.errors/FINISHED.mdx","exercises/09.errors/FINISHED.mdx","prevStepLink",{"_950":951,"_952":953},"to","/exercise/09/03/solution","aria-label","Reset (solution)","nextStepLink",{"_950":956,"_952":783},"/exercise/10","actionData","errors"]

09. Error Boundaries/Elaboration