Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#2,062 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
android, ios, javascript, react-native
Área
devtools, networking

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
JavaScript
Estrellas
5.6k
Forks
702
Merge medio
3 d 5 h
PR fusionados (30 d)
51

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de react/metro

Todos los issues de react/metro

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.