Expose error message about react-use-websocket

[robtaussig]

I apologize for letting this slip through the cracks. I was away for much of the month of November, and assumed the issue resolved when it was closed.

I don't mind the idea of exposing errors through the hook interface, similar to lastMessage and in addition to the callback option, but wonder if this would even be better than the approach that @florianbepunkt eventually took (which I think is reasonable) -- when/whether to clear lastError depends on circumstances/use-cases that might be beyond the scope of the library, and ultimately can be achieved quite easily with a custom hook around useWebSocket:

const customUseWebSocket = (
  url: string,
  options: Options,
  connect: boolean,
): ReturnType<typeof useWebSocket> & { lastError: Error }  => {
  const [lastError, setLastError] = useState<Error>(null);
  const useWebSocketReturnValue = useWebSocket(url, {
    ...options,
    onError: setLastError,
  }, connect);

  return {
    ...useWebSocketReturnValue,
    lastError,
  };
};

You can replace the useState with useRef if you don't want the error to force a redundant component update.

Ultimately, if your project requirements involve authentication through WebSockets, which usually involves some sort of customized approach, then this library might not be a suitable solution. That said, if I understand @florianbepunkt's solution correctly, that they establish an unauthenticated connection first (to eliminate the possibility of a connectivity issue) before adding auth query parameters, then I believe that can be handled just as easily with this library:

const customUseWebSocket = (
  connectionUrl: string,
  authUrl: string,
  options: Options,
  connect: boolean,
): ReturnType<typeof useWebSocket> & { authError: Error }  => {
  const lastAuthError = useRef<Error>(null);
  const [currentUrl, setCurrentUrl] = useState<string>(connectionUrl);
  const {
    readyState,
    ...useWebSocketReturnValue,
  } = useWebSocket(currentUrl, {
    ...options,
    onError: error => lastAuthError.current = error,
  }, connect);

  useEffect(() => {
    if (readyState === ReadyState.OPEN && currentUrl === connectionUrl) {
      lastAuthError.current = null;
      setCurrentUrl(authUrl);
    }
  }, [readyState, currentUrl, authUrl]);

  return {
    ...useWebSocketReturnValue,
    readyState: connectionUrl === authUrl ? readyState : ReadyState.CONNECTING //Or ReadyState.CLOSED, depending on how you want this pre-authentication step treated
    authError: connectionUrl === authUrl ? lastAuthError.current : null,
  };
};

[florianbepunkt]

I believe, we didn't. We first checked connectivity before authenticating. Then we treated every error before a successful auth (that was not due to lack of connection) as an authentication error. It was not perfect but good enough for our use case.

Another approach we discussed was to use an http api for authentication... it depends on your use case whether this is a viable approach, but the idea was to use http api with an authorizer that would call a step function to create a short-lived hash (like an OTP) that would be sent to the user and the user would transmit the otp via websocket. But we discarded this approach as to complex, since the before mentioned solution was good enough. Hope this helps.

[qmg-rwaller]

Thanks @florianbepunkt and @robtaussig for the suggestions (and @robtaussig for maintaining this cool library)! Yea having researched my issue, there's no problem with this package at all 😄 The WebSocket api itself seems designed not to expose the HTTP response code of the WebSocket handshake to javascript, so the default browser implementation is not advantageous in this respect. I'll think about how to solve this for my use case, drawing on your suggestions

[qmg-rwaller]

hi @florianbepunkt, I have the same use case, did you manage to resolve it?

[florianbepunkt]

@qmg-rwaller No, we skipped using this lib in the end and used a custom websocket client, based on the default browser implementation.

[qmg-rwaller]

Thanks, I may have to do the same. If you don't mind me asking, how did you access the Unauthorized HTTP status code / error message (from AWS WebSocket API Gateway) with your custom client? The default browser implementation doesn't seem to provide anything more than this module, and apparently the WebSocket spec forbids exposing the reason to scripts !