Commit Graph

11 Commits

Author SHA1 Message Date
John Knox
fd8065eb7a Sort headers when displaying them
Summary: It's easier to scan the same header value of multiple requests when it's in roughly the same place for each one.

Reviewed By: mweststrate

Differential Revision: D24885172

fbshipit-source-id: 7be02903d2f9f79c8ba618e57c74169392f6244b
2020-11-11 03:48:41 -08:00
Michel Weststrate
6b7b1fab5c Fix content encoding issues
Summary:
Changelog: [Network] Non-binary request are not properly utf-8 decoded on both iOS and Android, both when gzipped and when not gzipped

This diff fixes a long standing / ping-pong issue regarding network decoding differences between
* iOS vs Android
* binary vs utf-8
* gzipped vs uncompressed

The changes aren't too big, but the underlying investigating is :)

The primary contribution to this diff is:

First, adding test cases for know problematic cases. This is done by grabbing the messages that are send from the flipper client to flipper using the flipper messages plugin. This is the base64 data that is stored in the `.txt` files. Beyond that, for all tests public endpoints are used, so that we can both get a hold of the raw original files, and how we expect them to be displayed in flipper.

For testing a simple RN app was build, with a button that fires a bunch requests. The first 3 are captured in unit tests, the last one is not idempotent, but a case reported in #1466, so just left it there as manual verification.

```
const fetchData = async () => {
  await fetch(
    'https://raw.githubusercontent.com/SangKa/MobX-Docs-CN/master/docs/donating.md',
    {
      headers: {
        'Accept-Encoding': 'identity', // signals that we don't want gzip
      },
    },
  );
  await fetch('https://reactnative.dev/img/tiny_logo.png?x=' + Math.random());
  await fetch(
    'https://raw.githubusercontent.com/SangKa/MobX-Docs-CN/master/docs/donating.md',
  );
  await fetch(
    'https://ex.ke.com/sdk/recommend/html/100001314?hdicCityId=110000&paramMap[source]=&id=100001314&mediumId=100000037&elementId=&resblockId=1111027381003&templateConfig=%5Bobject%20Object%5D&fbExpoId=346620976471638017&fbQueryId=&required400=true&unique=1111027381003&parentSceneId=',
  );
};
```

The second contribution of this diff is that it doesn't use weird URLencoder hacks to convert base64 to utf8, but rather a proper library. The problem with our original solution, using `atob` is that it converts to ASCII, not to utf-8, which is the source of the original bugs. See for more background on this: https://www.npmjs.com/package/js-base64#decode-vs-atob-and-encode-vs-btoa-

Solves:
https://github.com/facebook/flipper/issues/1466
https://github.com/facebook/flipper/pull/1541
https://github.com/facebook/flipper/issues/1458

Supersedes D23837750

Future work: we don't inspect the `content-type=xxx;charset` header yet, which we should do for less common encodings, to make sure that they get displayed correctly as well

Future work: in feature like copy data and curl, we always call decode body, without check if we are actually dealing with non-binary data. Probably it is better to keep binary data in base64, rather than decoding it, as that will assume the data is an utf-8 string, which might fail.

An assumption in these changes is that binary data is never gzipped, which is generally correct; gzip is not applied by webserver to things like images, as it would increase, not decrease their size, and waste a lot of computation power.

Reviewed By: cekkaewnumchai

Differential Revision: D23403095

fbshipit-source-id: 5099cc4a7503f0f63bd10585dc6590ba893f3dde
2020-10-14 06:23:27 -07:00
Michel Weststrate
ecf4cff7cf Fix most lint warnings
Summary:
I noticed that after the typescript upgrade, I got several weird positives from ESLint (like unused parameters in a type definition, which are obviously always unused, e.g. `type onClick = (e: Event) => void`). After some investigation, it turned out these warnings are generated by eslint, but that those rules should be performaned by typescript/eslint instead. For future reference to which rules this applies:

https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/README.md#extension-rules

Updated the config, and while at it, fixed all warnings in our codebase, except for `react-hooks/exhaustive-deps` warnings, since those require semantic changes.

This reduces the amount of eslint warnings from 86 to 39.

Reviewed By: passy

Differential Revision: D23905630

fbshipit-source-id: 0557708fd9ec6b17840a3c191e7d3baf225bdf23
2020-09-28 01:42:48 -07:00
Michel Weststrate
2f7a84115c Fix image rendering
Summary:
Images in the network plugin are rarely displayed in the network plugin, as it tries to use the public url to preview it. However, that won't if the endpoint is behind authentication, idempotent, etc. This diff changes the behavior to instead send the network body to flipper and use that to preview.

Changelog: [Network] Fixed image preview

Reviewed By: jknoxville, passy

Differential Revision: D23370743

