微软已修复，Win10/Win11被曝MSHTML零日漏洞

T之家 7 月 11 日消息，微软公司在 7 月补丁星期二发布的 Windows 10、Windows 11 系统累积更新中，修复了追踪编号为 CVE-2024-38112 的零日漏洞。

该零日漏洞由 Check Point Research 的安全专家李海飞（Haifei Li，音译）于 2023 年 1 月发现，是一个高度严重的 MHTML 欺骗问题，有证据表明有黑客在过去 18 个月里，利用该漏洞发起恶意攻击，可以绕过 Windows 10、Windows 11 系统的安全功能。

该专家发现网络攻击者通过分发 Windows Internet 快捷方式文件（.url），以欺骗 PDF 等看起来合法的文件，用户一旦点开这些文件，就会下载并启动 HTA 以安装密码窃取恶意软件。

Internet 快捷方式文件只是一个文本文件，其中包含各种配置设置，如显示什么图标、双击时打开什么链接等信息。保存为 .url 文件并双击后，Windows 将在默认网络浏览器中打开配置的 URL。

不过攻击者发现可以通过在 URL 指令中使用 mhtml: URI 处理程序，来强制 Internet Explorer 打开指定的 URL，如下图所示：

IT之家注：MHTML 是一种 "聚合 HTML 文档的 MIME 封装" 文件，是 Internet Explorer 中引入的一种技术，可将包括图像在内的整个网页封装成一个单一的档案。

攻击者使用 mhtml: URI 启动 URL 后，Windows 会自动在 Internet Explorer 中启动 URL，而不是默认浏览器。

漏洞研究人员 Will Dormann 称，在 Internet Explorer 中打开网页会给攻击者带来额外的好处，下载恶意文件时安全警告较少。

尽管微软早在两年前就宣布停止支持该浏览器，并以 Edge 代替其所有实用功能，但这款过时的浏览器仍可被恶意调用和利用。

家好，我是 Echa。

本文将带你了解 JavaScript 中常见的错误类型，处理同步和异步 JavaScript/Node.js 代码中错误和异常的方式，以及错误处理最佳实践！

1. 错误概述

JavaScript 中的错误是一个对象，在发生错误时会抛出该对象以停止程序。在 JavaScript 中，可以通过构造函数来创建一个新的通用错误：

const err = new Error("Error");

当然，也可以省略 new 关键字：

const err = Error("Error");

Error 对象有三个属性：

message：带有错误消息的字符串；
name: 错误的类型；
stack：函数执行的堆栈跟踪。

例如，创建一个 TypeError 对象，该消息将携带实际的错误字符串，其 name 将是“TypeError”：

const wrongType = TypeError("Expected number");

wrongType.message; // 'Expected number'
wrongType.name;    // 'TypeError'

堆栈跟踪是发生异常或警告等事件时程序所处的方法调用列表：

它首先会打印错误名称和消息，然后是被调用的方法列表。每个方法调用都说明其源代码的位置和调用它的行。可以使用此数据来浏览代码库并确定导致错误的代码段。此方法列表以堆叠的方式排列。它显示了异常首先被抛出的位置以及它如何通过堆栈方法调用传播。为异常实施捕获不会让它通过堆栈向上传播并使程序崩溃。

对于 Error 对象，Firefox 还实现了一些非标准属性：

columnNumber：错误所在行的列号；
filename：发生错误的文件
lineNumber：发生错误的行号

2. 错误类型

JavaScript 中有一系列预定义的错误类型。只要使用者没有明确处理应用程序中的错误，它们就会由 JavaScript 运行时自动选择和定义。

JavaScript中的错误类型包括：

EvalError
InternalError
RangeError
ReferenceError
SyntaxError
TypeError
URIError

这些错误类型都是实际的构造函数，旨在返回一个新的错误对象。最常见的就是 TypeError。大多数时候，大部分错误将直接来自 JavaScript 引擎，例如 InternalError 或 SyntaxError。

JavaScript 提供了 instanceof 运算符可以用于区分异常类型：

try {
  If (typeof x !== ‘number’) {
       throw new TypeError(‘x 应是数字’);
  } else if (x <= 0) {
       throw new RangeError('x 应大于 0');
  } else {
       // ...
  }
} catch (err) {
    if (err instanceof TypeError) {
      // 处理 TypeError 错误
    } else if (err instanceof RangeError) {
      // 处理 RangeError 错误
  } else {
      // 处理其他类型错误
  }
}

下面来了解 JavaScript 中最常见的错误类型，并了解它们发生的时间和原因。

（1）SyntaxError

SyntaxError 表示语法错误。这些错误是最容易修复的错误之一，因为它们表明代码语法中存在错误。由于 JavaScript 是一种解释而非编译的脚本语言，因此当应用程序执行包含错误的脚本时会抛出这些错误。在编译语言的情况下，此类错误在编译期间被识别。因此，在修复这些问题之前，不会创建应用程序二进制文件。

SyntaxError 发生的一些常见原因是：

缺少引号
缺少右括号
大括号或其他字符对齐不当

（2）TypeError

TypeError 是 JavaScript 应用程序中最常见的错误之一，当某些值不是特定的预期类型时，就会产生此错误。

TypeError 发生的一些常见原因是：

调用不是方法的对象。
试图访问 null 或未定义对象的属性
将字符串视为数字，反之亦然

（3）ReferenceError

ReferenceError 表示引用错误。当代码中的变量引用有问题时，会发生 ReferenceError。可能忘记在使用变量之前为其定义一个值，或者可能试图在代码中使用一个不可访问的变量。在任何情况下，通过堆栈跟踪都可以提供充足的信息来查找和修复有问题的变量引用。

ReferenceErrors 发生的一些常见原因如下：

在变量名中输入错误。
试图访问其作用域之外的块作用域变量。
在加载之前从外部库引用全局变量。

（4）RangeError

RangeError 表示范围错误。当变量设置的值超出其合法值范围时，将抛出 RangeError。它通常发生在将值作为参数传递给函数时，并且给定值不在函数参数的范围内。当使用记录不完整的第三方库时，有时修复起来会很棘手，因为需要知道参数的可能值范围才能传递正确的值。

