[gatsby-remark-images-contentful] Improve error visibility when trying to load non-existent image

[hoangvvo]

Description

 ERROR 

UNHANDLED REJECTION Request failed with status code 404



  Error: Request failed with status code 404
  
  - createError.js:16 createError
    [hoangvvo-gatsby-site]/[axios]/lib/core/createError.js:16:15
  
  - settle.js:17 settle
    [hoangvvo-gatsby-site]/[axios]/lib/core/settle.js:17:12
  
  - http.js:210 RedirectableRequest.handleResponse
    [hoangvvo-gatsby-site]/[axios]/lib/adapters/http.js:210:9
  
  - index.js:269 RedirectableRequest._processResponse
    [hoangvvo-gatsby-site]/[axios]/[follow-redirects]/index.js:269:10
  
  - index.js:50 ClientRequest.RedirectableRequest._onNativeResponse
    [hoangvvo-gatsby-site]/[axios]/[follow-redirects]/index.js:50:10
  
  - stream_base_commons.js:181 TLSWrap.onStreamRead
    internal/stream_base_commons.js:181:2

This error was caused by a Contentful image in markdown that is 404. However, it took me hours to figure it out because I had no clue.

Steps to reproduce

Create a Contentful post and insert a 404 Contentful image link (in my case, I deleted the image without noticing that I had added it a while ago)

Expected result

Something to more specific. Pointing out which markdown node caused the error would save a lot of trouble.

gatsby/packages/gatsby-remark-images-contentful/src/index.js

Lines 73 to 77 in 8fd5877

	const response = await axios({
	method: `GET`,
	url: originalImg, // for some reason there is a './' prefix
	responseType: `stream`,
	})

Actual result

A general axios error.

Environment

n/a

[hoangvvo]

would love to work on this one if it is reasonable to add

[wardpeet]

@hoangvvo we would love to accept a PR that describes the error.

I'm thinking something as simple as Image downloading failed for X, please check if the image still exists on contentful.