Issue Station
Sign In
Tools hereToolbox

openclaw - 💡(How to fix) Fix Webchat: Maximum call stack size exceeded when adding photo/image attachment [1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
openclaw/openclaw#54378•Fetched 2026-04-08 01:28:23
View on GitHub
Comments
0
Participants
1
Timeline
0
Reactions
0
Author
AnsubAnsub
Participants
AnsubAnsub

Error Message

RangeError: Maximum call stack size exceeded

Root Cause

Looking at the minified source in control-ui/assets/index-*.js, the attachment flow is:

  1. vp() / yp() / _p() read the file via FileReader.readAsDataURL()
  2. On load, they create an attachment object with { id, dataUrl, mimeType }
  3. They call onAttachmentsChange?.([...existing, newAttachment])
  4. This updates chatAttachments on the reactive store

The likely cause is the reactive state system (appears to be a Proxy-based observer) deeply walking/cloning the large base64 dataUrl string, triggering infinite recursion.

The yn() function in the source uses structuredClone() with a JSON.parse(JSON.stringify()) fallback, which could also blow the stack on very large data URL strings embedded in the state tree.

Code Example

RangeError: Maximum call stack size exceeded
RAW_BUFFERClick to expand / collapse

Bug

When adding a photo (image attachment) via the webchat dashboard UI, the browser throws:

RangeError: Maximum call stack size exceeded

Steps to Reproduce

  1. Open the OpenClaw dashboard webchat (e.g. enzo.local or 127.0.0.1:18789)
  2. Click the attachment button or drag-and-drop an image
  3. Error occurs immediately — the image never attaches

Environment

  • OpenClaw: 2026.3.23-2
  • macOS arm64

Analysis

Looking at the minified source in control-ui/assets/index-*.js, the attachment flow is:

  1. vp() / yp() / _p() read the file via FileReader.readAsDataURL()
  2. On load, they create an attachment object with { id, dataUrl, mimeType }
  3. They call onAttachmentsChange?.([...existing, newAttachment])
  4. This updates chatAttachments on the reactive store

The likely cause is the reactive state system (appears to be a Proxy-based observer) deeply walking/cloning the large base64 dataUrl string, triggering infinite recursion.

The yn() function in the source uses structuredClone() with a JSON.parse(JSON.stringify()) fallback, which could also blow the stack on very large data URL strings embedded in the state tree.

Suggested Fix

Mark dataUrl as a non-reactive/raw property, or store attachments outside the reactive state tree (e.g. in a plain Map keyed by attachment id).

extent analysis

Fix Plan

To resolve the RangeError: Maximum call stack size exceeded issue, we will mark dataUrl as a non-reactive property. Here are the steps:

  • Identify the attachment object creation code and modify it to use a non-reactive property for dataUrl.
  • Use a library like lodash to create a non-reactive object, or use the Object.freeze() method to freeze the dataUrl property.

Example code:

import _ from 'lodash';

// Create a non-reactive attachment object
const newAttachment = _.omit(_.cloneDeep({
  id,
  dataUrl,
  mimeType
}), ['dataUrl']);

newAttachment.dataUrl = Object.freeze(dataUrl);

// Alternatively, use a plain Map to store attachments
const attachments = new Map();
attachments.set(id, { dataUrl, mimeType });

Verification

To verify the fix, follow these steps:

  • Open the OpenClaw dashboard webchat and attempt to add a photo.
  • Check the browser console for any errors.
  • Verify that the image attaches successfully and the RangeError is no longer thrown.

Extra Tips

  • When working with large data URLs, consider storing them outside the reactive state tree to avoid infinite recursion issues.
  • Use debugging tools to inspect the reactive state tree and identify potential bottlenecks.
  • Consider using a library like immer to manage immutable state and avoid issues with deep cloning and recursion.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#GPU compatibility#latency issue#model loading#dependency error#configuration error

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING