Fix #369: restart the web build's graphics after a lost device or context

When the browser dropped the page's WebGPU device or WebGL context, the
editor kept running but nothing it drew reached the screen: Chrome and
WebKit showed a frozen, stale canvas and Firefox a blank page, while
edits and Save went on.

- ui-egui: new `graphics` module. `GraphicsLoss` carries a loss report
  from any thread (wgpu's device-lost callback, the canvas's
  `webglcontextlost` event) to the UI thread. `VectorcraftApp::
  graphics_lost` writes Data Recovery copies of the modified documents at
  once. The app now notices when the host hands it a new egui context and
  uploads everything again (fonts and theme, the canvas, place cursor
  thumbnails); every per-thread texture cache (layer, symbol, swatch,
  style, asset and glyph thumbnails, previews, font samples, Navigator,
  Flattener Preview) is a `TexCache` that empties for a new context.
  Without this, the moved app drew stale or wrong textures and egui
  panicked on its missing font families.
- web: the shell watches both loss signals; on a loss it puts a fresh
  canvas in place of the dead one and starts the same `WebRunner` again,
  handing over the same app (documents, undo, panels), with services made
  for the new context and a status-bar note. If no new graphics can be had
  (or after three losses) it removes the stale canvas, lets go of the
  recovery copies and says to reload.
- engine: `recovery::leave` lets go of a session's area but keeps its
  copies, so the reloaded page offers them at once instead of after the
  heartbeat goes stale.
- desktop: eframe can't give a window a new device, so a lost device
  (driver reset) is logged, the copies are written and the status bar says
  to save and restart; closing then skips the Save Changes question it
  can't show.
- Tests: loss reporting across threads, `TexCache` emptying, the app
  uploading the canvas, a cached preview, theme and fonts again in a new
  context (fails without the fix), copies written on loss, and
  `recovery::leave` offering copies at once with both lock and heartbeat
  stores. docs/development.md (web section) and ROADMAP updated.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/vectorcraft-web/src/web.rs

@@ -1,12 +1,14 @@
-//! The browser shell: web `Services`, drag-and-drop, and the eframe web runner.
+//! The browser shell: web `Services`, drag-and-drop, the eframe web runner, and starting again
+//! with new graphics when the page loses them (#369).
 
-use std::cell::Cell;
+use std::cell::{Cell, RefCell};
 use std::rc::Rc;
 use std::sync::{Arc, Mutex};
 
 use vectorcraft_engine::Session;
 use vectorcraft_engine::cmd::fileio;
-use vectorcraft_engine::cmd::recovery::{Hold, RecoveryStore};
+use vectorcraft_engine::cmd::recovery::{self, Hold, RecoveryStore};
+use vectorcraft_ui_egui::graphics::GraphicsLoss;
 use vectorcraft_ui_egui::place::{DropTarget, PlaceArrival, PlaceInbox};
 use vectorcraft_ui_egui::print::{PrintJob, PrintService, Printer};
 use vectorcraft_ui_egui::{Services, VectorcraftApp};
@@ -23,58 +25,123 @@ type DragPos = Rc<Cell<Option<(f32, f32, bool)>>>;
 const CANVAS_ID: &str = "vectorcraft_canvas";
 const LOADING_ID: &str = "vectorcraft_loading";
 
