fix: prevent header toggle race condition causing DNR rules desync

Author: Kirill Lebedenko

src/entities/is-paused/model.ts

@@ -19,7 +19,10 @@ export const $isPaused = createStore<boolean>(false)
   .on(toggleIsPaused, state => !state)
   .on(loadIsPausedFromStorageFx.doneData, (_, isPaused) => Boolean(isPaused));
 
+// Save isPaused only on explicit user action (toggleIsPaused), not on initial load from storage.
+// This prevents a save→onChanged→apply cycle when loading from storage.
 sample({
+  clock: toggleIsPaused,
   source: $isPaused,
   target: saveIsPausedToStorageFx,
 });

src/entities/request-profile/model/selected-request-profile.ts

@@ -14,6 +14,13 @@ export const $selectedRequestProfile = createStore<string>('').on(
 
 const loadSelectedProfileFromStorageFx = createEffect(loadSelectedProfileFromStorageApi);
 
-sample({ source: $selectedRequestProfile, target: saveSelectedProfileToBrowserFx });
+// Save selected profile only on explicit user action, not on initial load from storage.
+// This prevents a save→onChanged→apply cycle when loading from storage.
+sample({
+  clock: selectedRequestProfileIdChanged,
+  source: $selectedRequestProfile,
+  target: saveSelectedProfileToBrowserFx,
+});
+
 sample({ clock: loadSelectedProfileFromStorage, target: loadSelectedProfileFromStorageFx });
 sample({ clock: loadSelectedProfileFromStorageFx.doneData, target: $selectedRequestProfile });

src/shared/utils/headersConfigMeta.ts

@@ -29,25 +29,47 @@ function normalizeMeta(value: unknown): HeadersConfigMeta {
   return { seq: 0, updatedAt: 0 };
 }
 
-export async function bumpHeadersConfigMeta(): Promise<HeadersConfigMeta> {
+/**
+ * Queue to serialize storage writes and prevent race conditions.
+ * Without this queue, rapid toggles can cause:
+ * 1. Multiple concurrent reads of the same `seq` value
+ * 2. Multiple writes with the same incremented `seq`
+ * 3. Background script skipping updates because `isNewerMeta` returns false
+ */
+let writeQueue: Promise<void> = Promise.resolve();
+
+async function bumpHeadersConfigMeta(): Promise<HeadersConfigMeta> {
   const current = await browser.storage.local.get([BrowserStorageKey.HeadersConfigMeta]);
   const prev = normalizeMeta(current[BrowserStorageKey.HeadersConfigMeta]);
 
   // Ensure monotonicity even if system clock moves backwards or updates are very close.
   const now = Date.now();
   const nextUpdatedAt = Math.max(now, prev.updatedAt + 1);
 
-  // Best-effort monotonic seq. It can race across concurrent writers; updatedAt remains authoritative.
+  // Monotonic seq - now guaranteed by queue serialization.
   const nextSeq = prev.seq + 1;
 
   return { seq: nextSeq, updatedAt: nextUpdatedAt };
 }
 
 export async function setWithBumpedHeadersConfigMeta(patch: Record<string, unknown>) {
-  const meta = await bumpHeadersConfigMeta();
-  await browser.storage.local.set({
-    ...patch,
-    [BrowserStorageKey.HeadersConfigMeta]: meta,
+  // Chain this write operation onto the queue to ensure serialization.
+  // This prevents race conditions where concurrent calls read the same `seq`
+  // and write the same incremented value.
+  const result = writeQueue.then(async () => {
+    const meta = await bumpHeadersConfigMeta();
+    await browser.storage.local.set({
+      ...patch,
+      [BrowserStorageKey.HeadersConfigMeta]: meta,
+    });
+    return meta;
   });
-  return meta;
+
+  // Update queue to wait for this operation (ignore errors for queue chaining)
+  writeQueue = result.then(
+    () => {},
+    () => {},
+  );
+
+  return result;
 }

tests/e2e/fixtures.ts

@@ -22,11 +22,11 @@ export const test = base.extend<{
   },
   extensionId: async ({ context }, use) => {
     // Даем время расширению на инициализацию
-    await new Promise(resolve => setTimeout(resolve, 3000));
+    await new Promise(resolve => setTimeout(resolve, 5000));
 
     let background;
     let attempts = 0;
-    const maxAttempts = 10;
+    const maxAttempts = 15;
 
     // Пытаемся получить service worker с повторными попытками
     while (attempts < maxAttempts) {
@@ -37,13 +37,13 @@ export const test = base.extend<{
       }
 
       try {
-        background = await context.waitForEvent('serviceworker', { timeout: 3000 });
+        background = await context.waitForEvent('serviceworker', { timeout: 5000 });
         break;
       } catch {
         attempts++;
         if (attempts < maxAttempts) {
           // Ждем немного перед следующей попыткой
-          await new Promise(resolve => setTimeout(resolve, 500));
+          await new Promise(resolve => setTimeout(resolve, 1000));
         }
       }
     }

tests/e2e/header-toggle-dnr.spec.ts

@@ -36,7 +36,7 @@ test.describe('Header Toggle DNR Rules', () => {
   async function waitForRulesCount(
     context: ReturnType<typeof test.extend>['context'],
     expectedCount: number,
-    timeout = 5000,
+    timeout = 10000,
   ) {
     const startTime = Date.now();
     while (Date.now() - startTime < timeout) {
@@ -88,6 +88,9 @@ test.describe('Header Toggle DNR Rules', () => {
     await headerNameField.fill('X-Toggle-Test');
     await headerValueField.fill('toggle-value');
 
+    // Даём время на сохранение и применение DNR правил
+    await page.waitForTimeout(1000);
+
     // Шаг 3: Проверяем, что DNR правило создано
     await waitForRulesCount(context, initialRulesCount + 1);
     const rulesAfterAdd = await getDynamicRules(context);
@@ -144,6 +147,9 @@ test.describe('Header Toggle DNR Rules', () => {
     await headerNameField.fill('X-Multi-Toggle');
     await headerValueField.fill('multi-toggle-value');
 
+    // Даём время на сохранение и применение DNR правил
+    await page.waitForTimeout(1000);
+
     // Ждём создания правила
     await waitForRulesCount(context, initialRulesCount + 1);
 
@@ -198,6 +204,9 @@ test.describe('Header Toggle DNR Rules', () => {
     await headerNameField.fill('X-Rapid-Toggle');
     await headerValueField.fill('rapid-value');
 
+    // Даём время на сохранение и применение DNR правил
+    await page.waitForTimeout(1000);
+
     // Ждём создания правила
     await waitForRulesCount(context, initialRulesCount + 1);
 
@@ -259,6 +268,9 @@ test.describe('Header Toggle DNR Rules', () => {
     await headerNameField.fill('X-Value-Change');
     await headerValueField.fill('initial-value');
 
+    // Даём время на сохранение и применение DNR правил
+    await page.waitForTimeout(1000);
+
     // Ждём создания правила
     await waitForRulesCount(context, initialRulesCount + 1);