Pumapatay ng Tiwala ang mga Blank Screen. Mayroon Akong 31.

Nobyembre 1, 8:47 AM. Natanggap ko ang email.

"Hey Chandler - nag-click ako ng 'View' at nakakuha ng blank page. Nawala ba ang lahat ng interview data ko?"

Bumagsak ang sikmura ko. Ang mga blank pages ay hindi bugs. Sila ay mga trust killers.

Binuksan ko ang dev console. Tiningnan ang route. Agency user, tinitingnan ang client na "Acme Corp", nag-click ng button, at... nagbago ang URL mula `/clients/acme-corp/agents/agent-name/results/123` sa basta `/agent-name/results/123`.

Nawala ang client context. Hindi mahanap ng React Router ang route. Blank screen.

"Okay, isang bug lang iyan," sabi ko. "Aayusin ko at magpapatuloy."

Ini-setup ko si Claude Code para suriin ang codebase para sa mga katulad na pattern, tapos nagpatuloy ako sa aking Sabado kasama ang pamilya. Tanghalian. Mga errands. Mga bata. Ang usual.

Sa bandang hapon, bumalik ako at tininingnan. Nahanap ni Claude Code ang pattern — at hindi maganda.

Sa 7:42 PM, naka-fix na ako ng 14 bugs. Sa 7:48 PM, nahanap ang 8 pa. Sa 7:56 PM, umabot ang bilang sa 31 kabuuan.

Lahat pareho ang root cause. Lahat pareho ang fix. Lahat dahil nakalimutan ko ang isang bagay noong gumawa ako ng multi-tenancy: ang navigation ay hindi lang tungkol sa data, kundi tungkol sa context.

---

Ang Bug na Nagsimula sa Lahat

Ang sirang code:

```typescript
// AgentPage.tsx (SANITIZED - the broken pattern)
import { useParams, useNavigate } from 'react-router-dom';

export function AgentPage() {
  const { clientSlug } = useParams<{ clientSlug: string }>();
  const navigate = useNavigate();

  const handleViewResults = (sessionId: string) => {
    // Problem: Hardcoded route, no client context
    navigate(`/agent-name/results/${sessionId}`);
  };

  return (
    // ... component
  );
}
```

Nakita mo ba ang problema?

Na-extract ko ang `clientSlug` mula sa URL. Ginamit ko ito para mag-fetch ng data. Pero noong nag-navigate ako, ganap kong nakalimutan ito.

---

Ang Realization: Mayroon Akong 31 Nito

2:15 PM. Na-fix ko ang unang bug. Nag-commit. Maganda ang pakiramdam.

3:42 PM. Nakahanap ng isa pa sa ibang agent. Parehong pattern. Na-fix.

4:18 PM. Isa pang agent. Parehong bagay.

5:30 PM. Huminto ako at tumitig sa screen ko nang solid na 10 minuto.

Bawat agent page ay may parehong bug. Bawat nested component na nagna-navigate. Bawat shared UI element na may "Go to..." button.

Ang Fix: Context-Aware Navigation

Sa halip na `useParams()` sa bawat component, hiningi ko kay Claude Code na gumawa ng Context provider:

```typescript
// contexts/ClientContext.tsx
export function ClientContextProvider({ children }) {
  const { clientSlug } = useParams<{ clientSlug: string }>();
  return (
    <ClientContext.Provider value={{ clientSlug: clientSlug || null }}>
      {children}
    </ClientContext.Provider>
  );
}
```

At isang routing helper:

```typescript
// hooks/useContextRoute.ts
export function useContextRoute() {
  const { clientSlug } = useClientContext();

  const buildRoute = (route: string) => {
    if (clientSlug) {
      const cleanRoute = route.startsWith('/') ? route.slice(1) : route;
      return `/clients/${clientSlug}/${cleanRoute}`;
    }
    return route;
  };

  return { buildRoute, clientSlug };
}
```

Isang helper function. Context-aware. Gumagana para sa parehong uri ng user.

---

Ang Systematic Fix: Isang Araw, 31 Files

Nobyembre 1, 2025 - Ang Sprint

7:42 PM - Unang wave (14 bugs):

