Bug: Console Logs Disappear in Chromium-Based Browsers When Rendering Incorrectly Encoded Image URLs in a React Application

[hanurii]

React version: 16.14.0, 19.0.0

Steps To Reproduce

1. Create a simple React component:

function App() {
  console.log(1);
  return (
    <div>
      <img src="https://cdn.example.com/%CE%B1%AA%E1%BC%E1%B2%E1%AB%CE%B1%E1%A7%E1_600x600.png" />
    </div>
  );
}

2. Render this component within a React application.

3. Open the Developer Tools in a Chromium-based browser (e.g., Chrome) and observe that the console displays 1.

4. Close and reopen the Developer Tools.

5. Notice that the console log output (1) is no longer present.

Link to code example: https://codesandbox.io/p/sandbox/react-dev-forked-gtkl7p

The current behavior

After reopening the Developer Tools, the previously logged output is missing. This issue occurs specifically within the React rendering environment and only in Chromium-based browsers; it does not occur in Safari, Firefox, or when using a plain HTML tag.

The expected behavior

The console output from console.log(1) should persist regardless of whether the Developer Tools are closed and reopened, even if the image fails to load due to encoding issues.

Additional Context:

• The problem is observed when the image URL includes characters encoded in EUC-KR rather than UTF-8.
• Although the issue might be influenced by how Chromium handles resource load errors, the fact that it manifests only in a React environment raises the possibility of an interplay between React's rendering lifecycle and the browser’s error handling.
• This bug adversely affects the debugging experience by causing unexpected loss of console output during development.

[shehryardev]

@hanurii - You should wrap the console.log(1) inside a lifecycle method or a useEffect hook rather than placing it directly in the component/method body. In React, code in the function body runs during rendering, which means it can be affected by optimizations like Fast Refresh or re-renders. This might explain why the log disappears when reopening Developer Tools. Instead, use:

import { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log(1);
  }, []);

  return (
    <div>
      <img src="https://cdn.example.com/%CE%B1%AA%E1%BC%E1%B2%E1%AB%CE%B1%E1%A7%E1_600x600.png" />
    </div>
  );
}

This ensures that the log runs reliably when the component mounts and is not affected by render cycles. This ensures fundamental react principles are utilized ensuring predictable outcomes. I'm open to hearing from you more on this :)

[hanurii]

@shehryardev Thank you for your response. I appreciate your suggestion, and I'll make sure to use console.log inside useEffect going forward. However, I have tried moving console.log into useEffect, and the issue still persists—the same symptoms continue to occur.