enhance learner experience 🛠️✨ and fix typos at errors module (#367)

Co-authored-by: Kent C. Dodds <me@kentcdodds.com>

exercises/08.errors/01.problem.composition/README.mdx

@@ -15,8 +15,8 @@ the `ErrorBoundary` so we can define our own `ErrorFallback` component.
 
 Right now we have an `App` component which we render using
 `ReactDOM.createRoot(rootEl).render(<App />)`, so to get our stuff wrapped
-properly, we'll rename our existing `App` component (call it `Onboarding`) and
-then make a new `App` which renders the `ErrorBoundary` around the `Onboarding`
+properly, we'll rename our existing `App` component (call it `OnboardingForm`) and
+then make a new `App` which renders the `ErrorBoundary` around the `OnboardingForm`
 component along with our `FallbackComponent` called `ErrorFallback` (which you
 also have to create).
 

exercises/08.errors/01.problem.composition/index.tsx

@@ -1,5 +1,5 @@
 import * as ReactDOM from 'react-dom/client'
-// 🐨 bring in ErrorBoundary and FallbackProps from react-error-boundary
+// 🐨 bring in ErrorBoundary and FallbackProps type from react-error-boundary
 
 // 🐨 Rename this to OnboardingForm
 function App() {
@@ -99,6 +99,7 @@ function App() {
 // 🐨 create an ErrorFallback component here that accepts FallbackProps
 // and renders the error.message
 // 💯 you can make it look nice if you want
+// 📜 https://github.com/bvaughn/react-error-boundary#errorboundary-with-fallbackcomponent-prop
 
 // 🐨 make a component called "App" that renders the OnboardingForm inside an
 // ErrorBoundary with the ErrorFallback as the FallbackComponent

exercises/08.errors/02.problem.show-boundary/README.mdx

@@ -3,7 +3,11 @@
 👨‍💼 Recall previously we learned that React doesn't catch all errors for you.
 We've got an error in our `onSubmit` handler like this. If you try to submit the
 form, you'll notice in the console that there's an error (someone made a typo
-😅).
+😅). The error looks something like:
+
+> ```javascript
+> Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')
+> ```
 
 Before we fix the typo, we want to give the user better feedback for when
 something like this happens (right now, they don't know it's not working and

exercises/08.errors/02.problem.show-boundary/index.tsx

@@ -1,4 +1,5 @@
 import * as ReactDOM from 'react-dom/client'
+// 🐨 bring in useErrorBoundary from react-error-boundary
 import { ErrorBoundary, type FallbackProps } from 'react-error-boundary'
 
 function OnboardingForm() {

exercises/08.errors/03.problem.reset/README.mdx

@@ -1,7 +1,7 @@
 # Reset
 
 👨‍💼 Sometimes errors are temporary and will go away if you just "turn it off and
-on again." `react-error-boudary` supports this with a `resetErrorBoundary`
+on again." `react-error-boundary` supports this with a `resetErrorBoundary`
 function it passes to our `FallbackComponent`. We can use this to reset the
 error boundary and try again.
 

exercises/08.errors/03.problem.reset/index.tsx

@@ -109,7 +109,10 @@ function ErrorFallback({ error }: FallbackProps) {
 		<div role="alert">
 			There was an error:{' '}
 			<pre style={{ color: 'red', whiteSpace: 'normal' }}>{error.message}</pre>
-			{/* 🐨 add a "Try again" button and pass the resetErrorBoundary function to the onClick prop */}
+			{/* 
+				🐨 Add a "Try again" button. Assign the resetErrorBoundary function to its onClick prop. 
+				💰 For more on the onClick event handler, visit: 📜 https://react.dev/learn/responding-to-events
+			*/}
 		</div>
 	)
 }