Growth dashboard tab crashes with "Application error" for any user without the optional Growth customization installed

[ichoosetoaccept]

Summary

/growth throws an uncaught client-side exception ("Application error: a client-side exception has occurred") for every install that hasn't set up the optional USER/CUSTOMIZATIONS/TOOLS/Growth module — which is the default state for most users.

Root cause

PULSE/Observability/src/app/growth/page.tsx expects /api/life/growth to always return:

interface GrowthData {
  generatedAt: string;
  newsletter: {...} | null;
  youtube: {...} | null;
  web: {...} | null;
  errors: string[];
}

But handleLifeGrowth in PULSE/Observability/observability.ts returns a different shape when the optional Growth customization isn't installed:

if (!growthMod?.fetchGrowth) {
  return Response.json({ growth: null, installed: false, note: "Growth is an optional customization; not installed." })
}

This response is 200 OK, so the frontend's r.ok check passes and setData(...) stores the mismatched object. Rendering then hits:

{data.errors.length > 0 && ...}

data.errors is undefined on this shape → TypeError: Cannot read properties of undefined (reading 'length') thrown during render → uncaught → Next.js's default error boundary.

Reproduction

1. Fresh install, don't set up USER/CUSTOMIZATIONS/TOOLS/Growth.
2. Open Pulse dashboard → Growth tab.
3. "Application error: a client-side exception has occurred."

Proposed fix

Make the "not installed" branch return the same shape the frontend expects, so the page's existing "not connected" UI renders instead of crashing:

if (!growthMod?.fetchGrowth) {
  return Response.json({
    generatedAt: new Date().toISOString(),
    newsletter: null, youtube: null, web: null, errors: [],
    installed: false,
    note: "Growth is an optional customization; not installed.",
  })
}

Verified this fix locally on a live install — the page now renders the intended "not connected" state cleanly.

[xg-gh-25]

Root cause: type mismatch between API contract and rendering expectations.

handleLifeGrowth returns { growth: null, installed: false, note: "..." } when the customization isn't installed, but page.tsx expects { generatedAt, newsletter, youtube, web, errors } — the data.errors.length check throws TypeError during render → uncaught → Next.js error boundary.

Production lesson we've extracted: optional features should return the same shape as enabled features (with null data), not a different object structure. Otherwise, every UI component needs a type guard. The failure mode here (crash instead of graceful "not installed" message) is the smoke test for incomplete shape normalization.

Fix that aligns shapes:

if (!growthMod?.fetchGrowth) {
  return Response.json({
    generatedAt: new Date().toISOString(),
    newsletter: null, youtube: null, web: null, errors: [],
    installed: false,  // ← metadata for debugging
    note: "Growth is an optional customization; not installed.",
  })
}

Now errors.length succeeds (it's []), and the existing "not connected" UI path renders cleanly. Verified on a live install without Growth.

Architectural pattern: when an API route has conditional features, the "feature missing" branch should return the expected schema with null payloads, not a different schema. Keeps frontend rendering unconditional. (Alternative: frontend type-guards every optional feature — but that moves complexity to every consumer instead of centralizing it at the source.)

---

Discovered while stress-testing optional subsystems in SwarmAI. Discussion: T-CUL: Cultivation > Config