前端异常处理合集

文章目录

- 前言：
- 思考：
- - 一、为什么要处理异常？
  - 二、需要处理哪些异常？
- js 代码处理
- - 基本的`try...catch`语句
- Promise 异常
- - Promise 错误处理
  - async/await
- 全局处理错误捕获
- - `window.onerror`
  - `window.onunhandledrejection`
  - `window.addEventListener`捕获事件处理错误
- AJAX 请求异常
- - 拦截 HTTP 请求错误
- 资源加载错误处理
- 框架错误处理
- - React 错误边界（Error Boundaries）
  - Vue 全局错误处理
- 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 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);// 返回备用响应或进行错误日志上报}));
});