diff options
Diffstat (limited to '')
| -rw-r--r-- | devtools/client/netmonitor/src/components/messages/MessagePayload.js | 403 |
1 files changed, 403 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/src/components/messages/MessagePayload.js b/devtools/client/netmonitor/src/components/messages/MessagePayload.js new file mode 100644 index 0000000000..b8d3f7ae33 --- /dev/null +++ b/devtools/client/netmonitor/src/components/messages/MessagePayload.js @@ -0,0 +1,403 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + Component, + createFactory, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const { div, input, label, span, h2 } = dom; +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const { + connect, +} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js"); + +const { + L10N, +} = require("resource://devtools/client/netmonitor/src/utils/l10n.js"); +const { + getMessagePayload, + getResponseHeader, + parseJSON, +} = require("resource://devtools/client/netmonitor/src/utils/request-utils.js"); +const { + getFormattedSize, +} = require("resource://devtools/client/netmonitor/src/utils/format-utils.js"); +const MESSAGE_DATA_LIMIT = Services.prefs.getIntPref( + "devtools.netmonitor.msg.messageDataLimit" +); +const MESSAGE_DATA_TRUNCATED = L10N.getStr("messageDataTruncated"); +const SocketIODecoder = require("resource://devtools/client/netmonitor/src/components/messages/parsers/socket-io/index.js"); +const { + JsonHubProtocol, + HandshakeProtocol, +} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/signalr/index.js"); +const { + parseSockJS, +} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/sockjs/index.js"); +const { + parseStompJs, +} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/stomp/index.js"); +const { + wampSerializers, +} = require("resource://devtools/client/netmonitor/src/components/messages/parsers/wamp/serializers.js"); +const { + getRequestByChannelId, +} = require("resource://devtools/client/netmonitor/src/selectors/index.js"); + +// Components +const RawData = createFactory( + require("resource://devtools/client/netmonitor/src/components/messages/RawData.js") +); +loader.lazyGetter(this, "PropertiesView", function () { + return createFactory( + require("resource://devtools/client/netmonitor/src/components/request-details/PropertiesView.js") + ); +}); + +const RAW_DATA = L10N.getStr("netmonitor.response.raw"); + +/** + * Shows the full payload of a message. + * The payload is unwrapped from the LongStringActor object. + */ +class MessagePayload extends Component { + static get propTypes() { + return { + connector: PropTypes.object.isRequired, + selectedMessage: PropTypes.object, + request: PropTypes.object.isRequired, + }; + } + + constructor(props) { + super(props); + + this.state = { + payload: "", + isFormattedData: false, + formattedData: {}, + formattedDataTitle: "", + rawDataDisplayed: false, + }; + + this.toggleRawData = this.toggleRawData.bind(this); + this.renderRawDataBtn = this.renderRawDataBtn.bind(this); + } + + componentDidMount() { + this.updateMessagePayload(); + } + + componentDidUpdate(prevProps) { + if (this.props.selectedMessage !== prevProps.selectedMessage) { + this.updateMessagePayload(); + } + } + + updateMessagePayload() { + const { selectedMessage, connector } = this.props; + + getMessagePayload(selectedMessage.payload, connector.getLongString).then( + async payload => { + const { formattedData, formattedDataTitle } = await this.parsePayload( + payload + ); + this.setState({ + payload, + isFormattedData: !!formattedData, + formattedData, + formattedDataTitle, + }); + } + ); + } + + async parsePayload(payload) { + const { connector, selectedMessage, request } = this.props; + + // Don't apply formatting to control frames + // Control frame check can be done using opCode as specified here: + // https://tools.ietf.org/html/rfc6455 + const controlFrames = [0x8, 0x9, 0xa, 0xb, 0xc, 0xd, 0xe, 0xf]; + const isControlFrame = controlFrames.includes(selectedMessage.opCode); + if (isControlFrame) { + return { + formattedData: null, + formattedDataTitle: "", + }; + } + + // Make sure that request headers are fetched from the backend before + // looking for `Sec-WebSocket-Protocol` header. + const responseHeaders = await connector.requestData( + request.id, + "responseHeaders" + ); + + const wsProtocol = getResponseHeader( + { responseHeaders }, + "Sec-WebSocket-Protocol" + ); + + const wampSerializer = wampSerializers[wsProtocol]; + if (wampSerializer) { + const wampPayload = wampSerializer.deserializeMessage(payload); + + return { + formattedData: wampPayload, + formattedDataTitle: wampSerializer.description, + }; + } + + // socket.io payload + const socketIOPayload = this.parseSocketIOPayload(payload); + + if (socketIOPayload) { + return { + formattedData: socketIOPayload, + formattedDataTitle: "Socket.IO", + }; + } + // sockjs payload + const sockJSPayload = parseSockJS(payload); + if (sockJSPayload) { + let formattedData = sockJSPayload.data; + + if (sockJSPayload.type === "message") { + if (Array.isArray(formattedData)) { + formattedData = formattedData.map( + message => parseStompJs(message) || message + ); + } else { + formattedData = parseStompJs(formattedData) || formattedData; + } + } + + return { + formattedData, + formattedDataTitle: "SockJS", + }; + } + // signalr payload + const signalRPayload = this.parseSignalR(payload); + if (signalRPayload) { + return { + formattedData: signalRPayload, + formattedDataTitle: "SignalR", + }; + } + // STOMP + const stompPayload = parseStompJs(payload); + if (stompPayload) { + return { + formattedData: stompPayload, + formattedDataTitle: "STOMP", + }; + } + + // json payload + let { json } = parseJSON(payload); + if (json) { + const { data, identifier } = json; + // A json payload MAY be an "Action cable" if it + // contains either a `data` or an `identifier` property + // which are also json strings and would need to be parsed. + // See https://medium.com/codequest/actioncable-in-rails-api-f087b65c860d + if ( + (data && typeof data == "string") || + (identifier && typeof identifier == "string") + ) { + const actionCablePayload = this.parseActionCable(json); + return { + formattedData: actionCablePayload, + formattedDataTitle: "Action Cable", + }; + } + + if (Array.isArray(json)) { + json = json.map(message => parseStompJs(message) || message); + } + + return { + formattedData: json, + formattedDataTitle: "JSON", + }; + } + return { + formattedData: null, + formattedDataTitle: "", + }; + } + + parseSocketIOPayload(payload) { + let result; + // Try decoding socket.io frames + try { + const decoder = new SocketIODecoder(); + decoder.on("decoded", decodedPacket => { + if ( + decodedPacket && + !decodedPacket.data.includes("parser error") && + decodedPacket.type + ) { + result = decodedPacket; + } + }); + decoder.add(payload); + return result; + } catch (err) { + // Ignore errors + } + return null; + } + + parseSignalR(payload) { + // attempt to parse as HandshakeResponseMessage + let decoder; + try { + decoder = new HandshakeProtocol(); + const [remainingData, responseMessage] = + decoder.parseHandshakeResponse(payload); + + if (responseMessage) { + return { + handshakeResponse: responseMessage, + remainingData: this.parseSignalR(remainingData), + }; + } + } catch (err) { + // ignore errors; + } + + // attempt to parse as JsonHubProtocolMessage + try { + decoder = new JsonHubProtocol(); + const msgs = decoder.parseMessages(payload, null); + if (msgs?.length) { + return msgs; + } + } catch (err) { + // ignore errors; + } + + // MVP Signalr + if (payload.endsWith("\u001e")) { + const { json } = parseJSON(payload.slice(0, -1)); + if (json) { + return json; + } + } + + return null; + } + + parseActionCable(payload) { + const identifier = payload.identifier && parseJSON(payload.identifier).json; + const data = payload.data && parseJSON(payload.data).json; + + if (identifier) { + payload.identifier = identifier; + } + if (data) { + payload.data = data; + } + return payload; + } + + toggleRawData() { + this.setState({ + rawDataDisplayed: !this.state.rawDataDisplayed, + }); + } + + renderRawDataBtn(key, checked, onChange) { + return [ + label( + { + key: `${key}RawDataBtn`, + className: "raw-data-toggle", + htmlFor: `raw-${key}-checkbox`, + onClick: event => { + // stop the header click event + event.stopPropagation(); + }, + }, + span({ className: "raw-data-toggle-label" }, RAW_DATA), + span( + { className: "raw-data-toggle-input" }, + input({ + id: `raw-${key}-checkbox`, + checked, + className: "devtools-checkbox-toggle", + onChange, + type: "checkbox", + }) + ) + ), + ]; + } + + renderData(component, componentProps) { + return component(componentProps); + } + + render() { + let component; + let componentProps; + let dataLabel; + let { payload, rawDataDisplayed } = this.state; + let isTruncated = false; + if (this.state.payload.length >= MESSAGE_DATA_LIMIT) { + payload = payload.substring(0, MESSAGE_DATA_LIMIT); + isTruncated = true; + } + + if ( + !isTruncated && + this.state.isFormattedData && + !this.state.rawDataDisplayed + ) { + component = PropertiesView; + componentProps = { + object: this.state.formattedData, + }; + dataLabel = this.state.formattedDataTitle; + } else { + component = RawData; + componentProps = { payload }; + dataLabel = L10N.getFormatStrWithNumbers( + "netmonitor.ws.rawData.header", + getFormattedSize(this.state.payload.length) + ); + } + + return div( + { + className: "message-payload", + }, + isTruncated && + div( + { + className: "truncated-data-message", + }, + MESSAGE_DATA_TRUNCATED + ), + h2({ className: "data-header", role: "heading" }, [ + span({ key: "data-label", className: "data-label" }, dataLabel), + !isTruncated && + this.state.isFormattedData && + this.renderRawDataBtn("data", rawDataDisplayed, this.toggleRawData), + ]), + this.renderData(component, componentProps) + ); + } +} + +module.exports = connect(state => ({ + request: getRequestByChannelId(state, state.messages.currentChannelId), +}))(MessagePayload); |