You know how you get nice error popovers in CRA or NextJS when an error happens. Switching to React Vite, the app just shows up blank and I have to open my console to see errors. Looked around and aggregated the solution posted by others.

Where to put this code;

I put mine index.html

    <script>
      window.onerror = (event, source, lineno, colno, err) => {
        // must be within function call because that's when the element is defined for sure.
        const ErrorOverlay = customElements.get('vite-error-overlay');
        // don't open outside vite environment
        if (!ErrorOverlay) {
          return;
        }
        const overlay = new ErrorOverlay(err);
        document.body.appendChild(overlay);
      };
    </script>

Issue link: [Feature request] Show browser error overlay for runtime errors · Issue #2076 · vitejs/vite