今天同事报了一个线上bug, ie10下页面不能正常使用。但除了改同事电脑外,其他人竟无法复现。为了不影响其工作,通常不会直接用其电脑提示。所以第一步, 我采取了之前常用的方案来追查错误。

1,首先让同事把该网页源码发给我, 然后利用cookie抽样工具确定同事的cookie抽样。

2,我将源码保存成文件bug.file, 用fiddler把自己的线上页面的http页面改为autoresponse,文件为bug.file。然后将自己的IE10浏览器的cookie设置为与上述工具取样相同。


通过以上两种方式力求达到与bug发生现场的环境和代码一直, 由此可以在本机定位无法复现的问题。曾经这个方法屡试不爽,但这次居然依然无法复线。

既然代码相同,cookie一致,为什么还不能复现呢, 初步推断为与本地存储有关,这样会造成代码相同而数据不同的情况。于是就只能硬着头皮到同事的电脑上去调试了。打开调试工具一看, 报了一个“SCRIPT5022: QuotaExceededError”错误,以前还真没见过,不过从字面意义能看出应该是存储报表了。回想到页面有用到localStorage的相关功能,所以推断为本地存储的爆表导致的。

1,于是,在控制台中输入

window.localStorage

 果然报上述错误(这一点很奇怪,只有在该同事的浏览器会这样,连访问都会报错,而且代码中的操作是包含在try{}catch(e){}中的,居然不能捕获到该错误)

2,既然知道产生错误的原因,就开始想修复方案了,其实简单,也无非是清除策略。

try{
	localStorage.setItem(key,value);
}catch(e){
	if(e.name == 'QuotaExceededError'){
		localStorage.clear();
		localStorage.setItem(key,value);
	}
}



上面的方案在多个浏览器和多个同事电脑下尝试是没问题的, 只有事发电脑不可以……

现象依然是不能访问localStorage对象。 如果哪位知道是因为什么问题导致的IE10下的这个奇怪的问题,希望给解释一下。

不管怎么样,我们都是要必须在服务端代码上加上上述修复代码的。至于该同事电脑,只能在客户端清除了。

引发类型为system outofmemoryException的异常 script5022:引发了异常但未捕获_bug


最后复现上述错误可以用下面的代码。但注意,每个浏览器表现不一致。

localStorage.clear();

var kb = new Array(1024);
kb = kb.join('a');

var mb = new Array(1024);

mb = mb.join(kb);

var MAX = 100;

for( var i = 0; i < MAX; i++ ){
  try{
    localStorage.setItem( 'i-' + i, mb);  
  }catch(e){
    alert(e.message);
    break;
  }
  
}