feat: compile error overlay by shruti2522 · Pull Request #78 · metacall/metassr

shruti2522 · 2026-02-24T17:05:04Z

Compile error overlay implementation in browser (like Next.js/Vite)

changes made:

resolved the segmentation fault where the sever crashed after encountering a syntax error, to make it possible to show the overlay
ensured overlay doesnt disappear on page reload
captured syntax error that existed before starting the server, not only the runtime errors
stripped the ANSI color codes for a cleaner display of the error messages
used Vec in error state to capture all error messages like next js

browser overlay:

hulxv

@fahdfady Need your review

hulxv · 2026-02-25T00:44:29Z

Resolve conflicts before making it ready for review

shruti2522 · 2026-02-25T11:26:26Z

ready for review @hulxv

shruti2522 · 2026-02-25T15:33:34Z

Hi @fahdfady @hulxv, I am trying to fix the CI, it seems there is some issue with the tests, can I make changes to the tests in the CI to fix it, maybe open a separate PR for this

fahdfady · 2026-03-01T18:55:27Z

Hi @fahdfady @hulxv, I am trying to fix the CI, it seems there is some issue with the tests, can I make changes to the tests in the CI to fix it, maybe open a separate PR for this

Hi @shruti2522 sorry for the late reply. we're working on it via #68 and we're investigating some problems in MetaCall's Windows and MacOS so don't worry.

Copilot

Pull request overview

Implements a browser compile-error overlay for dev mode by capturing build failures, broadcasting them over live-reload WebSocket, and persisting the last error across reloads.

Changes:

Added BuildError rebuild message + last_errors caching to forward build failures to the browser.
Implemented an in-browser overlay in the live-reload script to render build errors.
Added an initial build pass + ANSI-stripping to surface pre-existing compile errors more cleanly.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
metassr-cli/src/cli/dev.rs	Performs an initial build to capture errors early and logs errors with ANSI cleanup
metassr-cli/Cargo.toml	Adds dependencies needed for initial error capture/cleanup (`metassr-bundler`, `regex`)
crates/metassr-server/src/scripts/live-reload.js	Renders compile-error overlay and reacts to new `build_error` WS messages
crates/metassr-server/src/rebuilder.rs	Introduces `BuildError` events and caches last errors for overlay persistence
crates/metassr-server/src/live_reload.rs	Sends cached errors immediately on WS connect and includes `errors` in WS payload
crates/metassr-server/src/lib.rs	Wires `last_errors` into the live reload server construction
crates/metassr-server/Cargo.toml	Adds `regex` dependency used for ANSI stripping
crates/metassr-bundler/src/lib.rs	Captures bundler errors for consumption by dev server initial build path
crates/metassr-bundler/src/bundle.js	Normalizes bundler errors into resolved values so Rust can capture messages
TODO.md	Marks the compile error overlay task as complete
Cargo.toml	Adds workspace-level `regex` dependency

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-02T20:47:07Z

    out_dir: PathBuf,
    building_type: BuildingType,
    is_rebuilding: Arc<AtomicBool>,
+    pub last_errors: Arc<std::sync::Mutex<Option<Vec<String>>>>,


Making last_errors a public field exposes internal synchronization details (a Mutex<Option<Vec<String>>>) to consumers and makes it harder to evolve this type safely. Prefer keeping the field private and adding a small API (e.g., last_errors() returning an Arc<Mutex<...>>, or better: get_last_errors()/set_last_errors()/clear_last_errors() methods) so other modules don’t directly lock/mutate internals.

@shruti2522 what do you think? any arguments to make for using pub here?

It was the quickest way to expose the field to LiveReloadServer and dev.rs at the time, replaced it with proper accessor methods as suggested

