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.

[fortezhuo]

I think vite's standard error message will be enough

instead of this error page

[brillout]

It's still very much a consideration to make Vike use Vite's error modal. What I'm trying to understand is how much of a DX improvement it would be. For me personally, it doesn't matter much whether the error is shown on the website or in the terminal — but I wonder whether the DX improvement could be a lot more significant depending on the user's workflow.

@fortezhuo What's your workflow that makes you want that?

[fortezhuo]

The main concern isn't about how the error is displayed in the browser or terminal console, but rather the developer experience (DX) when an error occurs. While Vike does support custom error pages—which is a nice feature—during development, developers typically expect that once they fix a bug, the page will automatically recover and render normally again. This can't happen if Vike immediately redirects to an error page or shows an "Internal Server Error." When the "Internal Server Error" screen appears, the live reload feature no longer works, which significantly disrupts the development flow.

Can this be prioritized, considering it's been almost a year since this issue was opened?

[brillout]

When the "Internal Server Error" screen appears, the live reload feature no longer works [...] Can this be prioritized

Discussion resumed over there:

• https://github.com/vikejs/vike/issues/2511

[brillout]

I just tried but there is a blocker when navigate() is imported by the user (e.g. examples/react-full/pages/index/+Page.tsx):

vite:hmr circular imports detected: virtual:vike:global-entry:client:client-routing -> virtual:vike:page-entry:client:/pages/index -> /pages/index/+Page.tsx -> /@fs/home/rom/code/vike/packages/vike/dist/esm/client/runtime-client-routing/index.js -> /@fs/home/rom/code/vike/packages/vike/dist/esm/client/runtime-client-routing/prefetch.js -> /@fs/home/rom/code/vike/packages/vike/dist/esm/client/runtime-client-routing/renderPageClientSide.js -> /@fs/home/rom/code/vike/packages/vike/dist/esm/client/runtime-client-routing/createPageContextClientSide.js -> /@fs/home/rom/code/vike/packages/vike/dist/esm/client/runtime-client-routing/globalContext.js -> virtual:vike:global-entry:client:client-routing +111ms

This prevents the error overlay to be shown upon following error in examples/react-full/pages/index/+Page.tsx:

-      <h1>Welcome to Vike</h1>
+      <h2>Welcome to Vike</h1>

Conceptually, I don't see how this circular dependency can be avoided. I can't see a solution.

Closing, as the error overlay does seem to work otherwise.

@fortezhuo Let me know if you can find other situations where the error overlay doesn't work.

[brillout]

About showing runtime errors using Vite's error overlay:

• https://github.com/vikejs/vike/issues/2511#issuecomment-3270385413

[brillout]

there is a blocker when navigate() is imported by the user

I just asked the Vite team about it: https://discord.com/channels/804011606160703521/831456449632534538/1414949356968349798 (private #ecosystem channel).

[brillout]

there is a blocker when navigate() is imported by the user

I just asked the Vite team about it: https://discord.com/channels/804011606160703521/831456449632534538/1414949356968349798 (private #ecosystem channel).

Fixed and pre-released as 0.4.239-commit-4d0d95.

This means, to my knowledge, all HMR / error layover issues left are because of Vite issues.

[fortezhuo]

Thanks! Automatic reload after fixing the page would greatly improve the development experience.

[brillout]

Automatic reload after fixing the page would greatly improve the development experience.

That should already be the case:

• https://github.com/vikejs/vike/issues/2511#issuecomment-3268219013
• https://github.com/vikejs/vike/pull/2700/files

As you can see, if the error page is shown then Vike re-renders the while page whenever an HMR event occurs (thus, if the page is fixed, then the normal page is shown instead of the error page).

Reproduction steps welcome if you have a situation where it isn't the case. (But note that it may be some HMR issues related to Vite.)