jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add protobuf support to network inspector (#2080)

Browse Source 
Summary:
Protobuf based APIs are becoming more common (i.e. gRPC) but are difficult to inspect. Unlike plain text data formats (JSON), Protobuf calls transmit binary data requiring the format to be known ahead of time, making ad-hoc inspection impossible. This PR allows for those format definitions (messages in protobuf terminology) to be transmitted from the client to the network inspector plugin. These definitions are then imported into ProtobufJS which enables the binary data transmitted to be inspected as easily as JSON data.

See Retrofit PR in https://github.com/facebook/flipper/pull/2084

## Changelog

* Add ProtobufJS library to network plugin
* New `ProtobufFormatter` UI in `RequestDetails`
* `ProtobufDefinitionsRepository` to cache and load protobuf defintions
* `addProtobufDefinitions` call in the Android network plugin

Pull Request resolved: https://github.com/facebook/flipper/pull/2080

Test Plan: ![screenshot](https://user-images.githubusercontent.com/745166/111652068-001a5e80-87c4-11eb-8c94-e19b46dd074c.png)

Reviewed By: mweststrate

Differential Revision: D27507451

Pulled By: passy

fbshipit-source-id: 586d891b74f2b17d28fe7a2a99074da755851f38
This commit is contained in:
Harold Martin
2021-04-20 05:08:42 -07:00
committed by Facebook GitHub Bot
parent 451c332260
commit 4d262c0da4
7 changed files with 290 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
desktop/plugins/public/network/index.tsx
View File

@@ -36,8 +36,10 @@ import {
ResponseFollowupChunk,
Header,
MockRoute,
AddProtobufEvent,
PartialResponses,
} from './types';
import {ProtobufDefinitionsRepository} from './ProtobufDefinitionsRepository';
import {convertRequestToCurlCommand, getHeaderValue, decodeBody} from './utils';
import RequestDetails from './RequestDetails';
import {clipboard} from 'electron';
@@ -68,6 +70,7 @@ type Events = {
newRequest: Request;
newResponse: Response;
partialResponse: Response | ResponseFollowupChunk;
addProtobufDefinitions: AddProtobufEvent;
};
type Methods = {
@@ -228,6 +231,13 @@ export function plugin(client: PluginClient<Events, Methods>) {
});
});
client.onMessage('addProtobufDefinitions', (data) => {
const repository = ProtobufDefinitionsRepository.getInstance();
for (const [baseUrl, definitions] of Object.entries(data)) {
repository.addDefinitions(baseUrl, definitions);
}
});
client.onMessage('partialResponse', (data) => {
/* Some clients (such as low end Android devices) struggle to serialise large payloads in one go, so partial responses allow them
to split payloads into chunks and serialise each individually.
@@ -240,7 +250,7 @@ export function plugin(client: PluginClient<Events, Methods>) {
The remaining chunks will be sent in ResponseFollowupChunks, which each contain another piece of the payload, along with their index from 1 onwards.
The payload of each chunk is individually encoded in the same way that full responses are.
The order that initialResponse, and followup chunks are recieved is not guaranteed to be in index order.
The order that initialResponse, and followup chunks are received is not guaranteed to be in index order.
*/
const message: Response | ResponseFollowupChunk = data as
| Response