哪个网站企业邮箱最好,怎么制作一个游戏app,seo快速排名优化公司,小程序开发教程免费文章目录 前言#xff1a;思考#xff1a;一、为什么要处理异常#xff1f;二、需要处理哪些异常#xff1f; js 代码处理基本的try...catch语句 Promise 异常Promise 错误处理async/await 全局处理错误捕获window.onerrorwindow.onunhandledrejectionwindow.addEventListe… 文章目录 前言思考一、为什么要处理异常二、需要处理哪些异常 js 代码处理基本的try...catch语句 Promise 异常Promise 错误处理async/await 全局处理错误捕获window.onerrorwindow.onunhandledrejectionwindow.addEventListener捕获事件处理错误 AJAX 请求异常拦截 HTTP 请求错误 资源加载错误处理框架错误处理React 错误边界Error BoundariesVue 全局错误处理 iframe 错误处理自定义全局异常处理函数 并 异常日志上报Service Workers使用第三方库总结 前言
在前端开发中异常处理是一个重要的环节它能够帮助我们捕获和处理程序运行时的错误提高应用的稳定性和用户体验。 前端异常拦截处理是指在应用程序的全局或者局部范围内捕获和处理异常以防止单个组件或模块中的错误影响整个应用的稳定性。
思考
一、为什么要处理异常
增强用户体验远程定位问题完善的前端方案前端监控系统
二、需要处理哪些异常
JS 代码错误语法/内部执行Promise 异常全局错误处理静态资源加载异常AJAX 请求异常Iframe 异常框架异常处理React、Vue)跨域 Script error错误上报自定义错误处理使用第三方库
js 代码处理
基本的try...catch语句
JavaScript 提供了try...catch语句来捕获代码块中的错误。这是最基本的异常处理方式。
try {// 尝试执行的代码let name zs;console.log(age);
} catch (error) {// 捕获错误并处理console.error(异常捕获, error);
}Promise 异常
Promise 错误处理
在异步编程中Promise 提供了.catch()方法来处理异步操作中的错误。
fetch(/api/data).then((response) response.json()).catch((error) {console.error(请求失败:, error);});async/await
async/await是 Promise 的语法糖它允许我们以同步的方式编写异步代码。错误处理可以通过try...catch语句来实现。
async function fetchData() {try {const response await fetch(https://jsonplaceholder.typicode.com/todos/1);const data await response.json();return data;} catch (error) {console.error(请求失败:, error);}
}全局处理错误捕获
window.onerror
这是一个全局事件处理器可以捕获在全局作用域中发生的运行时错误。
window.onerror function (message, source, lineno, colno, error) {console.error(捕获到全局错误:, message);// 可以在这里进行错误日志上报return true; // 返回true可以阻止默认的错误处理
};window.onunhandledrejection
这个事件处理器用于捕获未被.catch()处理的 Promise 拒绝。
window.onunhandledrejection function (event) {console.error(未处理的Promise拒绝:, event.reason);// 可以在这里进行错误日志上报
};window.addEventListener捕获事件处理错误
对于事件监听器中可能抛出的错误可以通过给window对象添加事件监听器来全局捕获。
window.addEventListener(error, function (event) {console.error(捕获到事件错误:, event.error);// 可以在这里进行错误日志上报
});AJAX 请求异常
拦截 HTTP 请求错误
对于基于 Promise 的 HTTP 请求库如 axios可以设置全局的错误拦截器。
axios.interceptors.response.use(null, function (error) {// 判断状态码、code、获取接口统一标识flagconsole.error(HTTP请求错误:, error);// 错误日志上报return Promise.reject(error);
});资源加载错误处理
对于图片、脚本、样式等资源的加载失败我们可以通过onerror事件来处理。
img srcimage.jpg onerrorerrorImage(this) /scriptfunction errorImage(dom) {dom.src ./default.jpg; // 修改为默认图片地址console.log(dom); // 打印输出}
/script框架错误处理
React 错误边界Error Boundaries
在 React 中错误边界可以捕获其子组件树中 JavaScript 错误并展示备用 UIReact 中通过 Class 创建组件需要保证有 static getDerivedStateFromError 或者 componentDidCatch 属性
class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state { hasError: false };}static getDerivedStateFromError(error) {return { hasError: true };}componentDidCatch(error, errorInfo) {// 错误日志上报console.error(React错误边界捕获错误:, error, errorInfo);}render() {if (this.state.hasError) {return h1Something went wrong./h1;}return this.props.children;}
}使用组件
ErrorBoundaryMyWidget /
/ErrorBoundaryVue 全局错误处理
在 Vue 中可以使用全局错误处理钩子errorHandler。
Vue.config.errorHandler function (err, vm, info) {console.error(Vue全局错误捕获:, err, info);// 错误日志上报
};iframe 错误处理
iframe src./iframe.html frameborder0/iframe
scriptwindow.frames[0].onerror function (message, source, lineno, colno, error) {console.log(捕获到 iframe 异常, {message,source,lineno,colno,error,});return true;};
/script自定义全局异常处理函数 并 异常日志上报
可以创建一个全局的异常处理函数并在应用的各个部分调用它。
function reportError(error) {fetch(/log-error, {method: POST,headers: {Content-Type: application/json,},body: JSON.stringify({ error: error.toString() }),});
}function globalExceptionHandler(error) {console.error(全局异常处理:, error);// 错误日志上报reportError(error);
}// 使用
try {// 可能会抛出错误的代码
} catch (error) {globalExceptionHandler(error);
}Service Workers
对于支持 Service Workers 的应用可以在 Service Worker 中拦截请求并处理错误。
self.addEventListener(fetch, function (event) {event.respondWith(fetch(event.request).catch(function (error) {console.error(Service Worker请求错误:, error);// 返回备用响应或进行错误日志上报}));
});使用第三方库
有许多第三方库可以帮助我们更好地处理异常例如Sentry、Bugsnag等它们提供了错误捕获、上报和监控的功能。
总结
异常处理是前端开发中不可或缺的一部分通过上述介绍的方法它不仅能够提升应用的健壮性可以有效地捕获和处理全局范围内的异常减少因异常导致的程序崩溃提高用户体验。
