上传大图片触发Storage setItem配额超出错误，是否为Redux或Sentry的BUG？

这个报错不是Sentry或Redux本身的BUG，是redux-persist持久化配置和状态存储逻辑不合理导致的浏览器存储配额超限问题。

报错原文：Error storing data DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'persist:root' exceeded the quota
中文翻译：存储数据时出错 DOM异常：在'Storage'上执行'setItem'失败：设置'persist:root'的值超出了配额

• persist:root是Redux生态的持久化工具redux-persist使用的默认存储key，说明你的项目是通过redux-persist把Redux状态序列化后存入了浏览器的localStorage/sessionStorage中
• 浏览器给localStorage分配的默认存储配额一般只有5MB左右，你上传大体积图片时如果把图片的Base64编码、原始文件流等大体积内容存入了Redux状态，redux-persist会把这部分内容一起序列化写入Storage，体积超过上限就会触发该异常
• 网站功能正常是因为该异常只出现在持久化写入步骤，Redux运行时的状态更新不受影响，只是对应状态不会在页面刷新后被恢复

• 调整Redux状态存储逻辑：不要将图片类大体积资源直接存在Redux状态中，上传完成后仅存储服务端返回的资源URL引用即可
• 调整redux-persist配置：在持久化配置中添加黑名单，把存储大体积内容的Redux切片排除在持久化范围之外，不需要持久化的状态无需写入Storage
• 替换持久化存储方案：如果确实有大体积状态的持久化需求，可替换redux-persist的默认存储适配器，改用IndexedDB这类存储配额更高的浏览器存储方案

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