Copilot · 2026-03-02T20:47:07Z

            let rebuilder = Arc::clone(&rebuilder);

            async move {
+                let ansi_regex = regex::Regex::new(r"\\u\{1b\}\[[0-9;]*m").unwrap();


The ANSI-stripping regex is compiled multiple times (and the pattern only targets the literal text \\u{1b} form, not the common raw ESC byte \\x1b). Consider centralizing ANSI stripping into a single helper (compile once) and using a more robust approach (e.g., a crate like strip-ansi-escapes, or a regex that handles both ESC and escaped forms) so logs/overlay consistently display clean messages.

Copilot · 2026-03-02T20:47:08Z

+                format!("Client build failed: {}", e)
+            };
+            // Clean up the error message for the terminal
+            let ansi_regex = Regex::new(r"\\u\{1b\}\[[0-9;]*m").unwrap();


The ANSI-stripping regex is compiled multiple times (and the pattern only targets the literal text \\u{1b} form, not the common raw ESC byte \\x1b). Consider centralizing ANSI stripping into a single helper (compile once) and using a more robust approach (e.g., a crate like strip-ansi-escapes, or a regex that handles both ESC and escaped forms) so logs/overlay consistently display clean messages.

Copilot · 2026-03-02T20:47:08Z

+            let stype = self.rebuilder.building_type();
+            if let Err(e) = ServerSideBuilder::new("", &out_dir, stype)?.build() {
+                let err_msg = format!("Server build failed: {}", e);
+                let ansi_regex = Regex::new(r"\\u\{1b\}\[[0-9;]*m").unwrap();


The ANSI-stripping regex is compiled multiple times (and the pattern only targets the literal text \\u{1b} form, not the common raw ESC byte \\x1b). Consider centralizing ANSI stripping into a single helper (compile once) and using a more robust approach (e.g., a crate like strip-ansi-escapes, or a regex that handles both ESC and escaped forms) so logs/overlay consistently display clean messages.

Copilot · 2026-03-02T20:47:08Z

+		// remove existing overlay on backdrop click
+		overlay.addEventListener('click', (e) => {
+			if (e.target === overlay) dismissErrorOverlay();
+		});
+


The hint says the overlay “can only be dismissed by fixing the error”, but the UI currently allows dismissing via backdrop click and the close button. Either remove/disable the dismiss behaviors to match the message, or update the hint text to reflect that users can manually dismiss the overlay.

Suggested change

// remove existing overlay on backdrop click

overlay.addEventListener('click', (e) => {

if (e.target === overlay) dismissErrorOverlay();

});

Copilot · 2026-03-02T20:47:09Z

+		});
+
+		const hint = document.createElement('p');
+		hint.textContent = 'This error occurred during the build process and can only be dismissed by fixing the error.';


The hint says the overlay “can only be dismissed by fixing the error”, but the UI currently allows dismissing via backdrop click and the close button. Either remove/disable the dismiss behaviors to match the message, or update the hint text to reflect that users can manually dismiss the overlay.

Suggested change

hint.textContent = 'This error occurred during the build process and can only be dismissed by fixing the error.';

hint.textContent = 'This error occurred during the build process. Fix the error to make this overlay disappear automatically, or close it manually to continue.';

Copilot · 2026-03-02T20:47:09Z

+                // Add a tiny delay to ensure the browser has attached the onmessage handler
+                tokio::time::sleep(std::time::Duration::from_millis(100)).await;


Introducing a fixed 100ms delay adds latency to showing the overlay on reload and is generally brittle. Since the client assigns onmessage synchronously right after creating the WebSocket, you can likely remove this sleep; if ordering is still a concern, a more robust pattern is an explicit client “ready” message before the server sends cached errors.

Suggested change

// Add a tiny delay to ensure the browser has attached the onmessage handler

tokio::time::sleep(std::time::Duration::from_millis(100)).await;

Copilot · 2026-03-02T20:47:09Z

+                let msg = res_str.replace("String(\"", "").replace("\")", "");
+                let msg = msg.replace("\\n", "\n");
+                *BUNDLING_ERROR.lock().unwrap() = Some(msg);


