前端异常处理合集

前言：

在前端开发中，异常处理是一个重要的环节，它能够帮助我们捕获和处理程序运行时的错误，提高应用的稳定性和用户体验。
前端异常拦截处理是指在应用程序的全局或者局部范围内捕获和处理异常，以防止单个组件或模块中的错误影响整个应用的稳定性。

思考：

一、为什么要处理异常？

• 增强用户体验；
• 远程定位问题；
• 完善的前端方案，前端监控系统；

二、需要处理哪些异常？

• 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 src="image.jpg" onerror="errorImage(this)" /><script>function errorImage(dom) {dom.src = "./default.jpg"; // 修改为默认图片地址console.log(dom); // 打印输出}
</script>

框架错误处理

React 错误边界（Error Boundaries）

在 React 中，错误边界可以捕获其子组件树中 JavaScript 错误，并展示备用 UI，React 中通过 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 <h1>Something went wrong.</h1>;}return this.props.children;}
}

使用组件：

<ErrorBoundary><MyWidget />
</ErrorBoundary>

Vue 全局错误处理

在 Vue 中，可以使用全局错误处理钩子errorHandler。

Vue.config.errorHandler = function (err, vm, info) {console.error("Vue全局错误捕获:", err, info);// 错误日志上报
};

iframe 错误处理

<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>

自定义全局异常处理函数 并 异常日志上报

可以创建一个全局的异常处理函数，并在应用的各个部分调用它。

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等，它们提供了错误捕获、上报和监控的功能。

总结

异常处理是前端开发中不可或缺的一部分，通过上述介绍的方法，它不仅能够提升应用的健壮性，可以有效地捕获和处理全局范围内的异常，减少因异常导致的程序崩溃，提高用户体验。