React DnD v11.1.3在Chrome 107+版本崩溃问题求助

我们的应用使用React DnD（v11.1.3）实现网络文件拖拽至列表的功能，该功能在Chrome 107.0.5304.88及之前版本运行正常，但在更高版本中触发**Aw, Snap!**错误，错误码为STATUS_ACCESS_VIOLATION。浏览器直接断开连接，开发者工具无法捕获任何日志，且仅在基于Chromium的浏览器中出现此问题，Firefox和Safari可正常运行。

相关代码示例 #

const [{ isDragging }, drag, preview] = useDrag({
  item: { type: 'file', file, selectedKeys } as DragItem,
  canDrag: !disabled && selected,
  collect: (monitor: DragSourceMonitor) => ({
    isDragging: !!monitor.getItem()?.selectedKeys.includes(file.key),
  }),
});

Chrome崩溃报告 #

EXCEPTION_RECORD:  (.exr -1)
ExceptionAddress: 00007ffe18fb66aa (chrome!CrashForExceptionInNonABICompliantCodeRange+0x000000000292314a)
   ExceptionCode: c0000005 (Access violation)
  ExceptionFlags: 00000000
NumberParameters: 2
   Parameter[0]: 0000000000000000
   Parameter[1]: 0000000000000038
Attempt to read from address 0000000000000038
PROCESS_NAME:  chrome.exe
READ_ADDRESS:  0000000000000038 
ERROR_CODE: (NTSTATUS) 0xc0000005 - The instruction at 0x%p referenced memory at 0x%p. The memory could not be %s.
EXCEPTION_CODE_STR:  c0000005
EXCEPTION_PARAMETER1:  0000000000000000
EXCEPTION_PARAMETER2:  0000000000000038
FAILURE_BUCKET_ID:  NULL_CLASS_PTR_READ_c0000005_chrome.dll!Unknown

我们已尝试禁用drag monitor，但问题仍未解决，恳请提供修复方案。

修复方案建议 #

1. 升级React DnD版本 #

React DnD v11.1.3是较旧版本，后续版本针对Chromium浏览器的拖拽行为有兼容性修复。建议升级至v14+或最新稳定版，新版本对现代浏览器的拖拽API适配更完善，能避免此类底层内存访问错误。

2. 优化item对象的序列化逻辑 #

Chromium高版本对拖拽数据的序列化/反序列化有更严格的检查，若item中包含无法被结构化克隆的对象（如DOM元素、循环引用对象），可能导致内存访问异常。修改item为纯JSON可序列化数据：

const [{ isDragging }, drag, preview] = useDrag({
  // 仅传递可序列化的基础数据，避免引用复杂对象
  item: { 
    type: 'file', 
    fileKey: file.key, 
    selectedKeys: [...selectedKeys] // 转为数组副本，避免引用外部状态
  } as DragItem,
  canDrag: !disabled && selected,
  collect: (monitor: DragSourceMonitor) => ({
    isDragging: !!monitor.getItem()?.selectedKeys.includes(file.key),
  }),
});

3. 强化collect方法的空值判断 #

collect方法会频繁触发，高版本Chromium中若在拖拽过程中monitor.getItem()返回null时访问其属性，可能触发底层错误。添加更严谨的空值判断：

collect: (monitor: DragSourceMonitor) => {
  const dragItem = monitor.getItem();
  return {
    isDragging: dragItem?.selectedKeys ? dragItem.selectedKeys.includes(file.key) : false,
  };
},

4. 临时改用原生拖拽API兼容 #

若升级框架版本有阻力，可临时改用原生HTML5拖拽API实现该功能，绕过React DnD的底层逻辑：

const handleDragStart = (e: React.DragEvent) => {
  if (disabled || !selected) return;
  // 设置拖拽数据
  e.dataTransfer.setData('application/json', JSON.stringify({
    type: 'file',
    fileKey: file.key,
    selectedKeys: selectedKeys
  }));
};

// 在元素上绑定事件
<div 
  ref={drag} 
  draggable={!disabled && selected}
  onDragStart={handleDragStart}
>
  {/* 元素内容 */}
</div>

内容的提问来源于stack exchange，提问作者Vinit Kumar