Binding callbacks on Laravel Echo with Laravel Websockets - laravel-echo

Question

I want to know when my users are getting errors connecting or the connection drops out. I've read a lot saying this is possible but I'm getting no where and I'm starting to think it maybe an issue with a third party like https://github.com/beyondcode/laravel-websockets which I am using, has anyone had any issues with this?
The following yields no logs at all.
window.Echo.connector.pusher.bind('reconnect', (channel, data) => {
console.log('RE-CONNECTED');
});
window.Echo.connector.pusher.bind('reconnecting', (channel, data) => {
console.log('re-connecting...');
});
window.Echo.connector.pusher.bind('reconnect_error', (channel, data) => {
console.log('reconnection error!');
});
window.Echo.connector.pusher.bind('reconnect_attempt', (channel, data) => {
console.log('re-connecting...');
});
window.Echo.connector.pusher.bind('connect_error', (channel, data) => {
console.log('connect error...');
});
window.Echo.connector.pusher.bind('error', (channel, data) => {
console.log('error...');
});
window.Echo.connector.pusher.bind_global((channel, data) => {
console.log(channel, data);
});
If I use something like this which is being suggested
window.Echo.connector.socket.on('connect_error', function(){
console.log('connected', window.Echo.socketId());
});
window.Echo.connector.socket.on('connect', function(){
console.log('connected', window.Echo.socketId());
});
window.Echo.connector.socket.on('disconnect', function(){
console.log('disconnected');
});
window.Echo.connector.socket.on('reconnecting', function(attemptNumber){
console.log('reconnecting', attemptNumber);
});
I get Uncaught TypeError: Cannot read property 'on' of undefined

Answer 1

I have discovered the correct way to bind the events;
window.Echo.connector.pusher.connection.bind($eventName, (payload) => {});
Event references can be found here https://pusher.com/docs/channels/using_channels/connection
window.Echo.connector.pusher.connection.bind('connecting', (payload) => {
/**
* All dependencies have been loaded and Channels is trying to connect.
* The connection will also enter this state when it is trying to reconnect after a connection failure.
*/
console.log('connecting...');
});
window.Echo.connector.pusher.connection.bind('connected', (payload) => {
/**
* The connection to Channels is open and authenticated with your app.
*/
console.log('connected!', payload);
});
window.Echo.connector.pusher.connection.bind('unavailable', (payload) => {
/**
* The connection is temporarily unavailable. In most cases this means that there is no internet connection.
* It could also mean that Channels is down, or some intermediary is blocking the connection. In this state,
* pusher-js will automatically retry the connection every 15 seconds.
*/
console.log('unavailable', payload);
});
window.Echo.connector.pusher.connection.bind('failed', (payload) => {
/**
* Channels is not supported by the browser.
* This implies that WebSockets are not natively available and an HTTP-based transport could not be found.
*/
console.log('failed', payload);
});
window.Echo.connector.pusher.connection.bind('disconnected', (payload) => {
/**
* The Channels connection was previously connected and has now intentionally been closed
*/
console.log('disconnected', payload);
});
window.Echo.connector.pusher.connection.bind('message', (payload) => {
/**
* Ping received from server
*/
console.log('message', payload);
});