RangeError 发生的一些常见场景如下：

试图通过 Array 构造函数创建非法长度的数组。
将错误的值传递给数字方法，例如 toExponential()、toPrecision()、toFixed()等。
将非法值传递给字符串函数，例如 normalize()。

（5）URIError

URIError 表示 URI错误。当 URI 的编码和解码出现问题时，会抛出 URIError。JavaScript 中的 URI 操作函数包括：decodeURI、decodeURIComponent 等。如果使用了错误的参数（无效字符），就会抛出 URIError。

（6）EvalError

EvalError 表示 Eval 错误。当 eval() 函数调用发生错误时，会抛出 EvalError。不过，当前的 JavaScript 引擎或 ECMAScript 规范不再抛出此错误。但是，为了向后兼容，它仍然是存在的。

如果使用的是旧版本的 JavaScript，可能会遇到此错误。在任何情况下，最好调查在eval()函数调用中执行的代码是否有任何异常。

（7）InternalError

InternalError 表示内部错误。在 JavaScript 运行时引擎发生异常时使用。它表示代码可能存在问题也可能不存在问题。

InternalError 通常只发生在两种情况下：

当 JavaScript 运行时的补丁或更新带有引发异常的错误时（这种情况很少发生）；
当代码包含对于 JavaScript 引擎而言太大的实体时（例如，数组初始值设定项太大、递归太多）。

解决此错误最合适的方法就是通过错误消息确定原因，并在可能的情况下重构应用逻辑，以消除 JavaScript 引擎上工作负载的突然激增。

注意： 现代 JavaScript 中不会抛出 EvalError 和 InternalError。

（8）创建自定义错误类型

虽然 JavaScript 提供了足够的错误类型类列表来涵盖大多数情况，但如果这些错误类型不能满足要求，还可以创建新的错误类型。这种灵活性的基础在于 JavaScript 允许使用 throw 命令抛出任何内容。

可以通过扩展 Error 类以创建自定义错误类：

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

可以通过以下方式使用它：

throw ValidationError("未找到该属性: name")

可以使用 instanceof 关键字识别它：

try {
    validateForm() // 抛出 ValidationError 的代码
} catch (e) {
    if (e instanceof ValidationError) {
      
    }
    else {
      
    }
}

3. 抛出错误

很多人认为错误和异常是一回事。实际上，Error 对象只有在被抛出时才会成为异常。

在 JavaScript 中抛出异常，可以使用 throw 来抛出 Error 对象：

throw TypeError("Expected number");

或者：

throw new TypeError("Expected number");

来看一个简单的例子：

function toUppercase(string) {
  if (typeof string !== "string") {
    throw TypeError("Expected string");
  }

  return string.toUpperCase();
}

在这里，我们检查函数参数是否为字符串。如果不是，就抛出异常。

从技术上讲，我们可以在 JavaScript 中抛出任何东西，而不仅仅是 Error 对象：

throw Symbol();
throw 33;
throw "Error!";
throw null;

但是，最好避免这样做：要抛出正确的 Error 对象，而不是原语。

4. 抛出异常时会发生什么？

异常一旦抛出，就会在程序堆栈中冒泡，除非在某个地方被捕获。

来看下面的例子：

function toUppercase(string) {
  if (typeof string !== "string") {
    throw TypeError("Expected string");
  }

  return string.toUpperCase();
}

toUppercase(4);

在浏览器或 Node.js 中运行此代码，程序将停止并抛出错误：

这里还显示了发生错误的确切行。这个错误就是一个堆栈跟踪，有助于跟踪代码中的问题。堆栈跟踪从下到上：

at toUppercase (<anonymous>:3:11)
at <anonymous>:9:1

toUppercase 函数在第 9 行调用，在第 3 行抛出错误。除了在浏览器的控制台中查看此堆栈跟踪之外，还可以在 Error 对象的 stack 属性上访问它。

介绍完这些关于错误的基础知识之后，下面来看看同步和异步 JavaScript 代码中的错误和异常处理。

5. 同步错误处理

（1）常规函数的错误处理

同步代码会按照代码编写顺序执行。让我们再看看前面的例子：

function toUppercase(string) {
  if (typeof string !== "string") {
    throw TypeError("Expected string");
  }

  return string.toUpperCase();
}

toUppercase(4);

在这里，引擎调用并执行 toUppercase，这一切都是同步发生的。要捕获由此类同步函数引发的异常，可以使用 try/catch/finally：

try {
  toUppercase(4);
} catch (error) {
  console.error(error.message);
} finally {
  // ...
}

通常，try 会处理正常的路径，或者可能进行的函数调用。catch 就会捕获实际的异常，它接收 Error 对象。而不管函数的结果如何，finally 语句都会运行：无论它失败还是成功，finally 中的代码都会运行。

（2）生成器函数的错误处理

JavaScript 中的生成器函数是一种特殊类型的函数。它可以随意暂停和恢复，除了在其内部范围和消费者之间提供双向通信通道。为了创建一个生成器函数，需要在 function 关键字后面加上一个 *：

function* generate() {
//
}

只要进入函数，就可以使用 yield 来返回值：

function* generate() {
  yield 33;
  yield 99;
}

生成器函数的返回值是一个迭代器对象。要从生成器中提取值，可以使用两种方法：

在迭代器对象上调用 next()
使用 for...of 进行迭代

以上面的代码为例，要从生成器中获取值，可以这样做：

function* generate() {
  yield 33;
  yield 99;
}

const go = generate();

当我们调用生成器函数时，这里的 go 就是生成的迭代器对象。接下来，就可以调用 go.next() 来继续执行：

function* generate() {
  yield 33;
  yield 99;
}

const go = generate();

const firstStep = go.next().value; // 33
const secondStep = go.next().value; // 99

生成器也可以接受来自调用者的值和异常。除了 next()，从生成器返回的迭代器对象还有一个 throw() 方法。使用这种方法，就可以通过向生成器中注入异常来停止程序：

function* generate() {
  yield 33;
  yield 99;
}

const go = generate();

const firstStep = go.next().value; // 33

go.throw(Error("Tired of iterating!"));

const secondStep = go.next().value; // never reached

要捕获此类错误，可以使用 try/catch 将代码包装在生成器中：

function* generate() {
  try {
    yield 33;
    yield 99;
  } catch (error) {
    console.error(error.message);
  }
}

生成器函数也可以向外部抛出异常。捕获这些异常的机制与捕获同步异常的机制相同：try/catch/finally。

下面是使用 for...of 从外部使用的生成器函数的示例：

function* generate() {
  yield 33;
  yield 99;
  throw Error("Tired of iterating!");
}

try {
  for (const value of generate()) {
    console.log(value);
  }
} catch (error) {
  console.error(error.message);
}

输出结果如下：

这里，try 块中包含正常的迭代。如果发生任何异常，就会用 catch 捕获它。

6. 异步错误处理

浏览器中的异步包括定时器、事件、Promise 等。异步世界中的错误处理与同步世界中的处理不同。下面来看一些例子。

（1）定时器的错误处理

上面我们介绍了如何使用 try/catch/finally 来处理错误，那异步中可以使用这些来处理错误吗？先来看一个例子：

function failAfterOneSecond() {
  setTimeout(() => {
    throw Error("Wrong!");
  }, 1000);
}

此函数在大约 1 秒后会抛出错误。那处理此异常的正确方法是什么？以下代码是无效的：

function failAfterOneSecond() {
  setTimeout(() => {
    throw Error("Wrong!");
  }, 1000);
}

try {
  failAfterOneSecond();
} catch (error) {
  console.error(error.message);
}

我们知道，try/catch是同步的，所以没办法这样来处理异步中的错误。当传递给 setTimeout的回调运行时，try/catch 早已执行完毕。程序将会崩溃，因为未能捕获异常。它们是在两条路径上执行的：

A: --> try/catch
B: --> setTimeout --> callback --> throw

（2）事件的错误处理

我们可以监听页面中任何 HTML 元素的事件，DOM 事件的错误处理机制遵循与任何异步 Web API 相同的方案。

来看下面的例子：

const button = document.querySelector("button");

button.addEventListener("click", function() {
  throw Error("error");
});

这里，在单击按钮后立即抛出了异常，我们该如何捕获这个异常呢？这样写是不起作用的，也不会阻止程序崩溃：

const button = document.querySelector("button");

try {
  button.addEventListener("click", function() {
    throw Error("error");
  });
} catch (error) {
  console.error(error.message);
}

与前面的 setTimeout 例子一样，任何传递给 addEventListener 的回调都是异步执行的：

Track A: --> try/catch
Track B: --> addEventListener --> callback --> throw

如果不想让程序崩溃，为了正确处理错误，就必须将 try/catch 放到 addEventListener 的回调中。不过这样做并不是最佳的处理方式，与 setTimeout 一样，异步代码路径抛出的异常无法从外部捕获，并且会使程序崩溃。

下面会介绍 Promises 和 async/await 是如何简化异步代码的错误处理的。

（3）onerror

HTML 元素有许多事件处理程序，例如 onclick、onmouseenter、onchange 等。除此之外，还有 onerror，每当 <img> 标签或 <script> 等 HTML 元素命中不存在的资源时，onerror 事件处理程序就会触发。

来看下面的例子：

<body>
  <img src="nowhere-to-be-found.png">
</body>

当访问的资源缺失时，浏览器的控制台就会报错：

GET http://localhost:5000/nowhere-to-be-found.png
[HTTP/1.1 404 Not Found 3ms]

在 JavaScript 中，可以使用适当的事件处理程序“捕获”此错误：

const image = document.querySelector("img");

image.onerror = function(event) {
  console.log(event);
};

或者使用 addEventListener 来监听 error 事件，当发生错误时进行处理：

const image = document.querySelector("img");

image.addEventListener("error", function(event) {
  console.log(event);
});

此模式对于加载备用资源以代替丢失的图像或脚本很有用。不过需要记住：onerror 与 throw 或 try/catch 是无关的。

（4）Promise 的错误处理

下面来通过最上面的 toUppercase 例子看看 Promise 是如何处理错误的：

function toUppercase(string) {
  if (typeof string !== "string") {
    throw TypeError("Expected string");
  }

  return string.toUpperCase();
}

toUppercase(4);

对上面的代码进行修改，不返回简单的字符串或异常，而是分别使用 Promise.reject 和 Promise.resolve 来处理错误和成功：

function toUppercase(string) {
  if (typeof string !== "string") {
    return Promise.reject(TypeError("Expected string"));
  }

  const result = string.toUpperCase();

  return Promise.resolve(result);
}

从技术上讲，这段代码中没有任何异步的内容，但它可以很好地说明 Promise 的错误处理机制。

现在我们就可以在 then 中使用结果，并使用 catch 来处理被拒绝的 Promise：

toUppercase(99)
  .then(result => result)
  .catch(error => console.error(error.message));

输出结果如下：

在 Promise 中，catch 是用来处理错误的。除了 catch 还有 finally，类似于 try/catch 中的finally。不管 Promise 结果如何，finally 都会执行：

toUppercase(99)
  .then(result => result)
  .catch(error => console.error(error.message))
  .finally(() => console.log("Finally"));

输出结果如下：

需要记住，任何传递给 then/catch/finally 的回调都是由微任务队列异步处理的。它们是微任务，优先于事件和计时器等宏任务。

（5）Promise, error, throw

作为拒绝 Promise 时的最佳实践，可以传入 error 对象：

Promise.reject(TypeError("Expected string"));

这样，在整个代码库中保持错误处理的一致性。其他团队成员总是可以访问 error.message，更重要的是可以检查堆栈跟踪。

除了 Promise.reject 之外，还可以通过抛出异常来退出 Promise 执行链。来看下面的例子：

Promise.resolve("A string").then(value => {
  if (typeof value === "string") {
    throw TypeError("Expected number!");
  }
});

这里使用字符串来 resolve 一个 Promise，然后执行链立即使用 throw 断开。为了停止异常的传播，可以使用 catch 来捕获错误：