fbshipit-source-id: 0070e9e38c10a5761b9f7190467e26f01a7b2471
2020-09-02 05:13:06 -07:00
Esa Firman
f4c36377df make body option persisted across request selection (#1448)
Summary:
This PR make the formatter body option persisted across request selection as mentioned in [here](https://github.com/facebook/flipper/issues/432)

Close https://github.com/facebook/flipper/issues/432

## Changelog

Make request body option persisted across request selection

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

Test Plan:
1. Select the first request and change the body option from `parsed` to `formatted`

<img width="1432" alt="Screen Shot 2020-08-10 at 19 00 07" src="https://user-images.githubusercontent.com/1691440/89780560-de753c80-db3b-11ea-87d7-92831e16b961.png">

2. Move to second request, still in `formatted`

<img width="1431" alt="Screen Shot 2020-08-10 at 19 00 18" src="https://user-images.githubusercontent.com/1691440/89780573-e9c86800-db3b-11ea-900e-e6d02054e9ba.png">

Reviewed By: cekkaewnumchai

Differential Revision: D23264774

Pulled By: mweststrate

fbshipit-source-id: aed97642d030fa8e01e63d115e79ffb7a702c5e6
2020-08-24 03:34:20 -07:00
Michel Weststrate
b7cfb509f1 Improve request formatting
Summary:
This diff adds several improvements to displaying requests / responses in the network plugin

1. If there is no formatter rendering the data, the data is rendered 'raw'
2. For binary data, `(binary data)` text is printed, rather than an empty box
3. For request that have an empty request / response, `(empty)` is printed, rather than an empty box
4. If a formatter is applied, we show which formatter was used, which makes it easier to debug / spot / report issues
5. If the graphql formatter can't parse the data because it is truncated, it won't return anything, so that it falls back to the next formatter (urlencoder) to take care of the presentation

Changelog: [Network plugin] Improved presentation of request / response bodies and fixed issues where they would sometimes not be displayed.

Reviewed By: jknoxville

Differential Revision: D22865373

fbshipit-source-id: 912d2f27269a4c9edbf62f2039d46ccf90a008af
2020-08-03 11:39:49 -07:00
Michel Weststrate
eff378defa Avoid JSON.stingify during render
Summary:
See previous diffs, same change as with analytics, don't stringify when creating the rows, but rather provide a closure to do that lazily, which reduces CPU (and mem) usage.

Note that this implicitly assumes the captures variables are immutable, as otherwise the semantics would change. But than again, if those variables are changed in the future, copyText will reflect their latest rather than initial state, which is better anyway.

Reviewed By: nikoant

Differential Revision: D21931748

fbshipit-source-id: 62325dd25953bab3a4e2e9a0d5dea3b3a7787bae
2020-06-09 03:00:23 -07:00
Pascal Hartig
fc9ed65762 prettier 2
Summary:
Quick notes:

- This looks worse than it is. It adds mandatory parentheses to single argument lambdas. Lots of outrage on Twitter about it, personally I'm {emoji:1f937_200d_2642} about it.
- Space before function, e.g. `a = function ()` is now enforced. I like this because both were fine before.
- I added `eslint-config-prettier` to the config because otherwise a ton of rules conflict with eslint itself.

Close https://github.com/facebook/flipper/pull/915

Reviewed By: jknoxville

Differential Revision: D20594929

fbshipit-source-id: ca1c65376b90e009550dd6d1f4e0831d32cbff03
2020-03-24 09:38:11 -07:00
Chaiwat Ekkaewnumchai
a624b064a8 (Server) Fix Naming
Summary: per title

Reviewed By: mweststrate

Differential Revision: D20489140

fbshipit-source-id: 8678c1bfed578c5ec7138e0ccb25777942d5ed4c
2020-03-19 05:18:25 -07:00
Chaiwat Ekkaewnumchai
1d23b5418a (Server) Include Mock Component to Main Files
Summary:
- Add mock button if a client supports the function
- Open the dialog when clicking the button

Note:
- This is a part of this PR: https://github.com/facebook/flipper/pull/488

Reviewed By: mweststrate

Differential Revision: D20440145

fbshipit-source-id: 750099020e0b2d6ed10bb20e883f6b3be664ae79
2020-03-17 10:09:13 -07:00
Anton Nikolaev
10d990c32c Move plugins to "sonar/desktop/plugins"
Summary:
Plugins moved from "sonar/desktop/src/plugins" to "sonar/desktop/plugins".

Fixed all the paths after moving.

New "desktop" folder structure:
- `src` - Flipper desktop app JS code executing in Electron Renderer (Chrome) process.
- `static` - Flipper desktop app JS code executing in Electron Main (Node.js) process.
- `plugins` - Flipper desktop JS plugins.
- `pkg` - Flipper packaging lib and CLI tool.
- `doctor` - Flipper diagnostics lib and CLI tool.
- `scripts` - Build scripts for Flipper desktop app.
- `headless` - Headless version of Flipper desktop app.
- `headless-tests` - Integration tests running agains Flipper headless version.

Reviewed By: mweststrate

Differential Revision: D20344186

fbshipit-source-id: d020da970b2ea1e001f9061a8782bfeb54e31ba0
2020-03-14 14:35:18 -07:00