fix(error-boundary): stop showing fatal UI for benign window errors

[dmnyc]

Summary

<svelte:window on:error={handleError} /> was catching native ErrorEvents but parsing them as CustomEvent.detail, so the real error was always lost and every spurious window error — including the ones iOS Safari fires during share / backgrounding / service-worker transitions — nuked the entire app with an "Oops! Something went wrong" screen.

Fix:

• Remove the svelte:window binding (it was redundant with the window.addEventListener('error', ...) in onMount, and its CustomEvent coercion was wrong).
• Align the window error listener with the existing unhandledrejection listener: log to console, don't replace the page.
• Preserve the programmatic CustomEvent-dispatch path for child components that want to surface a fallback deliberately.

Notes

• Stacked on Recipe editor UX: auto-save, add-by-URL, drag-reorder, markdown links #304 — merge that one first for a clean diff. Once Recipe editor UX: auto-save, add-by-URL, drag-reorder, markdown links #304 is in, this PR will collapse to a single commit touching src/components/ErrorBoundary.svelte.

Test plan

• On mobile Safari, open a recipe page → tap the browser share icon → use/cancel the share sheet → the page stays interactive (no "Oops!" screen).
• On desktop, manually throw new Error('test') in a setTimeout via devtools → console shows [ErrorBoundary] Window error (suppressed): ... and the app remains rendered.
• Unhandled promise rejections still log-only (existing behavior, unchanged).

[Copilot]

Pull request overview

Adjusts client error handling so benign window errors no longer trigger the fatal ErrorBoundary UI, while also bringing in several UX improvements stacked from #304.

Changes:

• Update ErrorBoundary to suppress fatal UI for native window errors (log-only) and remove the redundant/incorrect <svelte:window on:error> binding.
• Add recipe editor draft auto-save + URL stabilization, plus media add-by-URL and improved drag-reorder behavior.
• Ensure markdown preview links consistently open in a new tab and inline early logo visibility CSS to prevent dark-mode logo flash.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/components/ErrorBoundary.svelte	Stops showing fatal UI for native window errors; logs suppressed errors.
src/routes/create/+page.svelte	Adds debounced auto-save and avoids URL thrash while typing.
src/components/MediaUploader.svelte	Adds collapsible “add by URL” flow with validation.
src/components/StringComboBox.svelte	Fixes drag reorder to allow dropping after the last item and improves drop indicator UX.
src/lib/parser.ts	Forces markdown links to retain target/rel after sanitization.
src/app.html	Inlines early CSS for logo visibility to prevent theme flash.
src/components/Header.svelte	Adds logo-light / logo-dark marker classes for early CSS targeting.
src/components/DesktopSideNav.svelte	Adds logo-light / logo-dark marker classes for early CSS targeting.

Comments suppressed due to low confidence (1)

src/components/ErrorBoundary.svelte:39

• After removing <svelte:window on:error={handleError} />, handleError is no longer wired to any event source, and error is never set anywhere else. That makes the fallback UI effectively unreachable and also contradicts the comment about preserving a programmatic CustomEvent path. If you still want deliberate fallbacks, add an explicit listener for the intended CustomEvent source (e.g., a custom window event name, or on:error={handleError} on a wrapper/<slot on:error={...}> for bubbled CustomEvents) while keeping native ErrorEvents log-only.

  // Error handling function — only invoked for programmatically dispatched
  // CustomEvents (e.g. from child components that rethrow). Native window
  // `error` events are handled separately in onMount and are treated as
  // non-fatal (logged only), matching how unhandled rejections are handled.
  function handleError(event: Event) {
    const customEvent = event as CustomEvent;
    error = customEvent.detail?.error || new Error('Unknown error');
    errorInfo = customEvent.detail?.errorInfo;
    retryCount++;

    if (logErrors && error) {
      logError(error, 'ErrorBoundary', errorInfo);
    }

    // Dispatch error event for external monitoring
    dispatch('error', {
      error,
      errorInfo,
      retryCount,
      timestamp: Date.now()
    });
  }

---

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

[Copilot]

DOMPurify.addHook(...) is registered on the global DOMPurify instance at module load, which will affect all other DOMPurify.sanitize(...) calls in the app once parser.ts is imported (e.g., the longform editor also imports DOMPurify directly). Consider scoping this behavior to markdown sanitization by creating a dedicated DOMPurify instance for this module or by applying the attribute fix only to the sanitized markdown output, so unrelated sanitization paths aren’t forced to target=_blank.

[Copilot]

The URL add-section toggle button should expose its expanded/collapsed state to assistive tech. Add aria-expanded={urlSectionOpen} (and ideally aria-controls pointing at the collapsible region) so screen readers can understand the disclosure behavior.

[Copilot]

draftSignature is assigned in a reactive statement but never declared. In Svelte/TS this will fail compilation (and it’s referenced in onMount before any implicit declaration). Declare it explicitly (e.g., let draftSignature: string = '') before it’s used.