Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[DevTools] Network panel truncates response bodies containing multibyte UTF-8 characters

Aperta
  • Qualcosa non va?
#2,062 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
1-2 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
android, ios, javascript, react-native
Ambito
devtools, networking

Direzione di ricerca

Start by reproducing with a fetch() call to an endpoint returning the example JSON with multibyte characters, then compare the response body's byte length with its character length along the path that serves Network.getResponseBody over CDP. The payload names no source files or tests, so locating the truncation point is the first real task. Done means the Network panel's Response and Preview tabs show the full body for a body containing multibyte UTF-8 characters.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Description

In the React Native DevTools Network panel, response bodies containing multibyte UTF-8
characters (e.g. á, é, ó) are displayed truncated in both the Response and
Preview tabs.

The number of missing trailing characters matches the number of multibyte characters in
the body, which suggests a byte-length vs. character-length mismatch when the response
preview is stored or served via CDP (Network.getResponseBody).

  • ASCII-only responses render correctly.
  • The app itself receives the full, valid body — only the DevTools preview is affected.
  • Because the JSON is cut, Preview cannot parse it and falls back to raw text.
  • Reproducible on both iOS and Android.
Steps to reproduce
  1. Serve an endpoint returning:
   {"m":["Inténtelo de nuevo más tarde"]}
  1. Call it with fetch() from the app while React Native DevTools is open.
  2. Open the Network panel → select the request → Response / Preview tab.
Expected behavior

The full body is displayed:

{"m":["Inténtelo de nuevo más tarde"]}
Actual behavior

The body is cut short by N characters, where N is the number of multibyte characters it
contains. In the example above (2 multibyte chars), the closing "]} is missing or
partially missing, so the JSON is invalid and Preview shows raw text.

Real-world example: a 120-character body with 3 multibyte characters (ó, é, á) is
missing exactly its last 3 characters ("]}).

React Native Version

0.84.1

Affected Platforms

Runtime - iOS, Runtime - Android

Tested on iOS Simulator (iPhone 18 Pro, iOS 27) and Android emulator. New Architecture and
Hermes enabled on both.

Output of npx @react-native-community/cli info
System:
  OS: macOS 27.0.1
  CPU: (15) arm64 Apple M5 Pro
  Memory: 87.63 MB / 24.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.18.0
    path: ~/.asdf/installs/nodejs/22.18.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.asdf/installs/nodejs/22.18.0/bin/yarn
  npm:
    version: 10.9.3
    path: ~/.asdf/plugins/nodejs/shims/npm
  Watchman:
    version: 2026.04.27.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 27.0
      - iOS 27.0
      - macOS 27.0
      - tvOS 27.0
      - visionOS 27.0
      - watchOS 27.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.3 AI-253.32098.37.2534.15232325
  Xcode:
    version: 27.0/27A266a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.19
    path: /usr/bin/javac
  Ruby:
    version: 3.2.3
    path: ~/.asdf/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.1.2
    wanted: 20.1.2
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.84.1
    wanted: 0.84.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true
Stacktrace or Logs
N/A — no errors are thrown; the response preview is silently truncated.
Screenshots and Videos
Image Image
Lingua principale
JavaScript
Stelle
5.6k
Fork
702
Merge medio
3g 5h
PR unite (30g)
51

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react/metro

Tutte le issue di react/metro

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.