Svelte 5 $derived.by Untracked Read Boundary Isolation

--- description: Svelte 5 $derived.by Untracked Read Boundary Isolation - Enforces strict isolation of telemetry, logging, and side-channel diagnostic state access inside Svelte 5 `$derived.by` computation blocks using `untrack()`. Failure to wrap non-computational reads registers unwanted reactive dependencies in Svelte's reactive graph, causing re-computation loops and memory leaks. globs: src/**/*.{svelte,svelte.ts,ts} alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/svelte5-derived-by-untracked-read-boundary" --- # Svelte 5 $derived.by Untracked Read Boundary Isolation > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Implicit Tracking of Telemetry and Diagnostics in $derived.by Blocks ## System Constraints You are a Principal Engineer enforcing Svelte 5 $derived.by Untracked Read Boundary invariants. Mandate the explicit decoupling of non-computational or diagnostic state via Svelte's `untrack` function within all derived runes. ## Strict Guidelines - Engineers MUST ALWAYS wrap reads of non-domain reactive sources (e.g., telemetry counters, session tracers, diagnostic sampling configs) in `untrack(() => ...)` when evaluated inside `$derived.by` closures. - Engineers MUST NOT execute impure side effects (e.g., telemetry emission, DOM mutations, async dispatches) inside `$derived.by` blocks; derived runes MUST remain pure projection functions. - Code SHOULD extract telemetry-annotated projections into pure mathematical operations, delegating tracking dispatches strictly to `$effect` or explicit event handlers. - Services MUST ensure diagnostic stores, tracing headers, and logger configurations expose un-proxied snapshots or use `untrack()` internally to prevent downstream reactive capture. - Components NEVER allow dynamic subscriptions to ambient diagnostic contexts inside `$derived.by` without an explicit tracking boundary. ## Bad vs Good Implementations ### Untracked Telemetry Read within Derived Computation #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Mutating and reading `metricsStore` inside `$derived.by` pollutes Svelte 5's reactive dependency graph. Reading `metricsStore.activeSamplingRate` makes `total` recompute on telemetry updates, while mutating `computationCount` produces invalid cyclic writes in derived signals. ```typescript import { metricsStore } from '$lib/telemetry'; interface OrderItem { price: number; quantity: number; } export class CartState { items = $state<OrderItem[]>([]); // BAD: Accessing metricsStore directly couples cart total calculation // to telemetry state changes, causing spurious recalculations. total = $derived.by(() => { metricsStore.computationCount += 1; const sampleRate = metricsStore.activeSamplingRate; const subtotal = this.items.reduce((acc, it) => acc + (it.price * it.quantity), 0); return subtotal * (1 + sampleRate.taxModifier); }); } ``` #### Production Standard (Correct) > **Standard**: Using `untrack()` creates an explicit boundary around `metricsStore`, ensuring the derived signal only depends on `items`. Computation metrics tracking is cleanly removed from the pure projection and moved out of the derived graph. ```typescript import { untrack } from 'svelte'; import { metricsStore } from '$lib/telemetry'; interface OrderItem { price: number; quantity: number; } export class CartState { items = $state<OrderItem[]>([]); // GOOD: Computation remains pure; diagnostic/telemetry reads are explicitly isolated. total = $derived.by(() => { const subtotal = this.items.reduce((acc, it) => acc + (it.price * it.quantity), 0); // Explicitly isolated read boundary: sampling rate changes won't trigger cart recalculation const taxModifier = untrack(() => metricsStore.activeSamplingRate.taxModifier); return subtotal * (1 + taxModifier); }); } ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Svelte 5 $derived.by Untracked Read Boundary Isolation

Svelte 5 $derived.by Untracked Read Boundary Isolation defines an industrial-grade behavioral standard for frontend engineering. Enforces strict isolation of telemetry, logging, and side-channel diagnostic state access inside Svelte 5 `$derived.by` computation blocks using `untrack()`. Failure to wrap non-computational reads registers unwanted reactive dependencies in Svelte's reactive graph, causing re-computation loops and memory leaks. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Implicit Tracking of Telemetry and Diagnostics in $derived.by Blocks Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Implicit Tracking of Telemetry and Diagnostics in $derived.by Blocks	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Engineers MUST ALWAYS wrap reads of non-domain reactive sources (e.g., telemetry counters, session tracers, diagnostic sampling configs) in `untrack(() => ...)` when evaluated inside `$derived.by` closures.

Engineers MUST ALWAYS wrap reads of non-domain reactive sources (e.g., telemetry counters, session tracers, diagnostic sampling configs) in `untrack(() => ...)` when evaluated inside `$derived.by` closures.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.