UN-3185: Defer heavy chunks on login route + cache fingerprinted assets (#2114)

* UN-3185: Defer heavy chunks on login route + cache fingerprinted assets

Fix 1 (nginx.conf): serve content-hashed /assets/* with a 1y immutable
Cache-Control while keeping index.html and config/runtime-config.js
non-cached, so repeat visits stop re-fetching the whole bundle.

Fix 2: stop the unauthenticated /landing page from eagerly downloading
the full app. Convert OSS route pages and enterprise plugin route
elements to React.lazy behind a single <Suspense>, and lazy-load the
app shell (PageLayout/FullPageLayout) which transitively pulled the
PDF viewer, charts and lookup-studio onto /landing.

New helper src/helpers/pluginRegistry.js (lazyPlugin) defers plugin
chunks to navigation; OSS builds resolve the stub and fall back to
NotFound, so absent-plugin routes 404 harmlessly as before.

Measured /landing script requests: 201 -> 93; pdf-vendor, recharts and
Monaco no longer load until navigated to. OSS-parity build (no
src/plugins) verified.

* UN-3185: Address review — preserve security headers, tighten plugin-absent check

- nginx: drive Cache-Control from a $uri map at server scope instead of
  per-location add_header. Location-level add_header replaces (not merges)
  the inherited server headers, which dropped X-Content-Type-Options/
  X-Frame-Options/Referrer-Policy/CSP from /assets, index.html and
  runtime-config.js. Now both locations carry no add_header and inherit all
  security + cache headers.
- pluginRegistry: only treat the build-time stub ('Optional plugin not
  available') as plugin-absent; rethrow transient chunk-load failures of a
  shipped plugin instead of masking them as NotFound.
- useMainAppRoutes: gate the OnboardProduct wrapper on PRODUCT_NAMES.unstract
  (the value passed as type) rather than the map being non-empty.

* UN-3185: Extract shared lazyNamed helper (dedupe lazy-route boilerplate)

Pull the repeated 'lazy a named export' pattern into src/helpers/lazyNamed.js
and use it in Router.jsx and useMainAppRoutes.js instead of inline
.then((m) => ({ default: m.X })) / a per-file 'named' helper. Behaviour is
identical; /landing chunk count unchanged. Addresses cloud-PR review feedback
about the duplicated helper (the two route hooks import the same util).

* UN-3185: Add ErrorBoundary around lazy routes; validate lazyNamed export

- Wrap the route <Suspense> in Router.jsx with the existing ErrorBoundary and
  a reload-prompt fallback. lazyPlugin/lazyNamed rethrow non-stub failures
  (e.g. a transient chunk-load blip), and App rendered <Router/> with no
  boundary — so such a failure would unmount the tree to a blank screen.
  The boundary now contains it and offers a reload (which re-fetches the chunk).
- lazyNamed: throw a descriptive error when the requested named export is
  missing instead of handing React.lazy { default: undefined } (opaque error).

Addresses greptile P1 (no ErrorBoundary) and CodeRabbit (lazyNamed validation).

* UN-3185: Scope route error handling, validate lazyPlugin export, drop dead guard

Review round 3:
- lazyPlugin: validate the resolved export (mirror lazyNamed). A shipped plugin
  whose named export was renamed/removed now throws a descriptive error instead
  of handing React.lazy { default: undefined }; isPluginAbsent doesn't match it,
  so it re-throws to the ErrorBoundary rather than masking as NotFound.
- ErrorBoundary: support resetKeys — clear the error when a key changes (e.g.
  location), so navigation recovers without a full reload.
- New LazyOutlet (content-scoped <Suspense> + nav-resettable ErrorBoundary +
  <Outlet/>); PageLayout/FullPageLayout use it instead of a bare <Outlet/>.
  Per-page load spinners and chunk-load failures now stay in the content area
  with the shell mounted; the app-wide boundary in Router.jsx remains the
  backstop and is now also location-reset. Fixes the blast-radius / no-recovery
  and shell-blanks-on-first-nav issues from the single top-level boundary.
- useMainAppRoutes: remove the now-dead 'ReadOnlyReviewPage && !ReviewLayout'
  warning — with lazyPlugin both are always truthy so it could never fire; the
  route degrades to NotFound if manual-review is absent.

Build green (with and without src/plugins); biome clean.

* UN-3185: Use globalThis.location.reload() in RouteLoadError (SonarCloud S7764)

Prefer globalThis over window for the reload handler, matching existing
globalThis.location usage in the codebase (e.g. SideNavBar). Clears the only
open SonarCloud issue on this PR (javascript:S7764, minor code smell).

* UN-3185: Auto-reload once on chunk-load errors (stale chunk after deploy)

The route ErrorBoundary already catches a rejected dynamic import() (a
<Suspense> alone only handles the pending state). Add chunk-error handling so
the common production trigger — a stale hashed chunk after a redeploy (client
requests a filename the CDN no longer serves) — auto-recovers:

- isChunkLoadError() detects the failed-dynamic-import error across browsers.
- handleRouteError() (wired as onError on both the app-wide boundary in
  Router.jsx and the content-scoped one in LazyOutlet) reloads ONCE to pick up
  fresh chunk hashes, guarded by a sessionStorage timestamp so a genuinely-gone
  chunk falls through to the manual Reload fallback instead of looping.
  Non-chunk render errors are never auto-reloaded.

This covers the outermost lazy route elements too (e.g. FullPageLayout for
verticals, OnboardProduct for llm-whisperer), which render under the Router
boundary.

Author: jaseemjaskp

frontend/nginx.conf

@@ -37,6 +37,17 @@ http {
     uwsgi_temp_path         /tmp/uwsgi_temp 1 2;
     scgi_temp_path          /tmp/scgi_temp 1 2;
 
+    # Cache policy by URL. Vite emits content-hashed filenames under /assets/,
+    # so those bytes never change and can be cached forever; everything else
+    # (index.html, runtime-config.js, SPA routes) must stay uncached so new
+    # deploys are picked up. Driven from a single server-level add_header so it
+    # composes with the security headers instead of overriding them (nginx does
+    # not merge add_header across location/server scopes).
+    map $uri $cache_control {
+        default      "no-cache";
+        ~^/assets/   "public, max-age=31536000, immutable";
+    }
+
     server {
         listen 80;
         root  /usr/share/nginx/html;
@@ -50,11 +61,27 @@ http {
         # CSP in report-only mode: logs violations to browser console without blocking requests.
         add_header Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net https://unpkg.com https://eu.i.posthog.com https://eu-assets.i.posthog.com https://www.googletagmanager.com https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ https://js.stripe.com https://app.productfruits.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob: https://eu.i.posthog.com https://eu-assets.i.posthog.com; font-src 'self' data:; connect-src 'self' blob: wss: https://cdn.jsdelivr.net https://eu.i.posthog.com https://eu-assets.i.posthog.com https://www.google-analytics.com https://api.stripe.com https://app.productfruits.com; frame-src 'self' https://www.google.com/recaptcha/ https://recaptcha.google.com https://js.stripe.com https://hooks.stripe.com; worker-src 'self' blob: https://unpkg.com https://cdn.jsdelivr.net; object-src 'none'; base-uri 'self'; form-action 'self' https://checkout.stripe.com; frame-ancestors 'self'" always;
 
+        # Cache-Control from the $cache_control map (immutable for /assets/*,
+        # no-cache otherwise). Declared at server scope alongside the security
+        # headers so a location block does not have to redeclare add_header
+        # (which would drop the inherited security headers).
+        add_header Cache-Control $cache_control always;
+
         # Disable TRACE and TRACK methods
         if ($request_method ~ ^(TRACE|TRACK)$) {
             return 405;
         }
 
+        # Content-hashed build output. No add_header here, so the server-level
+        # security + cache headers are inherited. 404 (not the SPA fallback)
+        # for a missing asset.
+        location /assets/ {
+            limit_except GET HEAD {
+                deny all;
+            }
+            try_files $uri =404;
+        }
+
         # If a react app URI is directly accessed we will get 404
         # since there will be no file representing that path.
         # Below config will load index.html file in such case and

frontend/src/components/error/LazyOutlet/LazyOutlet.jsx

@@ -0,0 +1,82 @@
+import { Button, Result } from "antd";
+import { Suspense } from "react";
+import { Outlet, useLocation } from "react-router-dom";
+
+import { GenericLoader } from "../../generic-loader/GenericLoader.jsx";
+import { ErrorBoundary } from "../../widgets/error-boundary/ErrorBoundary.jsx";
+
+// A failed dynamic import — almost always a stale hashed chunk after a
+// redeploy (the client's index.html references a filename the CDN no longer
+// serves). Matching is best-effort across browsers/bundlers.
+export function isChunkLoadError(err) {
+  const msg = err?.message || "";
+  return (
+    err?.name === "ChunkLoadError" ||
+    msg.includes("Failed to fetch dynamically imported module") ||
+    msg.includes("error loading dynamically imported module") ||
+    msg.includes("Importing a module script failed")
+  );
+}
+
+// onError handler for the route boundaries. On a chunk-load error, reload ONCE
+// to pick up fresh chunk hashes from the new deploy. A timestamp guard prevents
+// a reload loop when the chunk is genuinely gone: a repeat failure inside the
+// window falls through to the manual "Reload" fallback instead. Non-chunk
+// errors (real render bugs) are left for the fallback — never auto-reloaded.
+export function handleRouteError({ error }) {
+  if (!isChunkLoadError(error)) {
+    return;
+  }
+  try {
+    const KEY = "route-chunk-reload-ts";
+    const last = Number(sessionStorage.getItem(KEY) || 0);
+    if (Date.now() - last > 10000) {
+      sessionStorage.setItem(KEY, String(Date.now()));
+      globalThis.location.reload();
+    }
+  } catch {
+    // sessionStorage unavailable (private mode, etc.) — skip the auto-reload
+    // and let the manual fallback handle recovery.
+  }
+}
+
+// Shown when a lazy route chunk fails to load (a transient network/CDN blip, or
+// a stale hashed asset after a deploy). lazyPlugin/lazyNamed rethrow such
+// failures; without a boundary React would unmount the tree to a blank screen.
+// Reloading re-fetches the chunk, so that is the offered recovery.
+export function RouteLoadError() {
+  return (
+    <Result
+      status="warning"
+      title="Couldn't load this page"
+      subTitle="Part of the app failed to load — this is usually a temporary network issue. Reloading should fix it."
+      extra={
+        <Button type="primary" onClick={() => globalThis.location.reload()}>
+          Reload
+        </Button>
+      }
+    />
+  );
+}
+
+// Renders the routed page (<Outlet/>) inside a CONTENT-SCOPED Suspense and a
+// navigation-resettable ErrorBoundary. Use it inside a persistent layout in
+// place of a bare <Outlet/> so the shell (sidebar/topnav) stays mounted:
+// per-page load spinners and chunk-load failures are confined to the content
+// area, and navigating away (the shell nav stays interactive) recovers without
+// a full reload. The app-wide boundary in Router.jsx remains the backstop for
+// shell-level failures and routes that don't use a layout.
+export function LazyOutlet() {
+  const location = useLocation();
+  return (
+    <ErrorBoundary
+      resetKeys={[location.pathname]}
+      onError={handleRouteError}
+      fallbackComponent={<RouteLoadError />}
+    >
+      <Suspense fallback={<GenericLoader />}>
+        <Outlet />
+      </Suspense>
+    </ErrorBoundary>
+  );
+}

frontend/src/components/widgets/error-boundary/ErrorBoundary.jsx

@@ -4,6 +4,12 @@ import { Component } from "react";
 
 const { Text } = Typography;
 
+// Shallow element-wise compare; resetKeys are typically fresh arrays each
+// render (e.g. [location.pathname]), so a reference check would never match.
+function resetKeysChanged(prev = [], next = []) {
+  return prev.length !== next.length || prev.some((v, i) => v !== next[i]);
+}
+
 class ErrorBoundary extends Component {
   constructor(props) {
     super(props);
@@ -16,6 +22,18 @@ class ErrorBoundary extends Component {
     this.setState({ error });
   }
 
+  componentDidUpdate(prevProps) {
+    // Once a value in resetKeys changes (e.g. the user navigated), clear the
+    // error so the boundary re-renders its children — recovery without a
+    // full page reload.
+    if (
+      this.state.error &&
+      resetKeysChanged(prevProps.resetKeys, this.props.resetKeys)
+    ) {
+      this.setState({ error: undefined });
+    }
+  }
+
   render() {
     return this.state.error
       ? this.props.fallbackComponent
@@ -37,6 +55,12 @@ ErrorBoundary.propTypes = {
    * By default, it shows "There was an error" message
    */
   fallbackComponent: PropTypes.any,
+  /**
+   * When any value in this array changes while in the error state, the
+   * boundary resets and re-renders its children (e.g. [location.pathname]
+   * so navigation recovers without a reload).
+   */
+  resetKeys: PropTypes.array,
 };
 
 ErrorBoundary.defaultProps = {

frontend/src/helpers/lazyNamed.js

@@ -0,0 +1,23 @@
+import { lazy } from "react";
+
+// Lazy-load a module's NAMED export as a route component. React.lazy expects a
+// module with a `default` export, so this adapts `{ Foo }` to `{ default: Foo }`.
+// Use it to code-split route pages/layouts that use named exports without
+// repeating the `.then((m) => ({ default: m.X }))` boilerplate at every site.
+//
+// For DEFAULT-exported components, use `lazy(() => import(...))` directly.
+// For OPTIONAL enterprise plugins that may be absent in OSS, use `lazyPlugin`
+// (pluginRegistry.js) instead — it adds the missing-plugin NotFound fallback.
+export function lazyNamed(loader, exportName) {
+  return lazy(() =>
+    loader().then((m) => {
+      const component = m?.[exportName];
+      if (!component) {
+        // Fail loudly with the offending name instead of handing React.lazy
+        // `{ default: undefined }`, which surfaces as an opaque render error.
+        throw new Error(`lazyNamed: module has no export "${exportName}"`);
+      }
+      return { default: component };
+    }),
+  );
+}

frontend/src/helpers/pluginRegistry.js

@@ -0,0 +1,59 @@
+import { lazy } from "react";
+
+import { NotFound } from "../components/error/NotFound/NotFound.jsx";
+
+// The only error that means "this plugin was not shipped" is the build-time
+// stub vite.config.js's `optionalPluginImports` resolves a missing optional
+// plugin to: `throw new Error('Optional plugin not available')`. We match that
+// exact signal and nothing else.
+//
+// We deliberately do NOT reuse the broader `isModuleMissing` here: it also
+// matches "Failed to fetch dynamically imported module", which is a TRANSIENT
+// chunk-load failure of a plugin that IS shipped (CDN/origin blip, stale hashed
+// asset). Treating that as "absent" would silently render NotFound for a real,
+// momentarily-unreachable route instead of surfacing the failure.
+function isPluginAbsent(err) {
+  return (err?.message || "").includes("Optional plugin not available");
+}
+
+// Wrap an enterprise plugin's dynamic import as a lazy route element. The
+// plugin chunk is fetched only when the element actually renders (i.e. on
+// navigation to its route), so plugins are never pulled onto the
+// unauthenticated /landing page — which is the whole point of this change.
+//
+// The import thunk is written at the call site so the literal `../plugins/...`
+// path stays statically analyzable: only entrypoints a route actually
+// references enter the build graph (an unreferenced/broken plugin file can't
+// fail the build), and vite.config.js's `optionalPluginImports` can resolve
+// the path to its stub in OSS builds.
+//
+// Registration is unconditional. In OSS the stub makes the import reject, which
+// we map to the app's NotFound page so the route harmlessly 404s — the same
+// user-visible result as the previous "route not registered" branch. Any other
+// failure (incl. a transient chunk-load error of a shipped plugin) is re-thrown
+// so it surfaces instead of being silently swallowed.
+export function lazyPlugin(loader, exportName = "default") {
+  return lazy(() =>
+    loader()
+      .then((m) => {
+        const component = m[exportName] ?? m.default;
+        if (!component) {
+          // The plugin loaded but the expected export is gone (renamed/
+          // removed). Fail loudly with the offending name instead of handing
+          // React.lazy `{ default: undefined }`. isPluginAbsent won't match
+          // this message, so it re-throws to the ErrorBoundary rather than
+          // masquerading as an absent plugin.
+          throw new Error(
+            `lazyPlugin: module loaded but has no export "${exportName}" (or default)`,
+          );
+        }
+        return { default: component };
+      })
+      .catch((err) => {
+        if (isPluginAbsent(err)) {
+          return { default: NotFound };
+        }
+        throw err;
+      }),
+  );
+}

frontend/src/layouts/fullpage-payout/FullPageLayout.jsx

@@ -1,11 +1,12 @@
 import { Layout } from "antd";
-import { Outlet } from "react-router-dom";
 import "./FullPageLayout.css";
 
+import { LazyOutlet } from "../../components/error/LazyOutlet/LazyOutlet.jsx";
+
 function FullPageLayout() {
   return (
     <Layout className="container">
-      <Outlet />
+      <LazyOutlet />
     </Layout>
   );
 }

frontend/src/layouts/page-layout/PageLayout.jsx

@@ -1,9 +1,9 @@
 import { Layout } from "antd";
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
-import { Outlet } from "react-router-dom";
 import "./PageLayout.css";
 
+import { LazyOutlet } from "../../components/error/LazyOutlet/LazyOutlet.jsx";
 import { DisplayLogsAndNotifications } from "../../components/logs-and-notifications/DisplayLogsAndNotifications.jsx";
 import SideNavBar from "../../components/navigations/side-nav-bar/SideNavBar.jsx";
 import { TopNavBar } from "../../components/navigations/top-nav-bar/TopNavBar.jsx";
@@ -57,7 +57,7 @@ function PageLayout({
         )}
         <Layout>
           {MarketplacePendingBanner && <MarketplacePendingBanner />}
-          <Outlet />
+          <LazyOutlet />
           {!hideSidebar && <div className="height-40" />}
           {showLogsAndNotifications && <DisplayLogsAndNotifications />}
         </Layout>