Add more context to error reporting

[PhiLhoSoft]

Summary

gatsby-transformer-remark returns errors without specifying in which file it happens.
It should display this information.

Motivation

Context: I try to rewrite my website made with Hexo, using Gatsby.

One issue I stumbled upon is that my Markdown files were using a frontmatter with only three dashes at the end, working with Hexo, but ignored by Gatsby. So I had a mostly empty frontmatter in my GraphQL queries (only an empty title). I mention this in case it can help somebody with the same issue. Of course, it worked better once I added the three dashes at the start of the files...

My issue is that then, gatsby-transformer-remark reported Yaml errors. But it doesn't tell where they happened:

gatsby develop

success open and validate gatsby-config — 0.017 s
success load plugins — 0.224 s
success onPreInit — 0.844 s
success delete html and css files from previous builds — 0.021 s
success initialize cache — 0.023 s
success copy gatsby files — 0.087 s
success onPreBootstrap — 0.007 s
error Plugin gatsby-transformer-remark returned an error

YAMLException: duplicated mapping key at line 18, column 2:
title: Atom
^

• loader.js:165 generateError
  [PhiLhoSoft.GitHub.io]/[js-yaml]/lib/js-yaml/loader.js:165:10

• loader.js:171 throwError
  [PhiLhoSoft.GitHub.io]/[js-yaml]/lib/js-yaml/loader.js:171:9

• loader.js:308 storeMappingPair
  [PhiLhoSoft.GitHub.io]/[js-yaml]/lib/js-yaml/loader.js:308:7

• loader.js:1071 readBlockMapping
  [PhiLhoSoft.GitHub.io]/[js-yaml]/lib/js-yaml/loader.js:1071:9

• loader.js:1332 composeNode
  [PhiLhoSoft.GitHub.io]/[js-yaml]/lib/js-yaml/loader.js:1332:12

• loader.js:1492 readDocument
  [PhiLhoSoft.GitHub.io]/[js-yaml]/lib/js-yaml/loader.js:1492:3

• loader.js:1548 loadDocuments
  [PhiLhoSoft.GitHub.io]/[js-yaml]/lib/js-yaml/loader.js:1548:5

• loader.js:1569 load
  [PhiLhoSoft.GitHub.io]/[js-yaml]/lib/js-yaml/loader.js:1569:19

• loader.js:1591 Object.safeLoad
  [PhiLhoSoft.GitHub.io]/[js-yaml]/lib/js-yaml/loader.js:1591:10

• parse.js:12 module.exports
  [PhiLhoSoft.GitHub.io]/[gray-matter]/lib/parse.js:12:17

• index.js:109 parseMatter
  [PhiLhoSoft.GitHub.io]/[gray-matter]/index.js:109:17

• index.js:50 matter
  [PhiLhoSoft.GitHub.io]/[gray-matter]/index.js:50:10

• on-node-create.js:31 Object.
  [PhiLhoSoft.GitHub.io]/[gatsby-transformer-remark]/on-node-create.js:31:16

Here, the stack trace isn't very useful (but not a problem), but the "YAMLException: duplicated mapping key at line 18, column 2:" message just forgets to specify in which file this happens! Showing the path of the currently processed Markdown file would helps a lot!

Thanks for this very interesting tool. I struggle a bit to put bits and pieces in place, but I learn a lot in the process...

[pieh]

If anyone is interested in grabbing this issue - here's some directions - it happens here:

gatsby/packages/gatsby-transformer-remark/src/on-node-create.js

Line 20 in 7a0884a

let data = grayMatter(content, pluginOptions)

What we could do is wrap this in try/catch and if exception was thrown use reporter.panicOnBuild function to display meaningful error - it should include node.absolutePath to point to file with maforrmatted frontmatter.

reporter is passed to onCreateNode in first argument, so just need to add it to list here

gatsby/packages/gatsby-transformer-remark/src/on-node-create.js

Line 6 in 7a0884a

{ node, getNode, loadNodeContent, actions, createNodeId },

panicOnBuild will terminate gatsby build, but gatsby develop will just report error, so users can fix markdown file without the need to restart gatsby develop

[mslooten]

I'm interested in giving it a shot. I could use some guidance on the wording of the error. We could simply show the error message and append the file which triggered it, or we could supply some more text.

@pieh I have some trouble with panicOnBuild; I wrapped the Markdown processing in try/catch and used the reporter.panicOnBuild, which works, but it also terminates gatsby develop. I'm not sure if I use that function correctly or if it's a side effect from using development build perhaps?

I just use it like this:
reporter.panicOnBuild('more specific error message goes here')

[pieh]

@mslooten I think you are right about panicOnBuild - it seems bugged right now and we need to fix it - it would be really nice if you could see if changing !== comparison to === here will fix it:

gatsby/packages/gatsby-cli/src/reporter/index.js

Lines 53 to 58 in bbd2a46

	panicOnBuild(...args) {
	this.error(...args)
	if (process.env.gatsby_executing_command !== `build`) {
	process.exit(1)
	}
	},

As for the wording, yeah I think just adding filename in front of error would be good - so maybe something like:

Error was thrown processing markdown file "<path-to-file>":
<error message here>

[mslooten]

@pieh yeah that does the trick, thanks for pointing me to the right file and the guidance on the wording. I'll start preparing a PR for this!