前端错误处理方案_iframe onerror_未来D未来的博客

iframe

可控的iframe 也可以使用onerror获取错误信息，但是第三方iframe 无法获取

iframe 页面和你的主站是同域名的话，直接给 iframe 添加 onerror 事件即可

不是同域名但是可控的页面可以通过与 iframe 通信的方式将异常信息抛给主站接收

可以获取详细信息，①但是现在js全都是压缩过的，无法获取正常的数据，②而且不同域的Javascript文件，通过window.onError无法获取有效的错误信息，必须要再资源的http头上加上 Access-Control-Allow-Origin: ，并在脚本上加上 crossorigin 属性。③并且资源加载错误,必须在捕获阶段将其捕捉，④Post网络请求错误无法获取到

window.onerror 函数只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示
jsonp错误可以用添加运行跨域的方式获取错误

unhandledrejection

当Promise 被reject并且没有得到处理的时候，会触发unhandledrejection事件。

也就是 Promise 的全局错误处理，但是只有chrome 实现，现在还必须依靠挨个添加回调处理

添加 try catch

在于跨域资源相关头部信息失效时使用，在易出问题出添加，catch 添加错误处理或者上报等，

function badHandler(fn) {
  try {
    return fn();
  } catch (e) { }
  return null;
冗余代码太多，工作量增大不少 
特殊： Vue
 
vue config 内可以定义的错误处理函数 
Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
只会捕获vue内部错误，无法替代window.onerror 
捕获渲染，观察，生命周期，自定义事件，v-onDOM监听器内部抛错
                    window.onerror浏览器提供的错误处理API，当JavaScript运行时错误（包括语法错误）发生时触发若该函数返回true，则阻止执行默认事件处理函数。/** message：错误信息（字符串）。可用于HTML ""处理程序中的event。source：发生错误的脚本URL（字符串）lineno：发生错误的行号（数字）colno：发生错误的列号（数字）error：Err...
				[html]  在主框架下引入的iframe，如果检测这个iframe是否能打开，如果打不开则跳到404页面
首先我们知道 iframe 只有 onload 事件，没有 onerror 事件，无论 iframe 能否正常加载都会正常触发 onload 事件。
但是由于场景不同，最终所能使用的方案也不同。
如果不跨域，那问题就很好解决了，有以下几种方案可以使用：
    使用 ajax 发送一个 head 请求，看状态是否返回 200 （之所以发送 head 请求，是轻量级，响应速度快）。
				1、无法监控iframe加载成功与否
经测试，火狐及chorme都不支持onerror事件，而且，不管iframe加载是否成功，都会触发onload事件。
1)通过postmessage消息提示是否加载成功
2)通过判断title,但是要约定下iframe的title不能是Error,否则会造成误判的
var downFrame = document.getElementById("ifram...
异常处理…允许错误处理在程序结构的中心或者高层级的地方被清晰有条理的组织起来。
Exceptions… allow error handling to be organized cleanly in a central or high-level place within the program structure.
— Doug Hellmann, Python Exception Handling Techniques
Rest框架视图中的异常处理
Exception handling in REST framework views
REST框架的视图处理了各种异常，并正确地
				需求：点击按钮，下载一个文件，由于种种原因，需要借助iframe实现。
实现：点击按钮往页面上append一个iframe，将iframe的src设置为文件的url路径，实现下载。如果url不对或文件下载失败，提示下载失败。
畅想：iframe.onload=function(){ //下载成功；}  iframe.onerror = function(){ //下载失败 }...
				sentry简介
Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误。
sentry官网： https://sentry.io/
sentry安装
sentry 是一个开源的工具，可以自行搭建。
官方支持两种安装和运行 Sentry 服务器的方法， Docker 和 Python 。推荐使用 Docker 。
当然，对于刚开始接触 sentry 的同学，也可以直接使用官方提供的免费服务，但是有一些限制。
在进行业务开发的时候，前后端会对接口的数据结构进行约定，若接口有异常，需要将异常信息展示给用户知晓。这个流程里，数据结构是确定的（事先约定），数据的处理逻辑是相同的（展示给用户），如果在业务代码代码中重复的catch(e) { 展示给用户 }，就非常的不优雅。本着Don’t repeat myself（懒）的原则，需要对接口错误进行统一处理。
接下来，我会结合具体的业务场景，讲一讲我的解决方案。
  后端通过http状态标识接口状态，错误信息在response的data里
  前端的处理逻辑是使用element-ui的Message展示错误信息
  使用axios
axios
				IFRAME权限被拒绝的解决方案 
 最近，我正在滚动自己的AJAX上传脚本，将表单发布到隐藏的IFRAME中，并使用load事件知道上传何时完成。 上传完成后，我想访问IFRAME内容，以便可以验证上传成功完成。 令人惊讶的是，我遇到了以下JavaScript错误： 
Error: Permission denied to access property 'document' 如果您使用的是...
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
2. 确保前端发送请求时设置了正确的Content-Type。如果是传递JSON数据，需要设置Content-Type为application/json：
const headers = new Headers();
headers.append('Content-Type', 'application/json');
fetch(url, {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(data)
3. 如果前端使用了代理服务器，需要在代理服务器上进行CORS设置。
4. 如果仍然出现CORS错误，可以尝试使用JSONP方式进行请求。但是JSONP只能处理GET请求，并且需要后端进行支持。