1081664682

Committed 22 Nov 2023 02:11PM UTC coverage: 82.798% (-17.2%) from 99.964%

Build # 1081664682

Build Type

Pull #4214

gitlab-ci

Committed by

tranchitella

Commit Message

fix: Fixed the infinite page redirects when the back button is pressed

Remove the location and navigate from the useLocationParams.setValue callback
dependencies as they change the set function that is presented in other
useEffect dependencies. This happens when the back button is clicked, which
leads to the location changing infinitely.

Changelog: Title
Ticket: MEN-6847
Ticket: MEN-6796

Signed-off-by: Ihor Aleksandrychiev <ihor.aleksandrychiev@northern.tech>
Signed-off-by: Fabio Tranchitella <fabio.tranchitella@northern.tech>

Pull Request Pull Request #4214: fix: Fixed the infinite page redirects when the back button is pressed

Run Details

4319 of 6292 branches covered (0.0%)

8332 of 10063 relevant lines covered (82.8%)

191.0 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

27.5

/src/js/utils/sockethook.js

// Copyright 2022 Northern.tech AS
//
//    Licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//        http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
import { useCallback, useRef, useState } from 'react';

import msgpack5 from 'msgpack5';
import Cookies from 'universal-cookie';

import { apiUrl } from '../api/general-api';
import { TIMEOUTS } from '../constants/appConstants';
import { DEVICE_MESSAGE_PROTOCOLS as MessageProtocols, DEVICE_MESSAGE_TYPES as MessageTypes } from '../constants/deviceConstants';

const cookies = new Cookies();

const MessagePack = msgpack5();

export const byteArrayToString = body => String.fromCharCode(...body);

export const blobToString = blob =>
  new Promise(resolve => {
    let fr = new FileReader();
    fr.onload = () => {
      resolve(fr.result);
    };
    fr.readAsArrayBuffer(blob);
  });

export const useSession = ({ onClose, onHealthCheckFailed, onMessageReceived, onNotify, onOpen, token }) => {
  const [sessionId, setSessionId] = useState();
  const healthcheckTimeout = useRef();
  const socketRef = useRef();

  const sendMessage = useCallback(({ typ, body, props }) => {
    if (!socketRef.current) {
      return;
    }
    const proto_header = { proto: MessageProtocols.Shell, typ, sid: socketRef.current.sessionId, props };
    const encodedData = MessagePack.encode({ hdr: proto_header, body });
    socketRef.current.send(encodedData);
  }, []);

  const close = useCallback(() => {
    if (socketRef.current?.readyState !== WebSocket.OPEN) {
      return;
    }
    sendMessage({ typ: MessageTypes.Stop, body: {}, props: {} });
    socketRef.current.close();
    setSessionId();
  }, [sendMessage]);

  const healthcheckFailed = useCallback(() => {
    onHealthCheckFailed();
    close();
  }, [close, onHealthCheckFailed]);

  const onSocketMessage = useCallback(
    event =>
      blobToString(event.data).then(data => {
        const {
          hdr: { props = {}, proto, sid, typ },
          body
        } = MessagePack.decode(data);
        if (proto !== MessageProtocols.Shell) {
          return;
        }
        switch (typ) {
          case MessageTypes.New: {
            if (props.status == WebSocket.CLOSING) {
              onNotify(`Error: ${byteArrayToString(body)}`);
              setSessionId();
              return close();
            } else {
              clearTimeout(healthcheckTimeout.current);
              healthcheckTimeout.current = setTimeout(healthcheckFailed, 65 * TIMEOUTS.oneSecond);
              socketRef.current.sessionId = sid;
              return setSessionId(sid);
            }
          }
          case MessageTypes.Shell:
            return onMessageReceived(body);
          case MessageTypes.Stop:
            return close();
          case MessageTypes.Ping: {
            if (healthcheckTimeout.current) {
              clearTimeout(healthcheckTimeout.current);
            }
            sendMessage({ typ: MessageTypes.Pong });
            //
            const timeout = parseInt(props.timeout);
            if (timeout > 0) {
              healthcheckTimeout.current = setTimeout(healthcheckFailed, timeout * TIMEOUTS.oneSecond);
            }
            return;
          }
          default:
            break;
        }
      }),
    [close, healthcheckFailed, onMessageReceived, onNotify, sendMessage]
  );

  const onSocketError = useCallback(
    error => {
      onNotify(`WebSocket error: ${error.message}`);
      close();
      clearTimeout(healthcheckTimeout.current);
    },
    [close, onNotify]
  );

  const onSocketOpen = useCallback(() => {
    sendMessage({ typ: MessageTypes.New, props: {} });
    onOpen(true);
  }, [onOpen, sendMessage]);

  const onSocketClose = useCallback(
    e => {
      console.log('closing');
      onClose(e);
      close();
    },
    [close, onClose]
  );

  const connect = useCallback(
    deviceId => {
      const uri = `wss://${window.location.host}${apiUrl.v1}/deviceconnect/devices/${deviceId}/connect`;
      setSessionId();
      cookies.set('JWT', token, { path: '/', secure: true, sameSite: 'strict', maxAge: 5 });
      try {
        socketRef.current = new WebSocket(uri);
        socketRef.current.addEventListener('close', onSocketClose);
        socketRef.current.addEventListener('error', onSocketError);
        socketRef.current.addEventListener('message', onSocketMessage);
        socketRef.current.addEventListener('open', onSocketOpen);
      } catch (error) {
        console.log(error);
      }
      return () => {
        socketRef.current.removeEventListener('close', onSocketClose);
        socketRef.current.removeEventListener('error', onSocketError);
        socketRef.current.removeEventListener('message', onSocketMessage);
        socketRef.current.removeEventListener('open', onSocketOpen);
      };
    },
    [onSocketClose, onSocketOpen, onSocketError, onSocketMessage, token]
  );

  return [connect, sendMessage, close, socketRef.current?.readyState ?? WebSocket.CLOSED, sessionId];
};

