Description
Self-hosted Plane v1.3.0 Community Edition shows the "Looks like something went wrong!" error boundary page on mobile browsers (tested on iOS Chrome and Safari). Desktop browsers show console errors but recover. The v1.3.0 release notes mention "Fixed logo spinner hydration and theme loading issues", but the fix appears incomplete for self-hosted Docker images.
Steps to reproduce
- Deploy Plane v1.3.0 Community Edition self-hosted using
makeplane/plane-frontend:stable (or :v1.3.0) Docker image
- Open the instance URL on a mobile browser (iPhone Chrome or Safari)
- The error boundary page appears: "Looks like something went wrong!"
Desktop browsers show the same React errors in the console but recover and render correctly.
Expected behavior
The app should load on both desktop and mobile browsers without triggering the error boundary.
Console errors
Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418
at gu (index-VH9TOfLF.js:6:4907)
at sa (index-VH9TOfLF.js:8:45647)
...
Uncaught Error: Minified React error #423; visit https://reactjs.org/docs/error-decoder.html?invariant=423
at sa (index-VH9TOfLF.js:8:45307)
...
Root cause analysis
The source code in apps/web/app/root.tsx correctly has suppressHydrationWarning on <html> and <body>, and uses next-themes ThemeProvider. However, the built Docker image's static HTML does not include the pre-rendered HydrateFallback (LogoSpinner) in the body:
Self-hosted HTML (from Docker image):
<body>
<div id="context-menu-portal"></div>
<div id="editor-portal"></div>
<script>/* inline theme script */</script>
<div></div> <!-- empty React root -->
</body>
Plane Cloud (app.plane.so) HTML:
<body>
<div id="context-menu-portal"></div>
<div id="editor-portal"></div>
<div style="position:relative;display:flex;height:100vh;...">
<img src="/assets/logo-spinner-light-..." alt="logo"> <!-- pre-rendered fallback -->
</div>
</body>The self-hosted build outputs an empty root div while the Cloud build includes the HydrateFallback content. The theme initialization script modifies <html> attributes before React hydrates, creating a mismatch that triggers the error boundary on mobile.
Environment
- Plane version: v1.3.0 Community Edition
- Deployment: Docker (self-hosted via Coolify)
- Images:
makeplane/plane-frontend:v1.3.0 (Docker Hub, digest sha256:5116ac06c2b5f...)
- Affected: iOS Safari 17+, iOS Chrome — error boundary triggered
- Not affected: Desktop Chrome, Desktop Safari — console errors only, app recovers
- Previous version: v1.2.3 loads (same
hydrateRoot + theme script) but does not trigger error boundary on mobile
Possible fix
The self-hosted Docker image build should include the HydrateFallback component (LogoSpinner) pre-rendered in the static HTML, matching the Plane Cloud build output.
Description
Self-hosted Plane v1.3.0 Community Edition shows the "Looks like something went wrong!" error boundary page on mobile browsers (tested on iOS Chrome and Safari). Desktop browsers show console errors but recover. The v1.3.0 release notes mention "Fixed logo spinner hydration and theme loading issues", but the fix appears incomplete for self-hosted Docker images.
Steps to reproduce
makeplane/plane-frontend:stable(or:v1.3.0) Docker imageDesktop browsers show the same React errors in the console but recover and render correctly.
Expected behavior
The app should load on both desktop and mobile browsers without triggering the error boundary.
Console errors
Root cause analysis
The source code in
apps/web/app/root.tsxcorrectly hassuppressHydrationWarningon<html>and<body>, and usesnext-themesThemeProvider. However, the built Docker image's static HTML does not include the pre-renderedHydrateFallback(LogoSpinner) in the body:Self-hosted HTML (from Docker image):
Plane Cloud (app.plane.so) HTML:
The self-hosted build outputs an empty root div while the Cloud build includes the HydrateFallback content. The theme initialization script modifies
<html>attributes before React hydrates, creating a mismatch that triggers the error boundary on mobile.Environment
makeplane/plane-frontend:v1.3.0(Docker Hub, digestsha256:5116ac06c2b5f...)hydrateRoot+ theme script) but does not trigger error boundary on mobilePossible fix
The self-hosted Docker image build should include the
HydrateFallbackcomponent (LogoSpinner) pre-rendered in the static HTML, matching the Plane Cloud build output.