Network Plugin can't parse UTF8 characters and can't decode images properly

[skychx]

🐛 Bug Report

Network Plugin can't parse UTF8 characters and can't decode images properly.

To Reproduce

1.Test Link:

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=

2.Test Code(React Native):

fetchData = () => {
  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=')
}

render() {
  return (
    <TouchableOpacity onPress={this.fetchData}>
      <View></View>
    </TouchableOpacity>
  )
}

3.Flipper Network Plugin parse result(Error)

4. Browser parse result(correctly)

5.image displays

Version 0.51 decodes and displays images correctly, version 0.52 shows (empty).Sometimes images are decoded into String in the absence of content-type

0.51 ⬇️

0.52 ⬇️

0.52 image decode into string ⬇️

Environment

iPhone11 iOS 13.3 macOS Mojave 10.14.5 Flipper 0.52.1 react-native 0.62.2 npm 6.14.1 node 13.12.0

[skychx]

I thought this PR was causing the problem, but after studying the Network Plagin source code, I think this.props.persistedState.responses has a parsing problem.

[mweststrate]

Image display will be fixed in next weeks release, that is a separate issue.

Looked a bit further in the charset issue, it seems to occur on iOS only but is correct on Android (screenshot). So I suspect it is an issue on the client, not in Flipper desktop.

Edit: difference is that Android sends the gzipped response, but iOS unpacked. Will investigate further

[yaoandy107]

@mweststrate Look forward to your investigation of charset issue, but I think it is not an OS issue because it also happens on my Android devices.

Flipper version: 0.57.0

[mweststrate]

In that case would you mind providing a small minimalistic reproduction?

On Mon, Sep 21, 2020 at 5:28 AM yaoandy107 notifications@github.com wrote:

@mweststrate https://github.com/mweststrate Look forward to your investigation of charset issue, but I think it is not an OS issue because it also happens on my Android devices.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/facebook/flipper/issues/1466#issuecomment-695894620, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAN4NBBGN7FPMAGD4T4DGBTSG3I7XANCNFSM4P7EEBYQ .

[yaoandy107]

I have written a minimal backend with Python Flask to retrieve the same issue in my Android device.

Test API code: https://gist.github.com/yaoandy107/1dc0daf2071aed0448e39100145b1ec3

Flipper ver: 0.57.0 Android ver: 11 & 9 OkHttp: 4.9.0

[yaoandy107]

I have cloned the repo and give it a try to fix the issue, and it works well in my daily work, but not sure if it work on all situation. I will just PR it later for review.

[yaoandy107]

@mweststrate I found out the original decoding issue only happen in Android on response without gzip, so I add the new decode function to handle the request that does not enable gzip in the above PR, and I have tested on my Android devices, it looks fine, but not tested on iOS.

[mweststrate]

Should be fixed by https://github.com/facebook/flipper/commit/6b7b1fab5cae3adfdfab89055ec97c9ee8e8fb41 and part of next weeks release. If it isn't solved in Flipper0.64, feel free to open a fresh issue with an example URL