Skip to content

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

Open
GuiDevloper wants to merge 7 commits intonullstack:nextfrom
GuiDevloper:error-handling
Open

feat: Add runtime errors overlay to show undefined nodes location#372
GuiDevloper wants to merge 7 commits intonullstack:nextfrom
GuiDevloper:error-handling

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