Promise.resolve("A string")
  .then(value => {
    if (typeof value === "string") {
      throw TypeError("Expected number!");
    }
  })
  .catch(reason => console.log(reason.message));

这种模式在 fetch 中很常见，可以通过检查 response 对象来查找错误：

fetch("https://example-dev/api/")
  .then(response => {
    if (!response.ok) {
      throw Error(response.statusText);
    }

    return response.json();
  })
  .then(json => console.log(json));

这里的异常可以使用 catch 来拦截。如果失败了，并且没有拦截它，异常就会在堆栈中向上冒泡。这本身并没有什么问题，但不同的环境对未捕获的拒绝有不同的反应。

例如，Node.js 会让任何未处理 Promise 拒绝的程序崩溃：

DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

所以，最好去捕获错误。

（6）使用 Promise 处理定时器错误

对于计时器或事件，不能捕获回调抛出的异常。上面有一个例子：

function failAfterOneSecond() {
  setTimeout(() => {
    throw Error("Error");
  }, 1000);
}

// 不生效
try {
  failAfterOneSecond();
} catch (error) {
  console.error(error.message);
}

我们可以使用 Promise 来包装计时器：

function failAfterOneSecond() {
  return new Promise((_, reject) => {
    setTimeout(() => {
      reject(Error("Error"));
    }, 1000);
  });
}

这里通过 reject 捕获了一个 Promise 拒绝，它带有一个 error 对象。此时就可以用 catch 来处理异常了：

failAfterOneSecond().catch(reason => console.error(reason.message));

这里使用 value 作为 Promise 的返回值，使用 reason 作为拒绝的返回对象。

（7）Promise.all 的错误处理

Promise.all 方法接受一个 Promise 数组，并返回所有解析 Promise 的结果数组：

const promise1 = Promise.resolve("one");
const promise2 = Promise.resolve("two");

Promise.all([promise1, promise2]).then((results) => console.log(results));

// 结果： ['one', 'two']

如果这些 Promise 中的任何一个被拒绝，Promise.all 将拒绝并返回第一个被拒绝的 Promise 的错误。

为了在 Promise.all 中处理这些情况，可以使用 catch：

const promise1 = Promise.resolve("good");
const promise2 = Promise.reject(Error("Bad"));
const promise3 = Promise.reject(Error("Bad+"));

