Handling http error in react for path not found - reactjs

Question

I am trying to handle the HTTP error in my application for the unknown path using catch and by changing the state of the application. I am changing the state of the application to display the details of the unknown path but it's not working. Can anyone suggest me how to do that? I have added my code below
App.js
import React, { Component } from 'react'
import charactersFile from "./data/characters.json"
import axios from 'axios';
import './App.css';
class App extends Component {
state = {
movies: [],
loading: true,
error: ''
};
handleClick = character => {
console.log(character.name);
const PeopleUrl = `https://swapi.co/api/people/`;
const FilmUrl = `https://swapi.co/api/films/`;
switch (character.name) {
case "Luke Skywalker":
axios
.get(`${PeopleUrl}1/`)
.then(response =>
Promise.all([
axios.get(`${FilmUrl}2/`),
axios.get(`${FilmUrl}6/`),
axios.get(`${FilmUrl}3/`),
axios.get(`${FilmUrl}1/`),
axios.get(`${FilmUrl}7/`)
])
)
.then(result =>
result.map(values =>
this.setState({
movies: [
...this.state.movies,
{
title: values.data.title,
release_date: values.data.release_date
}
],
loading: false,
render: true
})
)
);
break;
case "C-3PO":
axios
.get(`${PeopleUrl}2/`)
.then(response =>
Promise.all([
axios.get(`${FilmUrl}2/`),
axios.get(`${FilmUrl}5/`),
axios.get(`${FilmUrl}4/`),
axios.get(`${FilmUrl}6/`),
axios.get(`${FilmUrl}3/`),
axios.get(`${FilmUrl}1/`)
])
)
.then(result =>
result.map(values =>
this.setState({
movies: [
...this.state.movies,
{
title: values.data.title,
release_date: values.data.release_date
}
],
loading: false,
render: true
})
)
);
break;
case "Leia Organa":
axios.get(`${PeopleUrl}unknown/`)
.then(response => {
if (response.status === 404) {
this.setState({ error: "Details not found" })
}
}).catch(error => {
console.log(error); // They are other network errors
this.setState({ error: 'Network error' })
})
break;
case "R2-D2":
axios
.get(`${PeopleUrl}3/`)
.then(response =>
Promise.all([
axios.get(`${FilmUrl}2/`),
axios.get(`${FilmUrl}5/`),
axios.get(`${FilmUrl}4/`),
axios.get(`${FilmUrl}6/`),
axios.get(`${FilmUrl}3/`),
axios.get(`${FilmUrl}1/`),
axios.get(`${FilmUrl}7/`)
])
)
.then(result =>
result.map(values =>
this.setState({
movies: [
...this.state.movies,
{
title: values.data.title,
release_date: values.data.release_date
}
],
loading: false,
render: true
})
)
);
break;
default:
return "No list item";
}
};
render() {
console.log(this.state);
const Content = this.state.loading ? (
<div style={{ marginTop: "20px", padding: "20px" }}>"Loading..."</div>
) : (
<ul>
{this.state.movies.map(movie => (
<li key={movie.title}>
{movie.title} - {movie.release_date}
</li>
))}
</ul>
);
const List = (
<ul>
{charactersFile.characters.map(character => {
return (
<li
key={character.name}
onClick={() => this.handleClick(character)}
>
{character.name}
</li>
);
})}
</ul>
);
return <div className="App">{!this.state.render ? List : Content}</div>;
}
}
export default App;
characters.json
{
"characters": [
{
"name": "Luke Skywalker",
"url": "https://swapi.co/api/people/1/"
},
{
"name": "C-3PO",
"url": "https://swapi.co/api/people/2/"
},
{
"name": "Leia Organa",
"url": "https://swapi.co/api/people/unknown/"
},
{
"name": "R2-D2",
"url": "https://swapi.co/api/people/3/"
}
]
}

Answer 1

The problem is
You don't set loading to false when error occurs.
You don't check for errors in your render method.
First lets extract the presentation components to small function components to make the main component more simple
const Error = ({ message }) => <h3>{message}</h3>;
const Loader = () => (
<div style={{ marginTop: "20px", padding: "20px" }}>"Loading..."</div>
);
const List = ({ handleClick }) => (
<ul>
{charactersFile.characters.map(character => {
return (
<li key={character.name} onClick={() => handleClick(character)}>
{character.name}
</li>
);
})}
</ul>
);
const Content = ({ movies }) => (
<ul>
{movies.map(movie => (
<li key={movie.title}>
{movie.title} - {movie.release_date}
</li>
))}
</ul>
);
App
class App extends Component {
state = {
movies: [],
loading: false,
error: ""
};
handleClick = character => {
// Set loading to true and error to false
this.setState({ loading: true, error: false, movies: [] });
console.log(character.name);
axios
.get(character.url)
.then(({ data }) =>
Promise.all(data.films.map(filmUrl => axios.get(filmUrl)))
)
.then(result => {
const movies = result.map(({ data: { title, release_date } }) => ({
title,
release_date
}));
this.setState({ movies, loading: false, error: "" });
})
.catch(() => {
this.setState({
movies: [],
loading: false,
error: "List not found"
});
});
};
render() {
const { error, loading, movies } = this.state;
return (
<div className="App">
{/* include Content component only when there is data */}
{movies.length > 0 ? (
<Content movies={movies} />
) : (
<List handleClick={this.handleClick} />
)}
{/* include Loader component when loading */}
{loading && <Loader />}
{/* include Error component when there is an error */}
{error && <Error message={error} />}
</div>
);
}
}
If you have any questions about the code let me know.
Working sandbox

Answer 2

404 error was judged not by catch but by normal request.
So you can catch 404 like .then(res => {if(res.status === 404)} or .then(res => { if(!res.ok) })
Some example for your code
axios.get(`${PeopleUrl}unknown/`)
.then(response => {
if(response.ok) {
console.log(response.data);
} else {
console.log('Details not found.'); // It is 404 error
this.setState({ error : 'Details not found' });
}
})
.catch(error => {
console.log(error); // They are other network errors
this.setState({ error : 'Network error' })
})