[07. Error Handling / 03. Error Bubbling] `GeneralErrorBoundary` component style

[lytovka]

Hey Kent! Thanks for your tremendous work on EpicWeb workshops.

I have one – a rather subjective – piece of feedback regarding the app/components/error-boundary.tsx component. When I first read the code, I was a bit thrown off. Would it improve readability to reorganize the types and default values so that they are not nested within the GeneralErrorBoundary? I'm alluding to something like this:

error-boundary.tsx

```tsx import { isRouteErrorResponse, useParams, useRouteError, } from '@remix-run/react' import { type ErrorResponse } from '@remix-run/router' import { getErrorMessage } from '#app/utils/misc.tsx' type StatusHandler = (info: { error: ErrorResponse params: Record }) => JSX.Element | null type GeneralErrorBoundaryProps = { defaultStatusHandler?: StatusHandler statusHandlers?: Record unexpectedErrorHandler?: (error: unknown) => JSX.Element | null } const DefaultStatusHandler: StatusHandler = ({ error }) =>

{error.status} {error.data}

export function GeneralErrorBoundary({ defaultStatusHandler = DefaultStatusHandler, statusHandlers, unexpectedErrorHandler = error =>

{getErrorMessage(error)}

, }: GeneralErrorBoundaryProps) { const error = useRouteError() const params = useParams() if (typeof document !== 'undefined') { console.error(error) } return (

{isRouteErrorResponse(error) ? (statusHandlers?.[error.status] ?? defaultStatusHandler)({ error, params, }) : unexpectedErrorHandler(error)}

) } ```

Usually, I don't nitpick code style in open-source projects, and in the grand scheme of things, it's a pretty minor nuance. However, because this is educational content, I thought it was worth mentioning. Thanks!

[kentcdodds]

Thanks for the feedback. This is pretty subjective and I like the way it is now so I'm not going to change it. But you're welcome to do so in your own projects. Thanks!