kentcdodds / kentcdodds/react-workshop-app

404 handling doesn't work

Open
#33 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
151
Forks
36
PR merge metrics
No merged PRs in 30d

Description

- `@kentcdodds/react-workshop-app` version: 2.19.2
- `node` version: 14.12.0
- `npm` version: 6.14.8

What you did:

Navigated to a spurious route, e.g. `/abcdef` or an exercise that didn't exist, e.g. `/99`

What happened:

![Screenshot 2020-10-19 at 22 02 55](https://user-images.githubusercontent.com/846955/96512837-fe6e5e00-1258-11eb-9e87-db5e470cb878.png)

When instead the NotFound component should have been rendered.

Reproduction repository:

You can reproduce this on any downloaded course section

Problem description:

The NotFound component is not rendered when an invalid URL is navigated to.

This is happening because:

1. The `/:exerciseNumber` route is not scoped to just capture numbers, but any url. Therefore no url ever reaches the NotFound catch all route.
2. The `ExerciseContainer` component does not check the bounds of `exerciseInfo`, so if the exerciseNumber passed in is invalid (either a string or a number outside of the defined exercises) the app crashes with a destructuring error as shown above.

Suggested solution:

1. Scope the `/:exerciseNumber/` route to only accept numbers, via regex. This should fix 404 handling for non number parameters.
2. Add a bounds check and render NotFound in ExerciseContainer if the number passed is not found in `exerciseInfo`.

I'd be happy to submit a PR for the changes if desired.

Contributor guide

Open the contributing guide

Research direction

Start by locating the route definitions for the exercise number and the ExerciseContainer component, then run the app and navigate to an invalid path such as /abcdef or /99. Verify that numeric route matching and invalid exercise bounds reach the NotFound component instead of crashing.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.