Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: inject source location data to Slice usage and show errors in places where user renders them and not in gatsby internals #36849

Merged

Conversation

pieh
Copy link
Contributor

@pieh pieh commented Oct 19, 2022

Description

React component stack trace is not always showing source code location (see https://github.com/facebook/react/blob/2cf4352e1c81a5b8c3528519a128c20e8e65531d/packages/shared/ReactComponentStackFrame.js#L135-L137 ).

This makes it hard to show a relevant codeframe from the user when we are throwing validation errors inside gatsby / slice placeholder component internals as we would point to gatsby internals which is irrelevant to users.

This PR:

  • add babel plugin to add __renderedBylocation prop to all stages aside from build-javascript
  • adds error.forcedLocation on slice validation errors
  • adjusts dev overlay to use error.forcedLocation if provided (and fallback to inspecting stack trace if not) - this also needed dev server adjustments to handle cases where location is already one from source code and not the compiled code.
  • adjusts createErrorFromString function to be able to receive entire error object and not just error.stack (it's backward compatible, it still handles passing stack in) to make use of error.forcedLocation if available

Results:

gatsby develop (regular, client-only rendering):

image

gatsby develop (with DEV_SSR enabled)

Same overlay as in develop + following in terminal:
image

gatsby build:

image

[ch56637]

…laces where user renders them and not in gatsby internals
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Oct 19, 2022
@pieh pieh added topic: DX Developer Experience (e.g. Fast Refresh, i18n, SSR, page creation, starters) topic: core Relates to Gatsby's core (e.g. page loading, reporter, state machine) and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Oct 19, 2022
@pieh pieh marked this pull request as ready for review October 19, 2022 16:34
pieh and others added 3 commits October 20, 2022 06:58
Co-authored-by: Ty Hopp <tyhopp@users.noreply.github.com>
… instead of description that was copy&paste from StaticImage plugin
tyhopp
tyhopp previously approved these changes Oct 20, 2022
Co-authored-by: Lennart <lekoarts@gmail.com>
@pieh pieh merged commit 4423795 into master Oct 20, 2022
@pieh pieh deleted the slices-show-code-frame-where-slice-placeholder-is-rendered branch October 20, 2022 11:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
topic: core Relates to Gatsby's core (e.g. page loading, reporter, state machine) topic: DX Developer Experience (e.g. Fast Refresh, i18n, SSR, page creation, starters)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants