Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat: Add runtime errors overlay to show undefined nodes location #372

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

Open
wants to merge 7 commits into
base: next
Choose a base branch
from

Conversation

GuiDevloper
Copy link
Member

@GuiDevloper GuiDevloper commented Aug 8, 2023

TL;DR:

UndefinedNodesOverlay-speed.mp4

Full component used in the test above: NullstackOverlayTester.tsx

Important notes

Two routes were added for when environment.development === true (written in server/devRoutes.js):

  • /nullstack-dev-server/get-file?fileName=full/path/to/File.jsx&lineNumber=20&columnNumber=2:
    Returns the formatted file pointing exactly where the undefined error happens and the relativePath to it (for showing purposes).
  • /nullstack-dev-server/open-editor?fileName=full/path/to/File.jsx:20:2:
    Opens editor in that line/column using Evan You's launch-editor.
    The default editor can be configured, I moved that possibility to a env variable NULLSTACK_EDITOR defaulting to VSCode.

Only works in development mode (when __source object is injected for every node by SWC & Babel), otherwise throws saying to retry that route in development mode to see the source of error.

The errors are always cleared at every generateTree call, keeping it all updated at every rerender step.

Throws became the last-case warning, only happening in production (__source === undefined) or when the main component tries to render an undefined node itself, like:

import Nullstack from 'nullstack'
export default class Application extends Nullstack {
  render() { return }
}

@GuiDevloper GuiDevloper changed the title feat: Add runtime errors overlay to show exactly where undefined nodes are feat: Add runtime errors overlay to show undefined nodes location Aug 27, 2023
@GuiDevloper
Copy link
Member Author

3b27991 changes:

TL;DR:

undefined-node-v3

  • Changed overlay title as it only shows undefined nodes errors
  • Added explanation about the meaning of the errors shown in the overlay
  • Added browser console.error for every error
  • Added scope.skipHotReplacement = true forcing browser reload on next render (also avoiding the need to call runtimeError.clear() at every rerender)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant