Display all errors in the UI while in development

[fortezhuo]

Description

I think area of error handling can be improved for better DX. I create a React component with intended error

export function Content() {
  return (
    <Section title="Setting User">
      <Item>
        <Label>Name</Label>
        <Control name="name">
          <InputText />
        </Control>
      </Item>
      <Item>
        <Label>Status</Label>
        <Control name="status">
          <InputSelect options={options} /> // not defined and will trigger error
        </Control>
      </Item>
      <Item className="col-span-2 lg:col-span-2">
        <Label>Template</Label>
        <Control name="template">
          <InputEditor />
        </Control>
      </Item>
    </Section>
  )
}

And I just got error page like this Something went wrong. Sincere apologies. Try again (later). by following this guide but I can get what error occurs in terminal console.

8:23:46 AM [vike][request(77)] Following error was thrown by the onRenderHtml() hook defined at vike-react/__internal/integration/onRenderHtml
ReferenceError: options is not defined
    at Content (/Users/forte/Workspace/apps/src/client/features/internal/setting/user/detail/content.tsx:18:24)
    at renderWithHooks (/Users/forte/Workspace/apps/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16)
    at renderIndeterminateComponent (/Users/forte/Workspace/apps/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5736:15)
    at renderElement (/Users/forte/Workspace/apps/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5961:7)
    at renderNodeDestructiveImpl (/Users/forte/Workspace/apps/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (/Users/forte/Workspace/apps/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6091:14)
    at renderNode (/Users/forte/Workspace/apps/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6274:12)

And I think the error page can be enhanced for better UX with display which part of code cause the errors and button for retry

[brillout]

I think the error page can be enhanced for better UX with display which part of code cause the errors and button for retry

I agree, in development, it would be nice to display all errors in the UI.

I ain't sure I understand the first part your post; feel free to elaborate.

Related: https://github.com/vikejs/vike/issues/1438.

[fortezhuo]

I think for DEV purpose.. display error like nextjs

[brillout]

like nextjs

Neat, I like that Next.js shows the first error message first. Although I think it should show all errors without forcing the user to use pagination.