Promise.all([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(error => console.error(error.message));

如果想要运行一个函数而不考虑 Promise.all 的结果，可以使用 finally：

Promise.all([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(error => console.error(error.message))
  .finally(() => console.log("Finally"));

（8）Promise.any 的错误处理

Promise.any 和 Promise.all 恰恰相反。Promise.all 如果某一个失败，就会抛出第一个失败的错误。而 Promise.any 总是返回第一个成功的 Promise，无论是否发生任何拒绝。

相反，如果传递给 Promise.any 的所有 Promise 都被拒绝，那产生的错误就是 AggregateError。来看下面的例子：

const promise1 = Promise.reject(Error("Error"));
const promise2 = Promise.reject(Error("Error+"));

Promise.any([promise1, promise2])
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log("Finally"));

输出结果如下：

这里用 catch 处理错误。AggregateError 对象具有与基本错误相同的属性，外加一个 errors 属性：

const promise1 = Promise.reject(Error("Error"));
const promise2 = Promise.reject(Error("Error+"));

Promise.any([promise1, promise2])
  .then(result => console.log(result))
  .catch(error => console.error(error.errors))
  .finally(() => console.log("Finally"));

此属性是一个包含所有被拒绝的错误信息的数组：

（9）Promise.race 的错误处理

Promise.race 接受一个 Promise 数组，并返回第一个成功的 Promise 的结果：

const promise1 = Promise.resolve("one");
const promise2 = Promise.resolve("two");

Promise.race([promise1, promise2]).then(result => 
  console.log(result)
);

// 结果：one

那如果有被拒绝的 Promise，但它不是传入数组中的第一个呢：

const promise1 = Promise.resolve("one");
const rejection = Promise.reject(Error("Bad"));
const promise2 = Promise.resolve("two");

Promise.race([promise1, rejection, promise2]).then(result =>
  console.log(result)
);

// 结果：one

这样结果还是 one，不会影响正常的执行。

如果被拒绝的 Promise 是数组的第一个元素，则 Promise.race 拒绝，就必须要必须捕获拒绝：

const promise1 = Promise.resolve("one");
const rejection = Promise.reject(Error("Bad"));
const promise2 = Promise.resolve("two");

Promise.race([rejection, promise1, promise2])
  .then(result => console.log(result))
  .catch(error => console.error(error.message));

// Bad

（10）Promise.allSettled 的错误处理

Promise.allSettled 是 ECMAScript 2020 新增的 API。它和 Promise.all 类似，不过不会被短路，也就是说当Promise全部处理完成后，可以拿到每个 Promise 的状态, 而不管其是否处理成功。

来看下面的例子：

const promise1 = Promise.resolve("Good!");
const promise2 = Promise.reject(Error("Bad!"));

Promise.allSettled([promise1, promise2])
  .then(results => console.log(results))
  .catch(error => console.error(error))
  .finally(() => console.log("Finally"));

这里向 Promise.allSettled 传递了一个包含两个 Promise 的数组：一个已解决，另一个已拒绝。

输出结果如下：

（11）async/await 的错误处理

JavaScript 中的 async/await 表示异步函数，用同步的方式去编写异步，可读性更好。

下面来改编上面的同步函数 toUppercase，通过将 async 放在 function 关键字之前将其转换为异步函数：

async function toUppercase(string) {
  if (typeof string !== "string") {
    throw TypeError("Expected string");
  }

  return string.toUpperCase();
}

只需在 function 前加上 async 前缀，就可以让函数返回一个 Promise。这意味着我们可以在函数调用之后链式调用 then、catch 和 finally：

toUppercase("hello")
  .then(result => console.log(result))
  .catch(error => console.error(error.message))
  .finally(() => console.log("Always runs!"));

当从 async 函数中抛出异常时，异常会成为底层 Promise 被拒绝的原因。任何错误都可以从外部用 catch 拦截。

除此之外，还可以使用 try/catch/finally 来处理错误，就像在同步函数中一样。

例如，从另一个函数 consumer 中调用 toUppercase，它方便地用 try/catch/finally 包装了函数调用：

async function toUppercase(string) {
  if (typeof string !== "string") {
    throw TypeError("Expected string");
  }

  return string.toUpperCase();
}

async function consumer() {
  try {
    await toUppercase(98);
  } catch (error) {
    console.error(error.message);
  } finally {
    console.log("Finally");
  }
}

consumer();

输出结果如下：

（12）异步生成器的错误处理

JavaScript 中的异步生成器是能够生成 Promise 而不是简单值的生成器函数。它将生成器函数与异步相结合，结果是一个生成器函数，其迭代器对象向消费者公开一个 Promise。

要创建一个异步生成器，需要声明一个带有星号 * 的生成器函数，前缀为 async：

async function* asyncGenerator() {
  yield 33;
  yield 99;
  throw Error("Bad!"); // Promise.reject
}

因为异步生成器是基于 Promise，所以同样适用 Promise 的错误处理规则，在异步生成器中，throw 会导致 Promise 拒绝，可以用 catch 拦截它。

要想从异步生成器处理 Promise，可以使用 then：

const go = asyncGenerator();

go.next().then(value => console.log(value));
go.next().then(value => console.log(value));
go.next().catch(reason => console.error(reason.message));

输出结果如下：

也使用异步迭代 for await...of。要使用异步迭代，需要用 async 函数包装 consumer：

async function* asyncGenerator() {
  yield 33;
  yield 99;
  throw Error("Bad"); // Promise.reject
}

async function consumer() {
  for await (const value of asyncGenerator()) {
    console.log(value);
  }
}

consumer();

与 async/await 一样，可以使用 try/catch 来处理任何异常：

async function* asyncGenerator() {
  yield 33;
  yield 99;
  throw Error("Bad"); // Promise.reject
}

async function consumer() {
  try {
    for await (const value of asyncGenerator()) {
      console.log(value);
    }
  } catch (error) {
    console.error(error.message);
  }
}

consumer();

输出结果如下：

从异步生成器函数返回的迭代器对象也有一个 throw() 方法。在这里对迭代器对象调用 throw() 不会抛出异常，而是 Promise 拒绝：

async function* asyncGenerator() {
  yield 33;
  yield 99;
  yield 11;
}

const go = asyncGenerator();

go.next().then(value => console.log(value));
go.next().then(value => console.log(value));

go.throw(Error("Reject!"));

go.next().then(value => console.log(value));

输出结果如下：

可以通过以下方式来捕获错误：

go.throw(Error("Let's reject!")).catch(reason =>
  console.error(reason.message)
);

我们知道，迭代器对象的 throw() 是在生成器内部发送异常的。所以还可以使用以下方式来处理错误：

async function* asyncGenerator() {
  try {
    yield 33;
    yield 99;
    yield 11;
  } catch (error) {
    console.error(error.message);
  }
}

const go = asyncGenerator();

go.next().then(value => console.log(value));
go.next().then(value => console.log(value));

go.throw(Error("Reject!"));

go.next().then(value => console.log(value));

5. Node.js 错误处理

（1）同步错误处理

Node.js 中的同步错误处理与 JavaScript 是一样的，可以使用 try/catch/finally。

（2）异步错误处理：回调模式

对于异步代码，Node.js 强烈依赖两个术语：

事件发射器
回调模式

在回调模式中，异步 Node.js API 接受一个函数，该函数通过事件循环处理并在调用堆栈为空时立即执行。

来看下面的例子：

const { readFile } = require("fs");

function readDataset(path) {
  readFile(path, { encoding: "utf8" }, function(error, data) {
    if (error) console.error(error);
    // data操作
  });
}

这里可以看到回调中错误处理：

function(error, data) {
    if (error) console.error(error);
    // data操作
}

如果使用 fs.readFile 读取给定路径时出现任何错误，我们都会得到一个 error 对象。这时我们可以：

单地记录错误对象。
抛出异常。
将错误传递给另一个回调。

要想抛出异常，可以这样做：

const { readFile } = require("fs");

function readDataset(path) {
  readFile(path, { encoding: "utf8" }, function(error, data) {
    if (error) throw Error(error.message);
    // data操作
  });
}

但是，与 DOM 中的事件和计时器一样，这个异常会使程序崩溃。使用 try/catch 停止它的尝试将不起作用：

const { readFile } = require("fs");

function readDataset(path) {
  readFile(path, { encoding: "utf8" }, function(error, data) {
    if (error) throw Error(error.message);
    // data操作
  });
}

try {
  readDataset("not-here.txt");
} catch (error) {
  console.error(error.message);
}

如果不想让程序崩溃，可以将错误传递给另一个回调：

const { readFile } = require("fs");

function readDataset(path) {
  readFile(path, { encoding: "utf8" }, function(error, data) {
    if (error) return errorHandler(error);
    // data操作
  });
}

这里的 errorHandler 是一个简单的错误处理函数：

function errorHandler(error) {
  console.error(error.message);
  // 处理错误：写入日志、发送到外部logger
}

（3）异步错误处理：事件发射器

Node.js 中的大部分工作都是基于事件的。大多数时候，我们会与发射器对象和一些侦听消息的观察者进行交互。

Node.js 中的任何事件驱动模块（例如 net）都扩展了一个名为 EventEmitter 的根类。EventEmitter 有两个基本方法：on 和 emit。

下面来看一个简单的 HTTP 服务器：

const net = require("net");

const server = net.createServer().listen(8081, "127.0.0.1");

server.on("listening", function () {
  console.log("Server listening!");
});

server.on("connection", function (socket) {
  console.log("Client connected!");
  socket.end("Hello client!");
});

这里我们监听了两个事件：listening 和 connection。除了这些事件之外，事件发射器还公开一个错误事件，在出现错误时触发。

如果这段代码监听的端口是 80，就会得到一个异常：

const net = require("net");

const server = net.createServer().listen(80, "127.0.0.1");

server.on("listening", function () {
  console.log("Server listening!");
});

server.on("connection", function (socket) {
  console.log("Client connected!");
  socket.end("Hello client!");
});

输出结果如下：

events.js:291
      throw er;
      ^

Error: listen EACCES: permission denied 127.0.0.1:80
Emitted 'error' event on Server instance at: ...

为了捕获它，可以为 error 注册一个事件处理函数：

server.on("error", function(error) {
  console.error(error.message);
});

这样就会输出：

listen EACCES: permission denied 127.0.0.1:80

6. 错误处理最佳实践

最后，我们来看看处理 JavaScript 异常的最佳实践！

（1）不要过度处理错误

错处理的第一个最佳实践就是不要过度使用“错误处理”。通常，我们会在外层处理错误，从内层抛出错误，这样一旦出现错误，就可以更好地理解是什么原因导致的。

然而，开发人员常犯的错误之一是过度使用错误处理。有时这样做是为了让代码在不同的文件和方法中看起来保持一致。但是，不幸的是，这些会对应用程序和错误检测造成不利影响。

因此，只关注代码中可能导致错误的地方，错误处理将有助于提高代码健壮性并增加检测到错误的机会。

（2）避免浏览器特定的非标准方法

尽管许多浏览器都遵循一个通用标准，但某些特定于浏览器的 JavaScript 实现在其他浏览器上却失败了。例如，以下语法仅适用于 Firefox：

catch(e) { 
  console.error(e.filename + ': ' + e.lineNumber); 
}

因此，在处理错误时，尽可能使用跨浏览器友好的 JavaScript 代码。

（3）远程错误记录

当发生错误时，我们应该得到通知以了解出了什么问题。这就是错误日志的用武之地。JavaScript 代码是在用户的浏览器中执行的。因此，需要一种机制来跟踪客户端浏览器中的这些错误，并将它们发送到服务器进行分析。

可以尝试使用以下工具来监控并上报错误：

Sentry（https://sentry.io/）： 专注于异常（应用崩溃）而不是信息错误。它提供了应用中错误的完整概述，包括受影响的用户数量、调用堆栈、受影响的浏览器以及导致错误的提交等详细信息。
Rollbar（https://rollbar.com/）： 用于前端、后端和移动应用的无代理错误监控工具。它提供人工智能辅助的工作流程，使开发人员能够在错误影响用户之前立即采取行动。它会显示受错误影响的客户数量、受影响的平台或浏览器的类型以及之前是否发生过类似错误或是否已经存在解决方案等数据。

（4）错误处理中间件（Node.js）

Node.js 环境支持使用中间件向服务端应用中添加功能。因此可以创建一个错误处理中间件。使用中间件的最大好处是所有错误都在一个地方集中处理。可以选择启用/禁用此设置以轻松进行测试。

以下是创建基本中间件的方法：

const logError = err => {
    console.log("ERROR: " + String(err))
}

const errorLoggerMiddleware = (err, req, res, next) => {
    logError(err)
    next(err)
}

const returnErrorMiddleware = (err, req, res, next) => {
    res.status(err.statusCode || 500)
       .send(err.message)
}

module.exports = {
    logError,
    errorLoggerMiddleware,
    returnErrorMiddleware
}

可以像下面这样在应用中使用此中间件：

const { errorLoggerMiddleware, returnErrorMiddleware } = require('./errorMiddleware')

app.use(errorLoggerMiddleware)

app.use(returnErrorMiddleware)

现在可以在中间件内定义自定义逻辑以适当地处理错误。而无需再担心在整个代码库中实现单独的错误处理结构。

（5）捕获所有未捕获的异常（Node.js）

我们可能永远无法涵盖应用中可能发生的所有错误。因此，必须实施回退策略以捕获应用中所有未捕获的异常。

可以这样做：

process.on('uncaughtException', error => {
    console.log("ERROR: " + String(error))
    // 其他处理机制
})

还可以确定发生的错误是标准错误还是自定义操作错误。根据结果，可以退出进程并重新启动它以避免意外行为。

（6）捕获所有未处理的 Promise 拒绝（Node.js）

与异常不同的是，promise 拒绝不会抛出错误。因此，一个被拒绝的 promise 可能只是一个警告，这让应用有可能遇到意外行为。因此，实现处理 promise 拒绝的回退机制至关重要。

可以这样做：

const promiseRejectionCallback = error => {
    console.log("PROMISE REJECTED: " + String(error))
}

process.on('unhandledRejection', callback)

参考文章

https://www.valentinog.com/blog/error/
https://kinsta.com/blog/errors-in-javascript/
https://blog.bitsrc.io/javascript-exception-handling-patterns-best-practices-f7d6fcab735d

者｜Lukas Gisder-Dubé

译者｜谢丽

本文将分三部分分析 JavaScript 中的错误，首先我们将了解错误的一般情况，之后，我们将关注后端（Node.js + Express.js），最后，我们将重点看下如何处理 React.js 中的错误。选择这些框架，是因为它们是目前最流行的，但是，你应该也能够将这些新发现应用到其他框架中吧！

继上一篇文章 (https://link.medium.com/MO32x55aNR) 之后，我想谈谈错误。错误很好——我相信你以前听过这个说法。乍一看，我们害怕错误，因为错误往往会涉及到在公共场合受到伤害或羞辱。通过犯错误，我们实际上学会了如何不去做某事，以及下次如何做得更好。

显然，这是关于从现实生活的错误中学习。编程中的错误有点不同。它们为我们提供了很好的特征来改进我们的代码，并告诉用户什么地方出了问题（也可能是教他们如何修复它）。

GitHub(https://github.com/gisderdube/graceful-error-handling) 上提供了一个完整的样例项目。

JavaScript 错误和一般处理

throw new Error('something went wrong') 会在 JavaScript 中创建一个错误实例，并停止脚本的执行，除非你对错误做了一些处理。当你作为 JavaScript 开发者开启自己的职业生涯时，你自己很可能不会这样做，但是，你已经从其他库（或运行时）那里看到了，例如，类似“ReferenceError: fs 未定义”这样的错误。

Error 对象

Error 对象有两个内置属性供我们使用。第一个是消息，作为参数传递给 Error 构造函数，例如 new Error(“这是错误消息”)。你可以通过 message 属性访问消息：

const myError = new Error(‘请改进代码’)
console.log(myError.message) // 请改进代码

第二个是错误堆栈跟踪，这个属性非常重要。你可以通过 stack 属性访问它。错误堆栈将为你提供历史记录（调用堆栈），从中可以查看哪个文件导致了错误。堆栈的上部也包括消息，然后是实际的堆栈，从距离错误发生最近的点开始，一直到最外层“需要为错误负责”的文件：

Error: 请改进代码
 at Object.<anonymous> (/Users/gisderdube/Documents/_projects/hacking.nosync/error-handling/src/general.js:1:79)
 at Module._compile (internal/modules/cjs/loader.js:689:30)
 at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
 at Module.load (internal/modules/cjs/loader.js:599:32)
 at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
 at Function.Module._load (internal/modules/cjs/loader.js:530:3)
 at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
 at startup (internal/bootstrap/node.js:266:19)
 at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)

抛出和处理错误

现在，Error 实例本身不会导致任何结果，例如，new Error('...') 不会做任何事情。当错误被抛出时，就会变得更有趣。然后，如前所述，脚本将停止执行，除非你在流程中以某种方式对它进行了处理。记住，是手动抛出错误，还是由库抛出错误，甚至由运行时本身（Node 或浏览器），都没有关系。让我们看看如何在不同的场景中处理这些错误。

try .... catch

这是最简单但经常被遗忘的错误处理方法——多亏 async / await，它的使用现在又多了起来。它可以用来捕获任何类型的同步错误，例如，如果我们不把 console.log(b) 放在一个 try … catch 块中，脚本会停止执行。

… finally

有时候，不管是否有错误，代码都需要执行。你可以使用第三个可选块 finally。通常，这与在 try…catch 语句后面加一行代码是一样的，但它有时很有用。

异步性——回调

异步性，这是在使用 JavaScript 时必须考虑的一个主题。当你有一个异步函数，并且该函数内部发生错误时，你的脚本将继续执行，因此，不会立即出现任何错误。当使用回调函数处理异步函数时（不推荐），你通常会在回调函数中收到两个参数，如下所示：

如果有错误，err 参数就等同于那个错误。如果没有，参数将是 undefined 或 null。要么在 if(err) 块中返回某项内容，要么将其他指令封装在 else 块中，这一点很重要，否则你可能会得到另一个错误，例如，result 可能未定义，而你试图访问 result.data，类似这样的情况。

异步性——Promises

处理异步性的更好方法是使用 Promises。在这一点上，除了代码可读性更强之外，我们还改进了错误处理。只要有一个 catch 块，我们就不再需要太关注具体的错误捕获。在链接 Promises 时，catch 块捕获会自 Promises 执行或上一个 catch 块以来的所有错误。注意，没有 catch 块的 Promises 不会终止脚本，但会给你一条可读性较差的消息，比如：

(node:7741) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: something went wrong
(node:7741) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. */

因此，务必要在 Promises 中加入 catch 块。

回到 try … catch

随着 JavaScript 引入 async / await，我们回到了最初的错误处理方法，借助 try … catch … finally，错误处理变得非常简单。

因为这和我们处理“普通”同步错误的方法是一样的，所以如果需要的话，更容易使用作用域更大的 catch 语句。

服务器端错误的产生和处理

现在，我们已经有了处理错误的工具，让我们看下，我们在实际情况下能用它们做什么。后端错误的产生和处理是应用程序至关重要的组成部分。对于错误处理，有不同的方法。我将向你展示一个自定义 Error 构造函数和错误代码的方法，我们可以轻松地传递到前端或任何 API 消费者。构建后端的细节并不重要，基本思路不变。

我们将使用 Express.js 作为路由框架。让我们考虑下最有效的错误处理结构。我们希望：

一般错误处理，如某种回退，基本上只是说：“有错误，请再试一次或联系我们”。这并不是特别聪明，但至少通知用户，有地方错了——而不是无限加载或进行类似地处理。
特殊错误处理为用户提供详细信息，让用户了解有什么问题以及如何解决它，例如，有信息丢失，数据库中的条目已经存在等等。

构建一个自定义 Error 构造函数

我们将使用已有的 Error 构造函数并扩展它。继承在 JavaScript 中是一件危险的事情，但根据我的经验，在这种情况下，它非常有用。我们为什么需要它？我们仍然希望堆栈跟踪给我们一个很好的调试体验。扩展 JavaScript 原生 Error 构造函数可以让我们方便地获得堆栈跟踪。我们唯一要做的是添加代码（我们稍后可以通过错误代码访问）和要传递给前端的状态（http 状态代码）。

如何处理路由

在完成 Error 的自定义之后，我们需要设置路由结构。正如我指出的那样，我们想要一个单点真错误处理，就是说，对于每一个路由，我们要有相同的错误处理行为。在默认情况下，由于路由都是封装的，所以 Express 并不真正支持那种方式。

为了解决这个问题，我们可以实现一个路由处理程序，并把实际的路由逻辑定义为普通的函数。这样，如果路由功能（或任何内部函数）抛出一个错误，它将返回到路由处理程序，然后可以传给前端。当后端发生错误时，我们可以用以下格式传递一个响应给前端——比如一个 JSON API：

{
 error: 'SOME_ERROR_CODE',
 description: 'Something bad happened. Please try again or contact support.'
}

准备好不知所措。当我说下面的话时，我的学生总是生我的气：

如果你咋看之下并不是什么都懂，那没问题。只要使用一段时间，你就会发现为什么要那样。

顺便说一下，这可以称为自上而下的学习，我非常喜欢。

路由处理程序就是这个样子：

我希望你能读下代码中的注释，我认为那比我在这里解释更有意义。现在，让我们看下实际的路由文件是什么样子：

在这些例子中，我没有做任何有实际要求的事情，我只是假设不同的错误场景。例如，GET /city 在第 3 行结束，POST /city 在第 8 号结束等等。这也适用于查询参数，例如，GET /city?startsWith=R。本质上，你会有一个未处理的错误，前端会收到：

{
 error: 'GENERIC',
 description: 'Something went wrong. Please try again or contact support.'
}

或者你将手动抛出 CustomError，例如：

throw new CustomError('MY_CODE', 400, 'Error description')

上述代码会转换成：

{
 error: 'MY_CODE',
 description: 'Error description'
}

既然我们有了这个漂亮的后端设置，我们就不会再把错误日志泄漏到前端，而总是返回有用的信息，说明出现了什么问题。

确保你已经在 GitHub(https://github.com/gisderdube/graceful-error-handling) 上看过完整的库。你可以把它用在任何项目中，并根据自己的需要来修改它！

向用户显示错误

下一个也是最后一个步骤是管理前端的错误。这里，你要使用第一部分描述的工具处理由前端逻辑产生的错误。不过，后端的错误也要显示。首先，让我们看看如何显示错误。如前所述，我们将使用 React 进行演练。

把错误保存在 React 状态中

和其他数据一样，错误和错误消息会变化，因此，你想把它们放在组件状态中。在默认情况下，你想要在加载时重置错误，以便用户第一次看到页面时，不会看到错误。

接下来我们必须澄清的是不同错误类型及与其匹配的可视化表示。就像在后端一样，有 3 种类型：

全局错误，例如，其中一个常见的错误是来自后端，或者用户没有登录等。
来自后端的具体错误，例如，用户向后端发送登录凭证。后端答复密码不匹配。前端无法进行此项验证，所以这样的信息只能来自后端。
由前端导致的具体错误，例如，电子邮件输入验证失败。

2 和 3 非常类似，虽然源头不一样，但如果你愿意，就可以在同样的 state 中处理。我们将从代码中看下如何实现。

我将使用 React 的原生 state 实现，但是，你还可以使用类似 MobX 或 Redux 这样的状态管理系统。

全局错误

通常，我将把这些错误保存在最外层的有状态组件中，并渲染一个静态 UI 元素，这可能是屏幕顶部的一个红色横幅、模态或其他什么东西，设计实现由你决定。

让我们看下代码：

正如你看到的那样，Application.js 中的状态存在错误。我们也有方法可以重置并改变错误的值。我们把值和重置方法传递给 GlobalError 组件，在点击'x'时，该组件会显示错误并重置它。让我们看看 GlobalError 组件：

你可以看到，在第 5 行，如果没有错误，我们就不做任何渲染。这可以防止我们的页面上出现一个空的红框。当然，你可以改变这个组件的外观和行为。例如，你可以将“x”替换为 Timeout，几秒钟后重置错误状态。

现在，你已经准备好在任何地方使用全局错误状态了，只是从 Application.js 把 _setError 向下传递，而且，你可以设置全局错误，例如，当一个请求从后端返回了字段 error: 'GENERIC'。例如：

如果你比较懒，到这里就可以结束了。即使你有具体的错误，你总是可以改变全局错误状态，并把错误提示框显示在页面顶部。不过，我将向你展示如何处理和显示具体的错误。为什么？首先，这是关于错误处理的权威指南，所以我不能停在这里。其次，如果你只是把所有的错误都作为全局错误来显示，那么体验人员会疯掉。

处理具体的请求错误

和全局错误类似，我们也有位于其他组件内部的局部错误状态，过程相同：

有件事要记住，清除错误通常有一个不同的触发器。用' x '删除错误是没有意义的。关于这一点，在发出新请求时清除错误会更有意义。你还可以在用户进行更改时清除错误，例如当修改输入值时。

源于前端的错误

如前所述，这些错误可以使用与处理后端具体错误相同的方式（状态）进行处理。这次，我们将使用一个有输入字段的示例，只允许用户在实际提供以下输入时删除一个城市：

使用错误代码实现错误国际化

也许你一直想知道为什么我们有这些错误代码，例如 GENERIC ，我们只是显示从后端传递过来的错误描述。现在，随着你的应用越来越大，你就会希望征服新的市场，并在某个时候面临多种语言支持的问题。如果你到了这个时候，你就可以使用前面提到的错误代码使用用户的语言来显示恰当的描述。

我希望你对如何处理错误有了一些了解。忘掉 console.error(err)，它现在已经是过去时了。可以使用它进行调试，但它不应该出现在最终的产品构建中。为了防止这种情况，我建议你使用日志库，我过去一直使用 loglevel，我对它非常满意。

英文原文

https://levelup.gitconnected.com/the-definite-guide-to-handling-errors-gracefully-in-javascript-58424d9c60e6

在线咨询

上一篇：JavaScript 关闭浏览器 (不弹出提示框)
下一篇：HTML <a> 标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

微软已修复，Win10/Win11被曝MSHTML零日漏洞

1. 错误概述

2. 错误类型

（1）SyntaxError

（2）TypeError

（3）ReferenceError

（4）RangeError

（5）URIError

（6）EvalError

（7）InternalError

（8）创建自定义错误类型

3. 抛出错误

4. 抛出异常时会发生什么？

5. 同步错误处理

（1）常规函数的错误处理

（2）生成器函数的错误处理

6. 异步错误处理

（1）定时器的错误处理

（2）事件的错误处理

（3）onerror

（4）Promise 的错误处理

（5）Promise, error, throw

（6）使用 Promise 处理定时器错误

（7）Promise.all 的错误处理

（8）Promise.any 的错误处理

（9）Promise.race 的错误处理

（10）Promise.allSettled 的错误处理

（11）async/await 的错误处理

（12）异步生成器的错误处理

5. Node.js 错误处理

（1）同步错误处理

（2）异步错误处理：回调模式

（3）异步错误处理：事件发射器

6. 错误处理最佳实践

（1）不要过度处理错误

（2）避免浏览器特定的非标准方法

（3）远程错误记录

（4）错误处理中间件（Node.js）

（5）捕获所有未捕获的异常（Node.js）

（6）捕获所有未处理的 Promise 拒绝（Node.js）

参考文章

JavaScript 错误和一般处理

服务器端错误的产生和处理

向用户显示错误

您的项目需求