求助：React应用中LastPass扩展引发ResizeObserver循环未送达通知错误

问题背景 #

当用户启用LastPass浏览器扩展时，从包含至少一个type='text'输入框的页面路由导航至其他页面，会触发ResizeObserver loop completed with undelivered notifications -- LastPass错误。该错误不会导致功能崩溃，但会占据错误追踪系统（如Sentry）的榜首位置，本地开发时Webpack也会捕获该错误。

问题根源是LastPass自动识别可自动填充的输入框（如邮箱、姓名、电话等）时，注入的ResizeObserver在页面卸载/路由切换时未正确清理监听逻辑，自身代码未使用ResizeObserver，开关LastPass扩展可直接复现问题。

已验证无效的方案 #

• 设置autocomplete="off"、data-lpignore="true"属性
• 将输入框type改为search或id包含search关键词
• 通过CSS隐藏LastPass图标（display: none）
• 调整输入框宽高尺寸
• 仅用户手动开启LastPass高级设置中的「Respect AutoComplete=off: allow websites to disable Autofill」可解决，但无法要求所有用户执行该操作

可行解决方案 #

1. 全局过滤错误（快速解决Sentry上报问题） #

在React应用入口文件中添加全局错误捕获，过滤LastPass相关的ResizeObserver错误，避免其被追踪系统记录：

// 覆盖console.error，过滤目标错误
const originalConsoleError = console.error;
console.error = (...args) => {
  const errorMsg = args[0];
  if (typeof errorMsg === 'string' && 
      errorMsg.includes('ResizeObserver loop completed with undelivered notifications') && 
      errorMsg.includes('LastPass')) {
    return;
  }
  originalConsoleError.apply(console, args);
};

// 若使用Sentry，在初始化时添加过滤规则
Sentry.init({
  // 其他初始化配置
  beforeSend(event) {
    const isLastPassResizeError = event.exception?.values?.some(val => 
      val.value.includes('ResizeObserver loop completed with undelivered notifications') && 
      val.value.includes('LastPass')
    );
    if (isLastPassResizeError) return null; // 不上报该错误
    return event;
  }
});

2. 精确阻止LastPass监听输入框（治本尝试） #

LastPass对标准autocomplete属性的支持可能存在差异，尝试以下组合配置：

• 给不需要自动填充的输入框设置非标准autocomplete值：

  <input type="text" autocomplete="nope" />
  

• 结合data-lpignore="true"属性，并修改输入框的name/id避免使用LastPass识别的关键词（如email、username）：

  <input 
    type="text" 
    name="custom-user-display-name" 
    id="custom-user-display-name" 
    data-lpignore="true" 
  />
  

• 将输入框包裹在带有data-lpignore="true"的容器中：

  <div data-lpignore="true">
    <input type="text" />
    {/* 其他相关输入控件 */}
  </div>
  

3. 延迟组件卸载（适配路由切换场景） #

错误触发于路由切换时输入框卸载阶段，可通过延迟组件卸载给LastPass足够时间清理监听：

import { useLocation } from 'react-router-dom';
import { useState, useEffect } from 'react';

function InputContainer() {
  const location = useLocation();
  const [isUnmounting, setIsUnmounting] = useState(false);

  useEffect(() => {
    const unlisten = location.listen(() => {
      setIsUnmounting(true);
      setTimeout(() => setIsUnmounting(false), 100); // 延迟100ms完成卸载
    });
    return unlisten;
  }, [location]);

  if (isUnmounting) return null; // 路由切换时暂时渲染空内容

  return (
    <div>
      <input type="text" />
      {/* 页面其他内容 */}
    </div>
  );
}

补充说明 #

LastPass的扩展逻辑会随版本更新调整，以上方案需根据当前版本验证。若治本方案无效，全局错误过滤是最稳妥的临时方案，既不影响用户体验，也能解决错误追踪系统的告警问题。

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