[{"_1":2,"_980":-5,"_981":-5},"loaderData",{"_3":4,"_537":538,"_832":833},"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","d7230f6e-b85c-49bd-bed9-9f03977e8dd1","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","epicweb-dev-react-fundamentals.fly.dev","port","","origin","http://epicweb-dev-react-fundamentals.fly.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,481,491,498,506,514,522,526,532],{"_7":454,"_455":391,"_456":457,"_458":459,"_20":460,"_461":462},"160596b4-0933-4730-9916-f6200ae6550b","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/7fb663ce6881037e9bf34a5b8cf29f40?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/7fb663ce6881037e9bf34a5b8cf29f40?size=512&default=identicon","Dimi Beglov","location",{"_398":463,"_430":464,"_386":465},"React Performance ⚡","http://localhost:5639",{"_9":466,"_467":468,"_469":470},"problem","exerciseNumber",5,"stepNumber",3,{"_7":472,"_455":391,"_456":473,"_458":474,"_20":475,"_461":476},"c218e177-2cfd-4b23-8572-22d9ea3d59c4","https://www.gravatar.com/avatar/2b9b16c999dc7597afae521e6c310ba0?size=64&default=identicon","https://www.gravatar.com/avatar/2b9b16c999dc7597afae521e6c310ba0?size=512&default=identicon","KaydenD",{"_398":343,"_430":477,"_386":478},"http://192.168.2.52:5639",{"_9":466,"_467":479,"_469":480},10,1,{"_7":482,"_455":391,"_456":483,"_458":484,"_20":485,"_461":486},"e674136d-2308-4f63-88fc-baebe8be65c0","https://www.gravatar.com/avatar/3d8a7f810b6ef7d425c2df44d85744a6?size=64&default=identicon","https://www.gravatar.com/avatar/3d8a7f810b6ef7d425c2df44d85744a6?size=512&default=identicon","Chegu Manikanta Kumar",{"_398":487,"_430":464,"_386":488},"React Hooks 🎣",{"_9":489,"_467":490,"_469":480},"solution",4,{"_7":492,"_455":16,"_456":493,"_458":494,"_20":495,"_461":496},"1ad1b92b-086a-4e6b-acaf-03f4c99809f7","https://www.gravatar.com/avatar/203d22c3c43fd6ae92b7c38f6ea7cbd5?size=64&default=identicon","https://www.gravatar.com/avatar/203d22c3c43fd6ae92b7c38f6ea7cbd5?size=512&default=identicon","Martyniuk",{"_398":487,"_430":464,"_386":497},{"_467":490},{"_7":499,"_455":391,"_456":500,"_458":501,"_20":502,"_461":503},"0b626446-fa29-48fd-9ad7-f507f244cc77","https://www.gravatar.com/avatar/1c03251ca68332583a0d19603a745107?size=64&default=identicon","https://www.gravatar.com/avatar/1c03251ca68332583a0d19603a745107?size=512&default=identicon","Yuliia Sokolova",{"_398":504,"_430":464,"_386":505},"React Suspense 🔀",{"_9":466,"_467":480,"_469":480},{"_7":507,"_455":391,"_456":508,"_458":509,"_20":510,"_461":511},"8a12de8e-55ec-489c-8319-754106400027","https://www.gravatar.com/avatar/80b411be841aa828192edea55151e06e?size=64&default=identicon","https://www.gravatar.com/avatar/80b411be841aa828192edea55151e06e?size=512&default=identicon","Florian Flechsig",{"_398":343,"_430":464,"_386":512},{"_9":489,"_467":490,"_469":513},2,{"_7":515,"_455":391,"_456":516,"_458":517,"_20":518,"_461":519},"5dcceac3-781b-419b-86d0-1189f5acd260","https://avatars.githubusercontent.com/u/16737095?v=4&size=64","https://avatars.githubusercontent.com/u/16737095?v=4&size=512","David Barbosa Maia",{"_398":520,"_430":464,"_386":521},"React Server Components 🤹",{"_467":513},{"_7":523,"_461":524},"0e1c8ced-885d-4611-935d-5154bf580276",{"_398":525,"_430":464},"MCP Fundamentals 🧱",{"_7":527,"_455":391,"_456":528,"_458":529,"_20":-5,"_461":530},"379805bb-33fd-4f62-8d72-daea83d41a93","https://www.gravatar.com/avatar/9754a1e2af32c1a4ef1ed9bfcddbfc34?size=64&default=identicon","https://www.gravatar.com/avatar/9754a1e2af32c1a4ef1ed9bfcddbfc34?size=512&default=identicon",{"_398":343,"_430":464,"_386":531},{"_9":489,"_467":470,"_469":468},{"_7":533,"_461":534},"8c0823c7-2c94-4972-a115-053afa85338f",{"_398":343,"_430":431,"_386":535},{"_467":536,"_469":-5,"_9":-5},9,"routes/_app+/_layout",{"_398":343,"_539":540,"_828":829,"_831":16},"exercises",[541,560,583,618,647,688,710,746,782,805],{"_467":480,"_342":542,"_543":544,"_548":549,"_552":553},"Hello World in JS","solutions",[545,546],{"_469":480,"_342":542,"_20":27},{"_469":513,"_342":547,"_20":35},"Generate the Root Node","problems",[550,551],{"_469":480,"_342":542,"_20":21},{"_469":513,"_342":547,"_20":31},"steps",[554,557],{"_469":480,"_342":542,"_20":21,"_466":555,"_489":556},{"_20":21,"_342":542},{"_20":27,"_342":542},{"_469":513,"_342":547,"_20":31,"_466":558,"_489":559},{"_20":31,"_342":547},{"_20":35,"_342":547},{"_467":513,"_342":561,"_543":562,"_548":569,"_552":573},"Raw React APIs",[563,565,567],{"_469":480,"_342":564,"_20":43},"Create React Elements",{"_469":513,"_342":566,"_20":51},"Nesting Elements",{"_469":470,"_342":568,"_20":59},"Deep Nesting Elements",[570,571,572],{"_469":480,"_342":564,"_20":39},{"_469":513,"_342":566,"_20":47},{"_469":470,"_342":568,"_20":55},[574,577,580],{"_469":480,"_342":564,"_20":39,"_466":575,"_489":576},{"_20":39,"_342":564},{"_20":43,"_342":564},{"_469":513,"_342":566,"_20":47,"_466":578,"_489":579},{"_20":47,"_342":566},{"_20":51,"_342":566},{"_469":470,"_342":568,"_20":55,"_466":581,"_489":582},{"_20":55,"_342":568},{"_20":59,"_342":568},{"_467":470,"_342":584,"_543":585,"_548":596,"_552":602},"Using JSX",[586,588,590,592,594],{"_469":480,"_342":587,"_20":67},"Compiling JSX",{"_469":513,"_342":589,"_20":75},"Interpolation",{"_469":470,"_342":591,"_20":83},"Spread props",{"_469":490,"_342":593,"_20":91},"Nesting JSX",{"_469":468,"_342":595,"_20":99},"Fragments",[597,598,599,600,601],{"_469":480,"_342":587,"_20":63},{"_469":513,"_342":589,"_20":71},{"_469":470,"_342":591,"_20":79},{"_469":490,"_342":593,"_20":87},{"_469":468,"_342":595,"_20":95},[603,606,609,612,615],{"_469":480,"_342":587,"_20":63,"_466":604,"_489":605},{"_20":63,"_342":587},{"_20":67,"_342":587},{"_469":513,"_342":589,"_20":71,"_466":607,"_489":608},{"_20":71,"_342":589},{"_20":75,"_342":589},{"_469":470,"_342":591,"_20":79,"_466":610,"_489":611},{"_20":79,"_342":591},{"_20":83,"_342":591},{"_469":490,"_342":593,"_20":87,"_466":613,"_489":614},{"_20":87,"_342":593},{"_20":91,"_342":593},{"_469":468,"_342":595,"_20":95,"_466":616,"_489":617},{"_20":95,"_342":595},{"_20":99,"_342":595},{"_467":490,"_342":619,"_543":620,"_548":629,"_552":634},"Custom Components",[621,623,625,627],{"_469":480,"_342":622,"_20":107},"Simple Function",{"_469":513,"_342":624,"_20":115},"Raw API",{"_469":470,"_342":626,"_20":123},"JSX Components",{"_469":490,"_342":628,"_20":131},"Props",[630,631,632,633],{"_469":480,"_342":622,"_20":103},{"_469":513,"_342":624,"_20":111},{"_469":470,"_342":626,"_20":119},{"_469":490,"_342":628,"_20":127},[635,638,641,644],{"_469":480,"_342":622,"_20":103,"_466":636,"_489":637},{"_20":103,"_342":622},{"_20":107,"_342":622},{"_469":513,"_342":624,"_20":111,"_466":639,"_489":640},{"_20":111,"_342":624},{"_20":115,"_342":624},{"_469":470,"_342":626,"_20":119,"_466":642,"_489":643},{"_20":119,"_342":626},{"_20":123,"_342":626},{"_469":490,"_342":628,"_20":127,"_466":645,"_489":646},{"_20":127,"_342":628},{"_20":131,"_342":628},{"_467":468,"_342":648,"_543":649,"_548":662,"_552":669},"TypeScript",[650,651,653,655,657,659],{"_469":480,"_342":628,"_20":139},{"_469":513,"_342":652,"_20":147},"Narrow Types",{"_469":470,"_342":654,"_20":155},"Derive Types",{"_469":490,"_342":656,"_20":163},"Default Props",{"_469":468,"_342":658,"_20":171},"Reduce Duplication",{"_469":660,"_342":661,"_20":179},6,"Satisfies",[663,664,665,666,667,668],{"_469":480,"_342":628,"_20":135},{"_469":513,"_342":652,"_20":143},{"_469":470,"_342":654,"_20":151},{"_469":490,"_342":656,"_20":159},{"_469":468,"_342":658,"_20":167},{"_469":660,"_342":661,"_20":175},[670,673,676,679,682,685],{"_469":480,"_342":628,"_20":135,"_466":671,"_489":672},{"_20":135,"_342":628},{"_20":139,"_342":628},{"_469":513,"_342":652,"_20":143,"_466":674,"_489":675},{"_20":143,"_342":652},{"_20":147,"_342":652},{"_469":470,"_342":654,"_20":151,"_466":677,"_489":678},{"_20":151,"_342":654},{"_20":155,"_342":654},{"_469":490,"_342":656,"_20":159,"_466":680,"_489":681},{"_20":159,"_342":656},{"_20":163,"_342":656},{"_469":468,"_342":658,"_20":167,"_466":683,"_489":684},{"_20":167,"_342":658},{"_20":171,"_342":658},{"_469":660,"_342":661,"_20":175,"_466":686,"_489":687},{"_20":175,"_342":661},{"_20":179,"_342":661},{"_467":660,"_342":689,"_543":690,"_548":696,"_552":700},"Styling",[691,692,694],{"_469":480,"_342":689,"_20":187},{"_469":513,"_342":693,"_20":195},"Custom Component",{"_469":470,"_342":695,"_20":203},"Size Prop",[697,698,699],{"_469":480,"_342":689,"_20":183},{"_469":513,"_342":693,"_20":191},{"_469":470,"_342":695,"_20":199},[701,704,707],{"_469":480,"_342":689,"_20":183,"_466":702,"_489":703},{"_20":183,"_342":689},{"_20":187,"_342":689},{"_469":513,"_342":693,"_20":191,"_466":705,"_489":706},{"_20":191,"_342":693},{"_20":195,"_342":693},{"_469":470,"_342":695,"_20":199,"_466":708,"_489":709},{"_20":199,"_342":695},{"_20":203,"_342":695},{"_467":711,"_342":712,"_543":713,"_548":724,"_552":730},7,"Forms",[714,716,718,720,722],{"_469":480,"_342":715,"_20":211},"Form",{"_469":513,"_342":717,"_20":219},"Form Action",{"_469":470,"_342":719,"_20":227},"Input Types",{"_469":490,"_342":721,"_20":235},"Submission",{"_469":468,"_342":723,"_20":243},"Form Actions",[725,726,727,728,729],{"_469":480,"_342":715,"_20":207},{"_469":513,"_342":717,"_20":215},{"_469":470,"_342":719,"_20":223},{"_469":490,"_342":721,"_20":231},{"_469":468,"_342":723,"_20":239},[731,734,737,740,743],{"_469":480,"_342":715,"_20":207,"_466":732,"_489":733},{"_20":207,"_342":715},{"_20":211,"_342":715},{"_469":513,"_342":717,"_20":215,"_466":735,"_489":736},{"_20":215,"_342":717},{"_20":219,"_342":717},{"_469":470,"_342":719,"_20":223,"_466":738,"_489":739},{"_20":223,"_342":719},{"_20":227,"_342":719},{"_469":490,"_342":721,"_20":231,"_466":741,"_489":742},{"_20":231,"_342":721},{"_20":235,"_342":721},{"_469":468,"_342":723,"_20":239,"_466":744,"_489":745},{"_20":239,"_342":723},{"_20":243,"_342":723},{"_467":747,"_342":748,"_543":749,"_548":760,"_552":766},8,"Inputs",[750,752,754,756,758],{"_469":480,"_342":751,"_20":251},"Checkbox",{"_469":513,"_342":753,"_20":259},"Select",{"_469":470,"_342":755,"_20":267},"Radios",{"_469":490,"_342":757,"_20":275},"Hidden Inputs",{"_469":468,"_342":759,"_20":283},"Default Value",[761,762,763,764,765],{"_469":480,"_342":751,"_20":247},{"_469":513,"_342":753,"_20":255},{"_469":470,"_342":755,"_20":263},{"_469":490,"_342":757,"_20":271},{"_469":468,"_342":759,"_20":279},[767,770,773,776,779],{"_469":480,"_342":751,"_20":247,"_466":768,"_489":769},{"_20":247,"_342":751},{"_20":251,"_342":751},{"_469":513,"_342":753,"_20":255,"_466":771,"_489":772},{"_20":255,"_342":753},{"_20":259,"_342":753},{"_469":470,"_342":755,"_20":263,"_466":774,"_489":775},{"_20":263,"_342":755},{"_20":267,"_342":755},{"_469":490,"_342":757,"_20":271,"_466":777,"_489":778},{"_20":271,"_342":757},{"_20":275,"_342":757},{"_469":468,"_342":759,"_20":279,"_466":780,"_489":781},{"_20":279,"_342":759},{"_20":283,"_342":759},{"_467":536,"_342":783,"_543":784,"_548":791,"_552":795},"Error Boundaries",[785,787,789],{"_469":480,"_342":786,"_20":291},"Composition",{"_469":513,"_342":788,"_20":299},"Other Errors",{"_469":470,"_342":790,"_20":307},"Reset",[792,793,794],{"_469":480,"_342":786,"_20":287},{"_469":513,"_342":788,"_20":295},{"_469":470,"_342":790,"_20":303},[796,799,802],{"_469":480,"_342":786,"_20":287,"_466":797,"_489":798},{"_20":287,"_342":786},{"_20":291,"_342":786},{"_469":513,"_342":788,"_20":295,"_466":800,"_489":801},{"_20":295,"_342":788},{"_20":299,"_342":788},{"_469":470,"_342":790,"_20":303,"_466":803,"_489":804},{"_20":303,"_342":790},{"_20":307,"_342":790},{"_467":479,"_342":806,"_543":807,"_548":814,"_552":818},"Rendering Arrays",[808,810,812],{"_469":480,"_342":809,"_20":315},"Key prop",{"_469":513,"_342":811,"_20":323},"Focus State",{"_469":470,"_342":813,"_20":331},"Key Reset",[815,816,817],{"_469":480,"_342":809,"_20":311},{"_469":513,"_342":811,"_20":319},{"_469":470,"_342":813,"_20":327},[819,822,825],{"_469":480,"_342":809,"_20":311,"_466":820,"_489":821},{"_20":311,"_342":809},{"_20":315,"_342":809},{"_469":513,"_342":811,"_20":319,"_466":823,"_489":824},{"_20":319,"_342":811},{"_20":323,"_342":811},{"_469":470,"_342":813,"_20":327,"_466":826,"_489":827},{"_20":327,"_342":813},{"_20":331,"_342":813},"playground",{"_830":-5,"_467":-2,"_469":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_834":835,"_398":343,"_386":836,"_962":963,"_964":965,"_966":967,"_971":972,"_977":978},"articleId","workshop-react-fundamentals-9-finished",{"_22":837,"_467":536,"_838":839,"_342":783,"_840":841,"_842":843,"_844":845,"_847":848,"_552":850,"_548":930,"_543":946},"/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",[846],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-error-boundaries","finishedEpicVideoEmbeds",[849],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-error-boundaries",[851,884,907],{"_469":480,"_466":852,"_489":872},{"_20":287,"_342":786,"_838":853,"_22":288,"_24":289,"_840":854,"_855":856,"_858":859,"_866":867,"_869":870,"_467":536,"_469":480,"_9":466,"_871":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",[857],"https://www.epicreact.dev/workshops/react-fundamentals/composition","test",{"_9":860,"_861":862,"_863":864},"browser","pathname","/app/09.01.problem/test/","testFiles",[865],"error-boundary.test.ts","dev",{"_9":860,"_861":868},"/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":786,"_838":873,"_22":292,"_24":293,"_840":874,"_855":875,"_858":877,"_866":880,"_869":882,"_467":536,"_469":480,"_9":489,"_883":-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;",[876],"https://www.epicreact.dev/workshops/react-fundamentals/composition/solution",{"_9":860,"_861":878,"_863":879},"/app/09.01.solution/test/",[865],{"_9":860,"_861":881},"/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":513,"_466":885,"_489":896},{"_20":295,"_342":788,"_838":886,"_22":296,"_24":297,"_840":887,"_855":888,"_858":890,"_866":893,"_869":895,"_467":536,"_469":513,"_9":466,"_871":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;",[889],"https://www.epicreact.dev/workshops/react-fundamentals/other-errors",{"_9":860,"_861":891,"_863":892},"/app/09.02.problem/test/",[865],{"_9":860,"_861":894},"/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":788,"_838":897,"_22":300,"_24":301,"_840":898,"_855":899,"_858":901,"_866":904,"_869":906,"_467":536,"_469":513,"_9":489,"_883":-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;",[900],"https://www.epicreact.dev/workshops/react-fundamentals/other-errors/solution",{"_9":860,"_861":902,"_863":903},"/app/09.02.solution/test/",[865],{"_9":860,"_861":905},"/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":470,"_466":908,"_489":919},{"_20":303,"_342":790,"_838":909,"_22":304,"_24":305,"_840":910,"_855":911,"_858":913,"_866":916,"_869":918,"_467":536,"_469":470,"_9":466,"_871":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;",[912],"https://www.epicreact.dev/workshops/react-fundamentals/reset",{"_9":860,"_861":914,"_863":915},"/app/09.03.problem/test/",[865],{"_9":860,"_861":917},"/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":790,"_838":920,"_22":308,"_24":309,"_840":921,"_855":922,"_858":924,"_866":927,"_869":929,"_467":536,"_469":470,"_9":489,"_883":-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;",[923],"https://www.epicreact.dev/workshops/react-fundamentals/reset/solution",{"_9":860,"_861":925,"_863":926},"/app/09.03.solution/test/",[865],{"_9":860,"_861":928},"/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",[931,936,941],{"_20":287,"_342":786,"_838":853,"_22":288,"_24":289,"_840":854,"_855":932,"_858":933,"_866":935,"_869":870,"_467":536,"_469":480,"_9":466,"_871":291},[857],{"_9":860,"_861":862,"_863":934},[865],{"_9":860,"_861":868},{"_20":295,"_342":788,"_838":886,"_22":296,"_24":297,"_840":887,"_855":937,"_858":938,"_866":940,"_869":895,"_467":536,"_469":513,"_9":466,"_871":299},[889],{"_9":860,"_861":891,"_863":939},[865],{"_9":860,"_861":894},{"_20":303,"_342":790,"_838":909,"_22":304,"_24":305,"_840":910,"_855":942,"_858":943,"_866":945,"_869":918,"_467":536,"_469":470,"_9":466,"_871":307},[912],{"_9":860,"_861":914,"_863":944},[865],{"_9":860,"_861":917},[947,952,957],{"_20":291,"_342":786,"_838":873,"_22":292,"_24":293,"_840":874,"_855":948,"_858":949,"_866":951,"_869":882,"_467":536,"_469":480,"_9":489,"_883":-5},[876],{"_9":860,"_861":878,"_863":950},[865],{"_9":860,"_861":881},{"_20":299,"_342":788,"_838":897,"_22":300,"_24":301,"_840":898,"_855":953,"_858":954,"_866":956,"_869":906,"_467":536,"_469":513,"_9":489,"_883":-5},[900],{"_9":860,"_861":902,"_863":955},[865],{"_9":860,"_861":905},{"_20":307,"_342":790,"_838":920,"_22":308,"_24":309,"_840":921,"_855":958,"_858":959,"_866":961,"_869":929,"_467":536,"_469":470,"_9":489,"_883":-5},[923],{"_9":860,"_861":925,"_863":960},[865],{"_9":860,"_861":928},"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",965],"exerciseFinished",{"_968":969,"_24":970},"file","/myapp/workshop-content/exercises/09.errors/FINISHED.mdx","exercises/09.errors/FINISHED.mdx","prevStepLink",{"_973":974,"_975":976},"to","/exercise/09/03/solution","aria-label","Reset (solution)","nextStepLink",{"_973":979,"_975":806},"/exercise/10","actionData","errors"]

09. Error Boundaries/Elaboration