browser-log-stream 是一个可以在浏览器中实现对 console.log() 输出的实时监听器，支持连接到 Websocket 服务器将输出流上传到服务端的 npm 包。
安装
在项目中使用 npm 安装：
npm install browser-log-stream
或者 yarn 安装：
yarn add browser-log-stream
使用
使用 browser-log-stream 一般需要两个步骤：首先在服务端启动一个 Websocket 服务器，接着在客户端连接到该服务器并开始监听输出流。
服务端
服务端可以使用任何支持 Websocket 的框架编写，例如常用的 express Web 框架。以下是一个简单的基于 ws 模块实现的 Websocket 服务器：
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -------------- -
-------------- --- ------ -------------
---------------- -------- ----------------- -
--------------------- --------- ---- ---------
---
---在这个例子中，wss 实例会接收客户端的连接并将服务端接收到的信息打印在控制台上。
客户端
在客户端需要引入 browser-log-stream 并使用 StreamClient 类来连接服务器，例如：
-- -------------------- ---- ------- ------ - ------------ - ---- --------------------- ----- ------ - --- ------------------------------------ ----------------- -- -- - ---------------------- -- --------- --- -------------------- --------- -- - --------------------- --------- ---- --------- ---
在这个例子中，创建了一个 StreamClient 的实例，并连接到 ws://localhost:8080。一旦连接建立，'open'事件会被触发，然后每个新的输出信息都会通过 'message' 事件传送到客户端。
配置选项
在创建 StreamClient 实例的时候可以提供一个可选的配置对象，例如：
const client = new StreamClient('ws://localhost:8080', {
encoding: 'utf8',
level: 'info',
patterns: ['error', /^debug: /i],
prefix: '[APP]',
timestamp: true,
});encoding
指定输出流的编码，默认值是 'utf8'。
level
指定过滤输出流消息的级别，只接收 'info'、'warn' 和 'error'，默认值是 'info'。
patterns
指定一个正则表达式数组来过滤输出流的消息，只有匹配正则表达式的消息才会被传送到客户端。
prefix
指定输出流消息的前缀字符串，例如 '[APP]'，默认为空字符串。
timestamp
指定是否启用输出流消息的时间戳，不指定时默认值是 false。
示例代码
服务端：
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -------------- -
-------------- --- ------ -------------
---------------- -------- ----------------- -
--------------------- --------- ---- ---------
---
---客户端：
-- -------------------- ---- ------- ------ - ------------ - ---- --------------------- ----- ------ - --- ------------------------------------ ----------------- -- -- - ---------------------- -- --------- --- -------------------- --------- -- - --------------------- --------- ---- --------- ---
完整代码：
-- -------------------- ---- -------
-- ------
----- --------- - --------------
----- - ------------ - - ------------------------------
----- --- - --- ------------------ ----- ---- ---
----- ------ - --- ------------------------------------
-------------------- -------- -------------- -
-------------- --- ------ -------------
---------------- -------- ----------------- -
--------------------- --------- ---- ---------
---
---
----------------- -- -- -
---------------------- -- ---------
---
-------------------- --------- -- -
--------------------- --------- ---- ---------
---
------------------ ---- ------
------------------ ------- ------
------------------- ----- ------在浏览器中打开 index.html，在控制台中可以看到输出结果：
[APP] Test info log // 浏览器端的输出结果 [APP] Test warning log [APP] Test error log Connected to server // 客户端的输出结果 [SERVER] Received: Test info log [SERVER] Received: Test warning log [SERVER] Received: Test error log
结论
使用 browser-log-stream 可以方便的将浏览器端 console.log() 输出的信息实时上传到服务端，免去了手动粘贴、下载日志文件等繁琐步骤，节省了开发和调试的时间成本。同时，该类功能还可以扩展为错误日志的监控，将错误信息上传至服务器，从而更快的发现和修复潜在的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde5157