Bundling error detection/parsing currently depends on format!(\"{:?}\", result) and string surgery (e.g., stripping String(\"...\")), which is fragile and couples behavior to debug formatting. Prefer extracting the returned JS value as a real string/typed value (or returning Result from the bundling call) and propagating the error via the function return rather than a global BUNDLING_ERROR side channel.

Suggested change

let msg = res_str.replace("String(\"", "").replace("\")", "");

let msg = msg.replace("\\n", "\n");

*BUNDLING_ERROR.lock().unwrap() = Some(msg);

*BUNDLING_ERROR.lock().unwrap() = Some(res_str);

Copilot · 2026-03-02T20:47:09Z

+        let mut err_guard = BUNDLING_ERROR.lock().unwrap();
+        if let Some(err_msg) = err_guard.take() {
+            return Err(anyhow::anyhow!("{}", err_msg));
+        }


Bundling error detection/parsing currently depends on format!(\"{:?}\", result) and string surgery (e.g., stripping String(\"...\")), which is fragile and couples behavior to debug formatting. Prefer extracting the returned JS value as a real string/typed value (or returning Result from the bundling call) and propagating the error via the function return rather than a global BUNDLING_ERROR side channel.

Copilot · 2026-03-02T20:47:10Z

+			// strip ANSI escape codes from terminal output including Rust escaped format like \u{1b}[31m
+			const cleanMessage = (msg || '').replace(/(\\u(?:\{1b}|001b)|[\u001b\u009b])[[\]()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '');
+			pre.textContent = cleanMessage.replace('Client-side build failed: Bundling failed: "ERROR: Compilation errors:\n', '').replace('"\nFix the error and save the file — this overlay will disappear automatically.', '');


The overlay output strips very specific hard-coded prefixes/suffixes from the error string. This is brittle (small formatting changes will break it) and risks removing legitimate content that happens to match those substrings. Consider sending structured fields over WS (e.g., { stage: 'client', message: '...' }) or just render cleanMessage as-is and format via UI components rather than string slicing.

shruti2522 · 2026-03-09T21:32:02Z

Hi @fahdfady, any specific changes you would like me to make, I have resolved the previous reviews

hulxv requested changes Feb 25, 2026

View reviewed changes

Comment thread crates/metassr-bundler/src/bundle.js Outdated

Comment thread crates/metassr-server/src/scripts/live-reload.js Outdated

Comment thread crates/metassr-server/src/live_reload.rs Outdated

Comment thread tests/web-app/src/pages/home.tsx Outdated

shruti2522 force-pushed the feat/overlay branch 3 times, most recently from 2612e8d to a949147 Compare February 25, 2026 11:02

feat: compile error overlay

ddabc9a

shruti2522 force-pushed the feat/overlay branch from a949147 to ddabc9a Compare February 25, 2026 11:15

Merge branch 'metacall:master' into feat/overlay

5ef083f

shruti2522 marked this pull request as ready for review February 25, 2026 11:25

fahdfady requested review from fahdfady and hulxv February 25, 2026 11:48

Merge branch 'master' into feat/overlay

129875d

fahdfady reviewed Mar 2, 2026

View reviewed changes

Comment thread crates/metassr-bundler/src/bundle.js Outdated

fahdfady requested a review from Copilot March 2, 2026 20:39

Copilot AI reviewed Mar 2, 2026

View reviewed changes

Copilot started reviewing on behalf of fahdfady March 2, 2026 21:02 View session

shruti2522 and others added 2 commits March 5, 2026 21:23

fix overlay

5f9f372

Merge branch 'master' into feat/overlay

f086eee

	hint.textContent = 'This error occurred during the build process and can only be dismissed by fixing the error.';
	hint.textContent = 'This error occurred during the build process. Fix the error to make this overlay disappear automatically, or close it manually to continue.';

		// Add a tiny delay to ensure the browser has attached the onmessage handler
		tokio::time::sleep(std::time::Duration::from_millis(100)).await;

Conversation

shruti2522 commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hulxv left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hulxv commented Feb 25, 2026

Uh oh!

shruti2522 commented Feb 25, 2026

Uh oh!

shruti2522 commented Feb 25, 2026

Uh oh!

fahdfady commented Mar 1, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

fahdfady Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

shruti2522 Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

shruti2522 commented Mar 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

shruti2522 commented Feb 24, 2026 •

edited

Loading