+/// How many times the page starts again with new graphics after losing them before it gives up
+/// (a GPU that keeps failing).
+const MAX_RESTARTS: u32 = 3;
+
+/// What the page keeps while the app runs, across graphics restarts.
+#[derive(Clone)]
+struct Host {
+    runner: eframe::WebRunner,
+    inbox: Inbox,
+    place_inbox: PlaceInbox,
+    drag: DragPos,
+    /// The page's Web Locks for Data Recovery, started once before the first frame: a graphics
+    /// restart keeps them, so the tab stays the owner of its recovery area.
+    locks: Option<WebLocks>,
+    /// Graphics restarts so far.
+    restarts: u32,
+}
+
 pub fn start() {
     eframe::WebLogger::init(log::LevelFilter::Info).ok();
-    wasm_bindgen_futures::spawn_local(async {
-        let Some(document) = web_sys::window().and_then(|w| w.document()) else {
-            log::error!("no document");
-            return;
-        };
-        let Some(canvas) = document.get_element_by_id(CANVAS_ID).and_then(|e| e.dyn_into::<web_sys::HtmlCanvasElement>().ok()) else {
-            log::error!("missing <canvas id=\"{CANVAS_ID}\">");
-            return;
-        };
-        let drag = track_drag(&canvas);
+    let Some(canvas) = element(CANVAS_ID).and_then(|e| e.dyn_into::<web_sys::HtmlCanvasElement>().ok()) else {
+        log::error!("missing <canvas id=\"{CANVAS_ID}\">");
+        return;
+    };
+    wasm_bindgen_futures::spawn_local(async move {
         // Before the first frame, which looks for copies a crash left behind.
         let locks = WebLocks::start(RECOVERY_PREFIX).await;
-        let mut options = eframe::WebOptions::default();
-        if query().contains("webgl")
-            && let eframe::egui_wgpu::WgpuSetup::CreateNew(create) = &mut options.wgpu_options.wgpu_setup
-        {
-            create.instance_descriptor.backends = eframe::wgpu::Backends::GL;
-        }
-        let result = eframe::WebRunner::new()
-            .start(
-                canvas,
-                options,
-                Box::new(move |cc| {
-                    if let Some(rs) = &cc.wgpu_render_state {
-                        log::info!("vectorcraft-web: wgpu backend {:?}", rs.adapter.get_info().backend);
+        let host = Host {
+            runner: eframe::WebRunner::new(),
+            inbox: Arc::default(),
+            place_inbox: Arc::default(),
+            drag: DragPos::default(),
+            locks,
+            restarts: 0,
+        };
+        run(host, canvas, None).await;
+    });
+}
+
+/// An app whose graphics were lost, on its way to new ones.
+struct Moving {
+    app: VectorcraftApp,
+    /// Its unsaved changes are kept in recovery copies ([`VectorcraftApp::graphics_lost`]).
+    kept: bool,
+}
+
+/// Run the app on `canvas`: the `moving` one when starting again after losing the graphics, else
+/// a new one.
+async fn run(host: Host, canvas: web_sys::HtmlCanvasElement, moving: Option<Moving>) {
+    track_drag(&canvas, &host.drag);
+    let kept = moving.as_ref().map(|m| m.kept);
+    // The app until the new runner takes it (still here if starting fails before).
+    let slot = Rc::new(RefCell::new(moving.map(|m| m.app)));
+    let (runner, taken, page) = (host.runner.clone(), slot.clone(), canvas.clone());
+    let result = runner
+        .start(
+            canvas,
+            web_options(),
+            Box::new(move |cc| {
+                let ctx = &cc.egui_ctx;
+                let loss = GraphicsLoss::default();
+                watch_canvas(&page, &loss, ctx);
+                if let Some(rs) = &cc.wgpu_render_state {
+                    log::info!("vectorcraft-web: wgpu backend {:?}", rs.adapter.get_info().backend);
+                    let (loss, ctx) = (loss.clone(), ctx.clone());
+                    rs.device.set_device_lost_callback(move |reason, msg| loss.report(&ctx, format!("{reason:?}: {msg}")));
+                }
+                let services = services(host.inbox.clone(), host.place_inbox.clone(), ctx.clone(), host.locks.clone());
+                let app = match taken.borrow_mut().take() {
+                    Some(mut app) => {
+                        // The old services asked the old context for frames.
+                        app.services = services;
+                        app.status("The graphics were lost and have been restarted");
+                        app
                     }
-                    let inbox: Inbox = Arc::default();
-                    let place_inbox: PlaceInbox = Arc::default();
-                    let app = VectorcraftApp::new(Session::new(), services(inbox.clone(), place_inbox.clone(), cc.egui_ctx.clone(), locks));
-                    Ok(Box::new(WebShell { app, inbox, place_inbox, drag }))
-                }),
-            )
-            .await;
-        if let Some(el) = document.get_element_by_id(LOADING_ID) {
-            match result {
-                Ok(()) => el.remove(),
-                Err(e) => el.set_inner_html(&format!("<p>VectorCraft failed to start: {e:?}</p><p>A browser with WebGPU or WebGL2 is required.</p>")),
+                    None => VectorcraftApp::new(Session::new(), services),
+                };
+                Ok(Box::new(WebShell { app: Some(app), host, canvas: page, loss }))
+            }),
+        )
+        .await;
+    match (result, kept) {
+        (Ok(()), _) => {
+            if let Some(el) = element(LOADING_ID) {
+                el.remove();
             }
         }
-    });
+        (Err(e), None) => notice(&[&format!("VectorCraft failed to start: {}", js_err(e)), "A browser with WebGPU or WebGL2 is required."]),
+        (Err(e), Some(kept)) => {
+            log::error!("vectorcraft-web: couldn't restart the graphics: {}", js_err(e));
+            give_up(slot.borrow_mut().take(), kept);
+        }
+    }
+}
+
+/// The runner's options: wgpu (WebGPU where available, else WebGL2; `?webgl` forces WebGL2).
+fn web_options() -> eframe::WebOptions {
+    let mut options = eframe::WebOptions::default();
+    if query().contains("webgl")
+        && let eframe::egui_wgpu::WgpuSetup::CreateNew(create) = &mut options.wgpu_options.wgpu_setup
+    {
+        create.instance_descriptor.backends = eframe::wgpu::Backends::GL;
+    }
+    options
 }
 
 fn query() -> String {
     web_sys::window().and_then(|w| w.location().search().ok()).unwrap_or_default()
 }
 
-/// Follow file drags over the canvas: drag events carry the pointer position, which egui doesn't
-/// get during a drag.
-fn track_drag(canvas: &web_sys::HtmlCanvasElement) -> DragPos {
-    let pos = DragPos::default();
+fn element(id: &str) -> Option<web_sys::Element> {
+    web_sys::window()?.document()?.get_element_by_id(id)
+}
+
+/// Follow file drags over `canvas` into `pos`: drag events carry the pointer position, which egui
+/// doesn't get during a drag.
+fn track_drag(canvas: &web_sys::HtmlCanvasElement, pos: &DragPos) {
     let p = pos.clone();
     let on_drag = wasm_bindgen::closure::Closure::<dyn FnMut(web_sys::DragEvent)>::new(move |e: web_sys::DragEvent| {
         p.set(Some((e.offset_x() as f32, e.offset_y() as f32, e.shift_key())));
@@ -84,29 +151,123 @@ fn track_drag(canvas: &web_sys::HtmlCanvasElement) -> DragPos {
             log::error!("couldn't follow {kind} events: {e:?}");
         }
     }
-    // The listener lives as long as the page.
+    // The listener lives as long as the canvas.
     on_drag.forget();
-    pos
+}
+
+/// Report the loss of `canvas`'s WebGL context to `loss` (WebGPU devices report theirs through
+/// wgpu).
+fn watch_canvas(canvas: &web_sys::HtmlCanvasElement, loss: &GraphicsLoss, ctx: &egui::Context) {
+    let (loss, ctx) = (loss.clone(), ctx.clone());
+    let on_lost = wasm_bindgen::closure::Closure::<dyn FnMut(web_sys::Event)>::new(move |_: web_sys::Event| {
+        loss.report(&ctx, "the WebGL context was lost");
+    });
+    if let Err(e) = canvas.add_event_listener_with_callback("webglcontextlost", on_lost.as_ref().unchecked_ref()) {
+        log::error!("couldn't watch for a lost WebGL context: {e:?}");
+    }
+    // The listener lives as long as the canvas.
+    on_lost.forget();
+}
+
+/// A new canvas in place of `old`, whose graphics were lost (a canvas whose WebGL context is lost
+/// can't get another).
+fn fresh_canvas(old: &web_sys::HtmlCanvasElement) -> Result<web_sys::HtmlCanvasElement, String> {
+    let new: web_sys::HtmlCanvasElement = old.clone_node().map_err(js_err)?.dyn_into().map_err(|_| "not a canvas")?;
+    old.replace_with_with_node_1(&new).map_err(js_err)?;
+    Ok(new)
+}
+
+/// The graphics are lost for good: the dead canvas goes (it would show a stale picture), the app
+/// (if still here) lets go of its recovery copies so the reloaded page offers them at once, and
+/// the page says what to do.
+fn give_up(app: Option<VectorcraftApp>, kept: bool) {
+    if let Some(mut app) = app {
+        recovery::leave(&mut app.session);
+    }
+    if let Some(canvas) = element(CANVAS_ID) {
+        canvas.remove();
+    }
+    notice(&[
+        "The graphics were lost and couldn't be restarted.",
+        if kept {
+            "Your unsaved changes are kept in this browser: reload the page to get them back."
+        } else {
+            "Reload the page to go on (changes not saved yet may be lost)."
+        },
+    ]);
+}
+
+/// Show `lines` in the middle of the page (where the loading message was).
+fn notice(lines: &[&str]) {
+    let Some(document) = web_sys::window().and_then(|w| w.document()) else { return };
+    let el = match document.get_element_by_id(LOADING_ID) {
+        Some(el) => el,
+        None => {
+            let Ok(el) = document.create_element("div") else { return };
+            el.set_id(LOADING_ID);
+            let Some(body) = document.body() else { return };
+            if let Err(e) = body.append_child(&el) {
+                log::error!("couldn't show a message: {e:?}");
+            }
+            el
+        }
+    };
+    el.set_text_content(None);
+    for line in lines {
+        if let Ok(p) = document.create_element("p") {
+            p.set_text_content(Some(line));
+            // Best effort: the log has the message too.
+            el.append_child(&p).ok();
+        }
+    }
 }
 
 /// Wraps the app to read dropped files asynchronously (browsers can't read them synchronously)
 /// and feed them through the inboxes: placed where they were dropped on the canvas, else opened.
+/// When the graphics are lost it hands the app to a new runner on a new canvas.
 struct WebShell {
-    app: VectorcraftApp,
-    inbox: Inbox,
-    place_inbox: PlaceInbox,
-    drag: DragPos,
+    /// `None` once handed on.
+    app: Option<VectorcraftApp>,
+    host: Host,
+    canvas: web_sys::HtmlCanvasElement,
+    loss: GraphicsLoss,
+}
+
+impl WebShell {
+    /// The graphics were lost (`why`): keep recovery copies, then start again on a new canvas
+    /// with the same app once this frame is over (the runner is busy with it until then).
+    fn restart(&mut self, why: &str) {
+        let Some(mut app) = self.app.take() else { return };
+        let kept = app.graphics_lost(why);
+        let mut host = self.host.clone();
+        host.restarts += 1;
+        let canvas =
+            if host.restarts > MAX_RESTARTS { Err(format!("the graphics were lost {MAX_RESTARTS} times")) } else { fresh_canvas(&self.canvas) };
+        match canvas {
+            Ok(canvas) => wasm_bindgen_futures::spawn_local(run(host, canvas, Some(Moving { app, kept }))),
+            Err(e) => {
+                log::error!("vectorcraft-web: giving up on the graphics: {e}");
+                let runner = host.runner;
+                wasm_bindgen_futures::spawn_local(async move { runner.destroy() });
+                give_up(Some(app), kept);
+            }
+        }
+    }
 }
 
 impl eframe::App for WebShell {
     fn logic(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
+        if let Some(why) = self.loss.take() {
+            self.restart(&why);
+        }
+        let Some(app) = &mut self.app else { return };
         let dropped = ctx.input_mut(|i| std::mem::take(&mut i.raw.dropped_files));
         if !dropped.is_empty() {
-            let at = self.drag.take();
+            let at = self.host.drag.take();
             let z = ctx.zoom_factor();
-            let target = self.app.drop_target(at.map(|(x, y, _)| egui::pos2(x / z, y / z)), at.is_some_and(|a| a.2));
+            let target = app.drop_target(at.map(|(x, y, _)| egui::pos2(x / z, y / z)), at.is_some_and(|a| a.2));
             for f in dropped {
-                let (inbox, place_inbox, ctx) = (self.inbox.clone(), self.place_inbox.clone(), ctx.clone());
+                let (inbox, place_inbox, ctx) = (self.host.inbox.clone(), self.host.place_inbox.clone(), ctx.clone());
                 wasm_bindgen_futures::spawn_local(async move {
                     let name = f.path().file_name().map(|n| n.to_string_lossy().to_string()).unwrap_or_else(|| "dropped".into());
                     match f.bytes_async().await {
@@ -124,15 +285,19 @@ impl eframe::App for WebShell {
                 });
             }
         }
-        self.app.logic(ctx);
+        app.logic(ctx);
     }
 
     fn raw_input_hook(&mut self, _ctx: &egui::Context, raw: &mut egui::RawInput) {
-        self.app.raw_input_hook(raw);
+        if let Some(app) = &mut self.app {
+            app.raw_input_hook(raw);
+        }
     }
 
     fn ui(&mut self, ui: &mut egui::Ui, _frame: &mut eframe::Frame) {
-        self.app.ui(ui);
+        if let Some(app) = &mut self.app {
+            app.ui(ui);
+        }
     }
 }