青岛达内it培训 > 达内新闻
一文教你如何轻松优雅的处理前端异常?(6)
- 发布:青岛IT培训
- 来源:青岛IT培训
- 时间:2019-04-10 15:32
青岛IT培训的小编总结,然后我们像使用普通组件那样使用它:
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
componentDidCatch() 方法像 JS 的 catch{} 模块一样工作,但是对于组件,只有 class 类型的组件(class component )可以成为一个 error boundaries .
实际上,大多数情况下我们可以在整个程序中定义一个 error boundary 组件,之后就可以一直使用它了!
九、iframe 异常
对于 iframe 的异常捕获,我们还得借力 window.onerror:
window.onerror = function(message, source, lineno, colno, error) {
console.log(‘捕获到异常:',{message, source, lineno, colno, error});
}

一个简单的例子可能如下:
<iframe src=“./iframe.html” frameborder=“0”></iframe>
<script>
window.frames[0].onerror = function (message, source, lineno, colno, error) {
console.log(’捕获到 iframe 异常:‘,{message, source, lineno, colno, error});
return true;
};
</script>
十、Script error
一般情况,如果出现 Script error 这样的错误,基本上可以确定是出现了跨域问题。这时候,是不会有其他太多辅助信息的,但是解决思路无非如下:
跨源资源共享机制( CORS ):我们为 script 标签添加 crossOrigin 属性。
<script src=“#/main.js” crossorigin></script>
或者动态去添加 js 脚本:
const script = document.createElement('script’);
script.crossOrigin = 'anonymous';
script.src = url;
document.body.appendChild(script);
特别注意,服务器端需要设置:Access-Control-Allow-Origin
以上就是青岛IT培训给大家做的内容详解,更多关于UI的学习,请继续关注青岛IT培训
最新开班时间
- 北京
- 上海
- 广州
- 深圳
- 南京
- 成都
- 武汉
- 西安
- 青岛
- 天津
- 杭州
- 重庆
- 哈尔滨
- 济南
- 沈阳
- 合肥
- 郑州
- 长春
- 苏州
- 长沙
- 昆明
- 太原
- 无锡
- 石家庄
- 南宁
- 佛山
- 珠海
- 宁波
- 保定
- 呼和浩特
- 洛阳
- 烟台
- 运城
- 潍坊
一文教你如何轻松优雅的处理前端异常?(6)
- 发布:青岛IT培训
- 来源:青岛IT培训
- 时间:2019-04-10 15:32
青岛IT培训的小编总结,然后我们像使用普通组件那样使用它:
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
componentDidCatch() 方法像 JS 的 catch{} 模块一样工作,但是对于组件,只有 class 类型的组件(class component )可以成为一个 error boundaries .
实际上,大多数情况下我们可以在整个程序中定义一个 error boundary 组件,之后就可以一直使用它了!
九、iframe 异常
对于 iframe 的异常捕获,我们还得借力 window.onerror:
window.onerror = function(message, source, lineno, colno, error) {
console.log(‘捕获到异常:',{message, source, lineno, colno, error});
}

一个简单的例子可能如下:
<iframe src=“./iframe.html” frameborder=“0”></iframe>
<script>
window.frames[0].onerror = function (message, source, lineno, colno, error) {
console.log(’捕获到 iframe 异常:‘,{message, source, lineno, colno, error});
return true;
};
</script>
十、Script error
一般情况,如果出现 Script error 这样的错误,基本上可以确定是出现了跨域问题。这时候,是不会有其他太多辅助信息的,但是解决思路无非如下:
跨源资源共享机制( CORS ):我们为 script 标签添加 crossOrigin 属性。
<script src=“#/main.js” crossorigin></script>
或者动态去添加 js 脚本:
const script = document.createElement('script’);
script.crossOrigin = 'anonymous';
script.src = url;
document.body.appendChild(script);
特别注意,服务器端需要设置:Access-Control-Allow-Origin
以上就是青岛IT培训给大家做的内容详解,更多关于UI的学习,请继续关注青岛IT培训
最新开班时间
- 北京
- 上海
- 广州
- 深圳
- 南京
- 成都
- 武汉
- 西安
- 青岛
- 天津
- 杭州
- 重庆
- 厦门
- 哈尔滨
- 济南
- 福州
- 沈阳
- 合肥
- 郑州
- 长春
- 苏州
- 大连
- 长沙
- 昆明
- 温州
- 太原
- 南昌
- 无锡
- 石家庄
- 南宁
- 中山
- 兰州
- 佛山
- 珠海
- 宁波
- 贵阳
- 保定
- 呼和浩特
- 东莞
- 洛阳
- 潍坊
- 烟台
- 运城