Na-refactor ang 6 agents. 14 files na nabago. +732 insertions, -164 deletions.

7:48 PM - Pangalawang wave (8 pang bugs):

Na-fix ang 8 navigation buttons. 1 file na nabago.

7:56 PM - Huling wave (9 pang bugs):

Na-fix ang natitirang navigation issues. 31 bugs sa buong application.

Kabuuang pinsala: 17 files na nabago, 849 insertions, 197 deletions.

Oras na ginugol: Mga 6 oras ng hindi tuluy-tuloy na trabaho kasama si Claude Code.

---

Ang Natutunan Ko (Sa Mahirap na Paraan)

1. Mas mahirap ang multi-tenant navigation kaysa sa data isolation

Maaari mong i-filter ang data gamit ang `org_id`. Madali lang iyon.

Pero ang navigation? Mayroon kang dalawang valid na URL structures para sa parehong feature:

```
SME:    /agent-name/session/123
Agency: /clients/acme-corp/agents/agent-name/session/123
```

2. Nagsisinungaling sa iyo ang useParams()

Gumagana ito... hanggang sa magbago ang route. Tapos nagiging `undefined` ang `clientSlug`.

Hindi nagsisinungaling ang React Context. Laging available, laging consistent.

3. Bilangin ang bawat bug bago mag-claim ng tagumpay

Akala ko 14 bugs ang mayroon ako. Tapos nakahanap ng 8 pa. Tapos 9 pa.

4. Kapag nahanap mo ang parehong bug dalawang beses, huminto at gumawa ng pattern

Individual fixing: 31 bugs = siguro isang linggo

Systematic fixing: Hanapin ang pattern → Gumawa ng helper → Ayusin ang lahat → 6 oras

5. Existential threats ang navigation bugs

Hindi pinapansin ng mga users ang iyong RLS policies o ang iyong multi-tenant architecture. Pinapansin nila na ang pag-click ng "View Results" ay nagpapakita ng results.

---

Ang mga Resulta

Bago Nobyembre 1:

- 31 navigation bugs na nagtatago

- 5+ bug reports bawat araw

- Kinukuwestiyon ng mga agency user ang stability ng platform

Pagkatapos ng Nobyembre 1:

- 0 navigation bugs

- 0 navigation-related support tickets

- Pattern na naka-establish para sa hinaharap na development

Ang 6 oras na ginugol ko sa pag-fix ng mga bugs na ito ay nagbayad ng 10x sa nabawasang support burden at naibaling na user confidence.

---

Bakit Ko Ito Binabanagi

Hindi sexy ang multi-tenant navigation. Walang nagdiriwang ng "nag-fix ng 31 bugs sa 6 oras" gaya ng pagdiriwang ng "nag-ship ng bagong feature."

Pero kung gumagawa ka ng multi-tenant SaaS, matatamaan mo ito. Siguro hindi 31 bugs. Siguro 5 lang. Pero matatamaan mo ito.

Kapag nangyari iyon, tandaan:

1. Context > Params para sa navigation state

2. Systematic > Individual fixes

3. I-grep ang buong codebase (mas marami ang mahahanap mo kaysa sa inaakala mo)

4. I-test sa lahat ng uri ng user bago mag-claim ng tagumpay

At kung nakita mong nakatingin ka sa isang blank screen na nagtataka kung saan napunta ang context mo, alamin mo na kasama mo ako sa ganitong sitwasyon. :)

Ano ang pinakamasakit na bug na na-ship mo sa tunay na users — yung uri na nalaman mo lang dahil may nagsabi sa iyo? Talagang gusto kong marinig.

Maraming salamat,

Chandler

Ang STRATUM architecture series: Ang navigation crisis na ito ay bahagi ng mas malaking multi-tenancy journey. Nagsimula ito sa pagbuo ng multi-tenancy sa Araw 2, lumala noong kinailangan kong i-rebuild ang buong schema sa Araw 67, at natapos noong natuklasan kong ang database ko ay tama pero 296x masyadong mabagal.

---

Nagco-code pa rin, natututo pa rin, naghahanap pa rin ng mga bugs na mga grupo ng 31.

Mag-request ng alpha access sa https://stratum.chandlernguyen.com/request-invitation