Script-ordering bug: `rpc is not defined` in refreshStats / loadDatabases (and any other component that calls rpc()) #24

New issue

Open

opened 2026-04-30 06:34:05 +00:00 by sameh-farouk · 0 comments

sameh-farouk commented

2026-04-30 06:34:05 +00:00

Member

Symptom

Opening /hero_db/ui (e.g. through hero_os): browser console immediately throws

Error refreshing stats: ReferenceError: rpc is not defined
    at refreshStats (...:170:26)

Error loading databases: ReferenceError: rpc is not defined
    at loadDatabases (...:270:26)

Stats card stays empty, database list never populates.

Root cause

In crates/hero_db_ui/templates/base.html the <script> that defines rpc() sits at line ~132, which is after {% block content %} (line 124). Child components (stats_card.html, database_manager.html, ...) inject their <script> blocks via {% block content %} and each one calls rpc(...) immediately at the bottom of its own block:

// stats_card.html
async function refreshStats() { ...rpc(...)... }
refreshStats();                      // ← runs NOW
setInterval(refreshStats, 10000);

// database_manager.html
async function loadDatabases() { ...rpc(...)... }
loadDatabases();                     // ← also runs NOW
setInterval(loadDatabases, 15000);

In the rendered HTML, those component scripts appear at lines ~168–351. The rpc() definition appears at line ~4291. JS function declarations do not hoist across <script> blocks, so when the early scripts call rpc(...), it doesn't exist yet → ReferenceError.

Fix

Move the <script> block that defines rpc() (and the getSelectedDb() helper next to it, lines ~130–155 of base.html) to before {% block content %} — either inside <head> or at the top of <body> before the content block is rendered. Single move, ~15 lines.

No dependencies on the DOM in rpc() itself, so head-level placement is safe.

Alternative (not recommended)

Wrap each component's bare bottom-of-script call (refreshStats();, loadDatabases();) in a DOMContentLoaded handler. Works, but touches 7+ component templates; one base.html move is cleaner.

Verification path

Open /hero_db/ui standalone (not via hero_os) and confirm same console errors before fix.
After move: stats refresh on load, database list populates, no ReferenceError in console.

## Symptom Opening `/hero_db/ui` (e.g. through hero_os): browser console immediately throws ``` Error refreshing stats: ReferenceError: rpc is not defined at refreshStats (...:170:26) Error loading databases: ReferenceError: rpc is not defined at loadDatabases (...:270:26) ``` Stats card stays empty, database list never populates. ## Root cause In `crates/hero_db_ui/templates/base.html` the `<script>` that defines `rpc()` sits at **line ~132**, which is *after* `{% block content %}` (line 124). Child components (`stats_card.html`, `database_manager.html`, ...) inject their `<script>` blocks via `{% block content %}` and each one calls `rpc(...)` *immediately* at the bottom of its own block: ```js // stats_card.html async function refreshStats() { ...rpc(...)... } refreshStats(); // ← runs NOW setInterval(refreshStats, 10000); // database_manager.html async function loadDatabases() { ...rpc(...)... } loadDatabases(); // ← also runs NOW setInterval(loadDatabases, 15000); ``` In the rendered HTML, those component scripts appear at lines ~168–351. The `rpc()` definition appears at line ~4291. JS function declarations do **not** hoist across `<script>` blocks, so when the early scripts call `rpc(...)`, it doesn't exist yet → `ReferenceError`. ## Fix Move the `<script>` block that defines `rpc()` (and the `getSelectedDb()` helper next to it, lines ~130–155 of `base.html`) to **before** `{% block content %}` — either inside `<head>` or at the top of `<body>` before the content block is rendered. Single move, ~15 lines. No dependencies on the DOM in `rpc()` itself, so head-level placement is safe. ## Alternative (not recommended) Wrap each component's bare bottom-of-script call (`refreshStats();`, `loadDatabases();`) in a `DOMContentLoaded` handler. Works, but touches 7+ component templates; one base.html move is cleaner. ## Verification path - Open `/hero_db/ui` standalone (not via hero_os) and confirm same console errors before fix. - After move: stats refresh on load, database list populates, no `ReferenceError` in console.