1	// Copyright 2022 Northern.tech AS
2	//
3	// Licensed under the Apache License, Version 2.0 (the "License");
4	// you may not use this file except in compliance with the License.
5	// You may obtain a copy of the License at
6	//
7	// http://www.apache.org/licenses/LICENSE-2.0
8	//
9	// Unless required by applicable law or agreed to in writing, software
10	// distributed under the License is distributed on an "AS IS" BASIS,
11	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12	// See the License for the specific language governing permissions and
13	// limitations under the License.
14	import { useCallback, useRef, useState } from 'react';
15
16	import msgpack5 from 'msgpack5';
17	import Cookies from 'universal-cookie';
18
19	import { apiUrl } from '../api/general-api';
20	import { TIMEOUTS } from '../constants/appConstants';
21	import { DEVICE_MESSAGE_PROTOCOLS as MessageProtocols, DEVICE_MESSAGE_TYPES as MessageTypes } from '../constants/deviceConstants';
22
23	const cookies = new Cookies();	15✔
24
25	const MessagePack = msgpack5();	15✔
26
27	export const byteArrayToString = body => String.fromCharCode(...body);	15✔
28
29	export const blobToString = blob =>	15✔
30	new Promise(resolve => {	×
31	let fr = new FileReader();	×
32	fr.onload = () => {	×
33	resolve(fr.result);	×
34	};
35	fr.readAsArrayBuffer(blob);	×
36	});
37
38	export const useSession = ({ onClose, onHealthCheckFailed, onMessageReceived, onNotify, onOpen, token }) => {	15✔
39	const [sessionId, setSessionId] = useState();	6✔
40	const healthcheckTimeout = useRef();	6✔
41	const socketRef = useRef();	6✔
42
43	const sendMessage = useCallback(({ typ, body, props }) => {	6✔
44	if (!socketRef.current) {	12!
45	return;	12✔
46	}
47	const proto_header = { proto: MessageProtocols.Shell, typ, sid: socketRef.current.sessionId, props };	×
48	const encodedData = MessagePack.encode({ hdr: proto_header, body });	×
49	socketRef.current.send(encodedData);	×
50	}, []);
51
52	const close = useCallback(() => {	6✔
53	if (socketRef.current?.readyState !== WebSocket.OPEN) {	8!
54	return;	×
55	}
56	sendMessage({ typ: MessageTypes.Stop, body: {}, props: {} });	8✔
57	socketRef.current.close();	8✔
58	setSessionId();	×
59	}, [sendMessage]);
60
61	const healthcheckFailed = useCallback(() => {	6✔
62	onHealthCheckFailed();	×
63	close();	×
64	}, [close, onHealthCheckFailed]);
65
66	const onSocketMessage = useCallback(	6✔
67	event =>
68	blobToString(event.data).then(data => {	×
69	const {
70	hdr: { props = {}, proto, sid, typ },	×
71	body
72	} = MessagePack.decode(data);	×
73	if (proto !== MessageProtocols.Shell) {	×
74	return;	×
75	}
76	switch (typ) {	×
77	case MessageTypes.New: {
78	if (props.status == WebSocket.CLOSING) {	×
79	onNotify(`Error: ${byteArrayToString(body)}`);	×
80	setSessionId();	×
81	return close();	×
82	} else {
83	clearTimeout(healthcheckTimeout.current);	×
84	healthcheckTimeout.current = setTimeout(healthcheckFailed, 65 * TIMEOUTS.oneSecond);	×
85	socketRef.current.sessionId = sid;	×
86	return setSessionId(sid);	×
87	}
88	}
89	case MessageTypes.Shell:
90	return onMessageReceived(body);	×
91	case MessageTypes.Stop:
92	return close();	×
93	case MessageTypes.Ping: {
94	if (healthcheckTimeout.current) {	×
95	clearTimeout(healthcheckTimeout.current);	×
96	}
97	sendMessage({ typ: MessageTypes.Pong });	×
98	//
99	const timeout = parseInt(props.timeout);	×
100	if (timeout > 0) {	×
101	healthcheckTimeout.current = setTimeout(healthcheckFailed, timeout * TIMEOUTS.oneSecond);	×
102	}
103	return;	×
104	}
105	default:
106	break;	×
107	}
108	}),
109	[close, healthcheckFailed, onMessageReceived, onNotify, sendMessage]
110	);
111
112	const onSocketError = useCallback(	6✔
113	error => {
114	onNotify(`WebSocket error: ${error.message}`);	×
115	close();	×
116	clearTimeout(healthcheckTimeout.current);	×
117	},
118	[close, onNotify]
119	);
120
121	const onSocketOpen = useCallback(() => {	6✔
122	sendMessage({ typ: MessageTypes.New, props: {} });	×
123	onOpen(true);	×
124	}, [onOpen, sendMessage]);
125
126	const onSocketClose = useCallback(	6✔
127	e => {
128	console.log('closing');	×
129	onClose(e);	×
130	close();	×
131	},
132	[close, onClose]
133	);
134
135	const connect = useCallback(	6✔
136	deviceId => {
137	const uri = `wss://${window.location.host}${apiUrl.v1}/deviceconnect/devices/${deviceId}/connect`;	×
138	setSessionId();	×
139	cookies.set('JWT', token, { path: '/', secure: true, sameSite: 'strict', maxAge: 5 });	×
140	try {	×
141	socketRef.current = new WebSocket(uri);	×
142	socketRef.current.addEventListener('close', onSocketClose);	×
143	socketRef.current.addEventListener('error', onSocketError);	×
144	socketRef.current.addEventListener('message', onSocketMessage);	×
145	socketRef.current.addEventListener('open', onSocketOpen);	×
146	} catch (error) {
147	console.log(error);	×
148	}
149	return () => {	×
150	socketRef.current.removeEventListener('close', onSocketClose);	×
151	socketRef.current.removeEventListener('error', onSocketError);	×
152	socketRef.current.removeEventListener('message', onSocketMessage);	×
153	socketRef.current.removeEventListener('open', onSocketOpen);	×
154	};
155	},
156	[onSocketClose, onSocketOpen, onSocketError, onSocketMessage, token]
157	);
158
159	return [connect, sendMessage, close, socketRef.current?.readyState ?? WebSocket.CLOSED, sessionId];	6✔
160	};

mendersoftware / gui / 1081664682

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous