如何在React客户端获取NestJS WebSocket抛出的WsException错误？

NestJS抛出的WsException会被自动包装并通过Socket.io传递给前端，你可以通过两种方式在React中捕获这个错误：

方式1：在emit时传入回调函数 #

Socket.io支持发送事件时附带回调函数，NestJS会将错误作为回调的第一个参数返回，成功响应则作为第二个参数。修改你的前端代码如下：

const MessageData = {
    conversation: 16
};
socket.emit("createMessage", MessageData, (error, response) => {
    if (error) {
        // 捕获到NestJS抛出的WsException
        console.error('错误信息:', error.message);
        // 这里可以添加UI提示逻辑，比如弹窗展示错误
        alert(error.message);
        return;
    }
    // 处理成功响应
    console.log('收到响应:', response);
});

方式2：监听全局WebSocket错误事件 #

如果需要捕获所有WebSocket相关的错误（包括连接错误、消息处理错误等），可以监听error事件：

socket.on('error', (error) => {
    console.error('全局WebSocket错误:', error.message);
    // 统一处理错误逻辑
});

说明 #

NestJS默认的Socket.io适配器会将WsException包装为包含status、message和name字段的对象，你可以直接通过error.message获取你在后端定义的错误文本（比如示例中的"Error occured from siam!"）。

内容的提问来源于stack exchange，提问作者Jannat