error: Unexpected server response: 502 on trying to connect to a lambda function through Amazon API gateway Websocket API

I found the root cause on this answer. Basically, when using a Lambda Proxy Integration, the Lambda function response body value needs to be a string. We need to use JSON.stringify() or something similar:

exports.handler = async (event) => {
    var msg = 'connected';
    return { 
        statusCode: 200, 
        body: JSON.stringify({ msg: msg}) /*required on lambda proxy integration*/
    };
};

---

Digging into the docs, on the section Output Format of a Lambda Function for Proxy Integration:

In Lambda proxy integration, API Gateway requires the backend Lambda function to return output according to the following JSON format

    "isBase64Encoded": true|false,
    "statusCode": httpStatusCode,
    "headers": { "headerName": "headerValue", ... },
    "multiValueHeaders": { "headerName": ["headerValue", "headerValue2", ...], ... },
    "body": "..." } 

[...]

The output body is marshalled to the frontend as the method response payload [...]

If the function output is of a different format, API Gateway returns a 502 Bad Gateway error response.

---

Answer to the bonus question:

After adding a new IAM Role AmazonAPIGatewayPushToCloudWatchLogs, getting its ARN on its summary page, we can follow these steps:

Set up API Logging Using the API Gateway Console

And see that the log message on the server is more descriptive:

Execution failed due to configuration error: Malformed Lambda proxy response

As you said above, you have to stringfy all messages of your websocket to send back to your clients.

Besides that, on websocket connect method you must not return, because you need to keep the connection opened to receive messages. You should calls the callback you received on connect method like this

callback(null, {
    statusCode: 200,
});