通过拦截器或封装函数在 fetch 请求完成后检查响应状态码和特定业务字段，触发告警逻辑。具体做法是定义一个包装函数，在 .then() 中判断 response.ok 是否为 false 或业务错误码是否命中黑名单，若命中则调用告警服务接口。
如何区分网络异常与业务错误并触发不同告警
网络异常通常由 catch 块捕获，而业务错误需解析 JSON 后根据 code 字段判断。针对网络超时或断网，直接发送紧急告警；针对业务逻辑错误（如权限不足），可记录日志或发送低优先级通知。
async function fetchWithAlert(url, options = {}) {
try {
const response = await fetch(url, options);
// 1. 处理 HTTP 级别错误 (5xx, 4xx)
if (!response.ok) {
console.error(`HTTP Error: ${response.status}`);
sendAlert({ type: 'network', status: response.status, url });
throw new Error(`HTTP error! status: ${response.status}`);
}
// 2. 处理业务级别错误
const data = await response.json();
if (data.code !== 0) { // 假设 0 代表成功
console.warn(`Business Error: ${data.message}`);
sendAlert({ type: 'business', code: data.code, message: data.message });
// 根据业务需求决定是否抛出异常
// throw new Error(data.message);
}
return data;
} catch (error) {
// 3. 处理网络级异常 (无网络, DNS失败等)
console.error('Network or Fetch Error:', error);
sendAlert({ type: 'network', error: error.message, url });
throw error;
}
}
function sendAlert(alertData) {
// 实际项目中这里应调用内部告警系统 API
console.log('Sending Alert:', alertData);
}
上述代码展示了完整的拦截流程。当 response.ok 为假时，说明服务器返回了非 2xx 状态码，此时立即触发网络类告警。如果状态码正常，但返回的 JSON 中包含非零 code，则触发业务类告警。这种分层处理确保了不同类型的故障能被准确归类。
如何实现告警防抖以避免重复通知
在高并发或重试场景下，相同的错误可能频繁触发。实现防抖策略的核心是在内存中维护一个最近报错的时间戳映射表。当收到新的告警请求时，检查该资源（URL 或错误类型）是否在冷却时间内已上报过，若是则忽略，否则更新状态并发送。
// 简单的告警防抖管理器
const alertCooldowns = new Map();
const COOLDOWN_MS = 60 * 1000; // 1分钟冷却期
function deduplicatedSendAlert(key, alertData) {
const now = Date.now();
const lastAlertTime = alertCooldowns.get(key);
if (lastAlertTime && (now - lastAlertTime) {
alertCooldowns.delete(key);
}, COOLDOWN_MS);
}
// 在 fetchWithAlert 中替换 sendAlert 调用
// sendAlert({ ... }) -> deduplicatedSendAlert(`${url}-${status}`, { ... })
通过引入 alertCooldowns 映射表，我们可以基于键值（如 URL 组合状态码）来控制告警频率。例如，如果某个接口持续返回 500 错误，第一次会触发告警，随后的一分钟内相同接口的相同错误将被静默处理。这有效避免了告警风暴，确保运维人员只关注真正需要处理的突发问题。
当 fetch 请求被取消时如何处理告警
在使用 AbortController 取消请求时，浏览器会抛出一个 AbortError。这属于正常的业务流程中断，而非系统故障，因此不应触发任何告警。需要在 catch 块中明确识别该错误类型，将其排除在告警逻辑之外。
try {
const controller = new AbortController();
const signal = controller.signal;
// 模拟一段时间后取消
setTimeout(() => controller.abort(), 1000);
const response = await fetch(url, { signal });
// ... 处理响应 ...
} catch (error) {
if (error.name === 'AbortError') {
console.log('Request was aborted, no alert needed.');
return; // 直接返回，不触发告警
}
// 其他错误继续走告警逻辑
sendAlert({ type: 'network', error: error.message });
}
这段代码演示了如何在捕获异常时进行精细化过滤。通过检查 error.name 是否为 'AbortError'，我们可以区分用户主动取消的操作和真正的网络故障。只有非中止类的错误才会进入后续的告警分发流程，从而保证告警数据的纯净性。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
