Skip to content

fix(network): defer optimistic dispatch in addImage to prevent React insertBefore crash - #1035

Open
Apiarry wants to merge 1 commit into
mainfrom
jinx/fix-add-image-optimistic-dispatch-race
Open

Apiarry wants to merge 1 commit into
mainfrom
jinx/fix-add-image-optimistic-dispatch-race

Conversation

@Apiarry

@Apiarry Apiarry commented Aug 27, 2026

Copy link
Copy Markdown
Collaborator

Problem

Sentry issue: DRIVE-APP-Q — 800+ events, Android / NL production users.

NotFoundError: Failed to execute 'insertBefore' on 'Node' crash in React DOM, triggered during image upload in the drive-app.

Root Cause

Inside addImage(), a synchronous dispatch() call fires an optimistic Redux state update (CREATED_ONE_IMAGE) before the first await. This collides with a setProcessedItems() call already in flight from useQueue.processItem(), causing two concurrent React 17 state updates that tear the render and crash the DOM reconciler.

useQueue.processItem()
  → setProcessedItems([...items, item])   ← setState #1
  → await process(item)
       → addImage()
           → dispatch(CREATED_ONE_IMAGE)  ← setState #2 (synchronous, before any await)
                                          ← React 17 reconciler collision → insertBefore crash ❌

Fix

Add await Promise.resolve() before the optimistic dispatch in addImage(). This yields to the event loop for one microtask, allowing React to finish flushing the setProcessedItems render before the second state update is applied — eliminating the collision entirely.

+ await Promise.resolve();
  dispatch?.({
    type: MonkActionType.CREATED_ONE_IMAGE,
    payload: { inspectionId: options.inspectionId, image: localImage },
  });

Investigation notes

Full bug report and root cause analysis: https://www.notion.so/monkvision/Bug-Report-drive-app-React-insertBefore-Crash-DRIVE-APP-Q-3c930e73786e81eea9e2cfaff0b2f31d

Checklist

  • Single-line, surgical fix — no logic changes
  • No observable UX change (microtask deferral is imperceptible)
  • Applies to all ImageUploadType variants (beauty shot, close-up, video frame, etc.)

…insertBefore crash

Fixes DRIVE-APP-Q — 800+ events on Android/NL production.

The synchronous dispatch() call inside addImage() was firing a Redux state
update while useQueue's processItem() had already triggered setProcessedItems(),
causing two concurrent React 17 state updates that led to a torn render and a
DOM insertBefore() crash.

Adding `await Promise.resolve()` before the optimistic dispatch defers it to
the next microtask, after React has flushed the current render cycle.

@Apiarry Apiarry left a comment

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Requesting review from @gabrieltira — this fixes the React insertBefore DOM crash on drive-app (DRIVE-APP-Q, 800+ events on Android/NL production). One-line fix, full context in the PR description and linked Notion page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant