Gatsby: catch broken links

[johann-sonntagbauer]

It would be great to have some feedback if internal links are reachable or not.

At least for Markdown files it would be doable to analyse the links and check if there are pages registered in the system. If not, a meaningfull error message with some context would be great.

example.md

# Example
[some broken link](/destinations)

error message

Broken Link detected in  example.md
 1:  # Example
 2:  [some broken link](/destinations)
------------------------------^ 

I started a simple proof of concept for that, but need some support on how to access the internal data structures in the right way. So please if the idea is valid I could finalize a PR for that feature.

[KyleAMathews]

👍

window. ___loader.getPage() should do it. https://github.com/gatsbyjs/gatsby/blob/8a52ef35860afad65f469d8758babdbfc46b63ae/packages/gatsby/src/cache-dir/loader.js#L205

[johann-sonntagbauer]

After getting the basics going, I face a conceptual problem. There is no way to report errors in a standardized way.

The build is split in a bootstrap phase and a webpack based build phase. The webpack build uses the friendly-webpack-error-plugin to format error messages, clear the console and print webpack status information.

So for the usecase of catching and reporting broken links, there would be two strategies of reporting the problems.
Introduce error boundaries in the bootstrapping phase and in friendly-webpack-plugin. Drawback here is to implement the message formatting and so forth in both places.
or
Simply print out the information during transformation of the markdown files. This has the drawback, that the messages could not get accumulated and will be cleared in the development console.

My personal preferred way would be to introduce the error boundaries. So please let me know what you think.

[KyleAMathews]

I'm not entirely sure what you mean by "error boundaries" but it sounds intriguing :-)

@jquense is actually disabling friendly-webpack-plugin in https://github.com/gatsbyjs/gatsby/pull/1746 as like you said, it clears all the errors from the bootstrap which hasn't been ideal.

Would love to hear more of your thoughts on how this could work! I'd definitely agree that the current error/warning story isn't great.

[jquense]

I'm hoping eventually we can use our own webpack error reporting system. or at least customize the FWE plugin a bit more. I bet they would open contributions so I might take that route. I'd love to get all the webpack stuff running through the same reporter as the rest of Gatsby

[johann-sonntagbauer]

@jquense nice work! I will try to rebase my work onto your PR.
So the plan is to have the reporter to report any output. The reporter can decide how to deal with all the information, like print errors, update status information, progress indicators and so forth.
The FWE plugin is flexible in that case. We could provide our own Error Formatters which use the reporter infrastructure. With that we have all errors piped through the reporter.

[KyleAMathews]

@johann-sonntagbauer or anyone else, this would be great to add still!

[johann-sonntagbauer]

@KyleAMathews sorry forgot about that one. Will try to find some time to consolidate with the work @jquense did. It should make the error reporting much smoother.
THX for the reminder

[jlengstorf]

Following up on this — is there a WIP anywhere that we can pick up, @johann-sonntagbauer? (No pressure, I just really want this feature. 😂)

Also, it looks like this is only catching links at the same origin. Is there any issue open to check _all_ links? I didn't find one in my search. I imagine that won't be very performant, so maybe it would make more sense as a plugin so it's an opt-in thing. (Let me know if that seems like the right idea and I'll open a separate issue for the plugin dev.)

[johann-sonntagbauer]

@jlengstorf this work is currently only checking same origin links. Hope to bring it to a somehow useable state.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

This issue is being closed due to inactivity. Is this a mistake? Please re-open this issue or create a new issue.

[ivanoats]

Maybe a plugin that uses the programatic interface of https://www.npmjs.com/package/broken-link-checker ? Any interest?

[jlengstorf]

@ivanoats I'd love to see that — let me know if you get one rolling and I'll happily help you test it.