保护网站稳健运行：JS 错误捕获与优雅降级

JavaScript 错误的类型和影响

在 JavaScript 代码的执行过程中，可能发生多种类型的错误，包括：

• 语法错误：如拼写错误、缺少分号等。
• 运行时错误：如类型错误、引用错误等。
• 逻辑错误：如算法错误、业务逻辑错误等。

这些错误都会导致 JavaScript 引擎抛出异常信息，如果这些异常没有被正确捕获和处理，将会阻塞后续代码的执行，并向用户展示错误信息，导致网站崩溃或出现不一致的状态。

JavaScript 错误捕获机制

为了防止 JavaScript 错误对网站造成负面影响，我们需要使用错误捕获机制来及时发现、处理和展示错误信息。JavaScript 提供了多种错误捕获机制，包括：

• try/catch 语句 ：允许开发者指定需要捕获错误的代码块，并指定当错误发生时执行的代码块。
• onerror 事件监听器 ：允许开发者在页面加载时或脚本执行过程中监听错误事件，并在错误发生时执行指定的代码。
• 全局异常捕获 ：允许开发者在全局范围内捕获所有未被捕获的错误，并执行指定的代码。

使用 try/catch 语句捕获错误

try/catch 语句是最常用的 JavaScript 错误捕获机制，其语法如下：

try {
  // 要执行的代码块
} catch (error) {
  // 当错误发生时执行的代码块
}

当 try 块中的代码执行时，如果发生错误，则会抛出一个异常，该异常会被 catch 块捕获。catch 块中的代码将被执行，并且可以对错误进行处理和展示。

例如，以下代码演示了如何使用 try/catch 语句捕获语法错误：

try {
  console.log(xyz); // 变量 xyz 未定义
} catch (error) {
  console.error(error.message); // 输出错误信息
}

当这段代码执行时，由于变量 xyz 未定义，因此会抛出一个错误。该错误会被 catch 块捕获，并输出错误信息到控制台。

使用 onerror 事件监听器捕获错误

onerror 事件监听器允许开发者在页面加载时或脚本执行过程中监听错误事件，并在错误发生时执行指定的代码。其语法如下：

window.onerror = function(message, source, lineno, colno, error) {
  // 当错误发生时执行的代码块
};

当页面加载时或脚本执行过程中发生错误时，onerror 事件监听器将被触发，并执行指定的代码块。该代码块可以对错误进行处理和展示。

例如，以下代码演示了如何使用 onerror 事件监听器捕获所有未被捕获的错误：

window.onerror = function(message, source, lineno, colno, error) {
  console.error(error.message); // 输出错误信息
  return true; // 防止浏览器默认的错误处理行为
};

当页面加载时或脚本执行过程中发生错误时，onerror 事件监听器将被触发，并输出错误信息到控制台。同时，return true 语句将阻止浏览器默认的错误处理行为，防止页面崩溃。

使用全局异常捕获捕获错误

全局异常捕获允许开发者在全局范围内捕获所有未被捕获的错误，并执行指定的代码。其语法如下：

window.addEventListener('error', function(event) {
  // 当错误发生时执行的代码块
});

当页面加载时或脚本执行过程中发生错误时，window.addEventListener('error') 事件监听器将被触发，并执行指定的代码块。该代码块可以对错误进行处理和展示。

例如，以下代码演示了如何使用全局异常捕获捕获所有未被捕获的错误：

window.addEventListener('error', function(event) {
  console.error(event.error.message); // 输出错误信息
  return true; // 防止浏览器默认的错误处理行为
});

当页面加载时或脚本执行过程中发生错误时，window.addEventListener('error') 事件监听器将被触发，并输出错误信息到控制台。同时，return true 语句将阻止浏览器默认的错误处理行为，防止页面崩溃。

优雅降级与错误展示

除了捕获和处理错误之外，优雅降级也是非常重要的。优雅降级是指在发生错误时，网站仍然能够以一种有意义的方式继续运行。这可以通过以下几种方式实现：

• 使用备用数据或默认值来替代有问题的