[gatsby-plugin-sharp] reporterError swallows detailed error infos

Description

In case my cached images are trashed (not sure why this is happening), I do get unhelpful error messages.

error [object Object] Input file contains unsupported image format


  Error: Input file contains unsupported image format

Steps to reproduce

Reproduction repo https://github.com/rburgst/bug-repro-28474

In https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-sharp/src/index.js#L439

  try {
    metadata = await sharp(file.absolutePath).metadata();
  } catch (err) {
    reportError(`Failed to retrieve metadata from image ${file.absolutePath}`, err, reporter);
    return null;
  }

I get the following error

message = "Failed to retrieve metadata from image /my-gatsby-project/.cache/caches/gatsby-source-wordpress-experimental/d41d8cd98f00b204e9800998ecf8427e/ISM_MoWo2018_Plakat_1.jpg"
err: Error = {
  stack: "Error: Input file contains unsupported image format",
  message: "Input file contains unsupported image format"
}

Then the call to reportError (in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-sharp/src/report-error.js) in combination to the structured error reporting will strip all useful info from the error message.

You can produce this by just touching a cached image file so that it has 0 bytes.

Expected result

Expected the message to contain the reference to the broken file.

Actual result

Instead I get this useless error log:

error [object Object] Input file contains unsupported image format


  Error: Input file contains unsupported image format

Environment

  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.0.14 - /usr/local/bin/npm
  Languages:
    Python: 2.7.17 - /usr/local/bin/python
  Browsers:
    Chrome: 87.0.4280.88
    Firefox: 83.0
    Safari: 14.0.1
  npmPackages:
    gatsby: ^2.28.0 => 2.28.0 
    gatsby-background-image: ^1.3.1 => 1.3.1 
    gatsby-image: ^2.7.0 => 2.7.0 
    gatsby-plugin-google-gtag: ^2.4.0 => 2.4.0 
    gatsby-plugin-graphql-codegen: ^2.7.1 => 2.7.1 
    gatsby-plugin-intl: ^0.3.3 => 0.3.3 
    gatsby-plugin-manifest: ^2.8.0 => 2.8.0 
    gatsby-plugin-offline: ^3.6.0 => 3.6.0 
    gatsby-plugin-react-helmet: ^3.6.0 => 3.6.0 
    gatsby-plugin-sass: ^2.7.0 => 2.7.0 
    gatsby-plugin-sharp: ^2.10.0 => 2.10.0 
    gatsby-plugin-sitemap: ^2.8.0 => 2.8.0 
    gatsby-plugin-typescript-checker: ^1.1.1 => 1.1.1 
    gatsby-plugin-use-query-params: ^1.0.1 => 1.0.1 
    gatsby-react-router-scroll: ^3.3.0 => 3.3.0 
    gatsby-source-apiserver: ^2.1.7 => 2.1.7 
    gatsby-source-filesystem: ^2.7.0 => 2.7.0 
    gatsby-source-mysql: ^2.2.3 => 2.2.3 
    gatsby-source-wordpress-experimental: ^4.0.0 => 4.0.0 
    gatsby-source-wordpress-menus: ^1.1.3 => 1.1.4 
    gatsby-transformer-sharp: ^2.8.0 => 2.8.0 

[AleksandrHovhannisyan]

Getting this as well. The error message is not very helpful.

[KyleAMathews]

Thanks for the reproduction @rburgst! With the work in https://github.com/gatsbyjs/gatsby/pull/28614 I think we can close this. I upgraded to the latest versions of the packages in your repro and now get the following error:

Let us know if this pops up again!