ClientProvider / fetch fails / header contains non ISO-8859-1 code

[aheissenberger]

Describe the bug

Calling a react server action fails with this error in the browser:

Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Failed to read the 'headers' property from 'RequestInit': String contains non ISO-8859-1 code point.
    at ClientProvider.jsx:243:44

The reason is that the id used for the React-Server-Action is the full path on my hard disk which includes an umlaut ../Vorträge/..:
"/Users/xx/yyyy/Projekte/Vorträge/yy/react-server/todo/src/lib/actions.ts#addTodo"

ClientProvider.jsx:243:44

const response = await fetch(url === PAGE_ROOT ? location.href : url, {
    method: 'POST',
    body: formData,
    headers: {
        accept: 'application/json',
        'React-Server-Action': id,
        'React-Server-Outlet': outlet || PAGE_ROOT
    }
});

I fixed it by removing the umlaut in the path but there should be some escaping the id and the outlet to avoid this in the future.

Reproduction

No response

Steps to reproduce

No response

System Info

System:
    OS: macOS 15.1.1
    CPU: (12) arm64 Apple M4 Pro
    Memory: 2.44 GB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.3.0 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.0 - /opt/homebrew/bin/npm
    pnpm: 9.14.4 - /opt/homebrew/bin/pnpm
    bun: 1.1.38 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 131.0.6778.108
    Safari: 18.1.1
    Safari Technology Preview: 18.2
  npmPackages:
    @lazarv/react-server: 0.0.0-experimental-61cbefd-20241204-b7fff15a => 0.0.0-experimental-61cbefd-20241204-b7fff15a

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[lazarv]

Added HTTP header encoding and charset=utf-8 to all HTTP Content-Type headers where it was applicable. I think it should work for you too, but I also got a different error when I used some accented Hungarian characters.

[aheissenberger]

do you really need the full absolut path? it also might become a problem if you have a load balancer and the servers behind the load balancer have different root folders. From a security standpoint you also revile some information about the server.

[lazarv]

The module identifier is not used in a production build to resolve modules. The identifier is only used to find the actual module using the manifest file generated at build time. The identifier is not an information about the server, but about the source code or more precisely about the build environment as it is a result of the Vite plugins responsible for handling and transforming server functions. At the current stage I considered low-priority to implement encrypt/decrypt or any other solution around this, but it's on my list.

[github-actions]

This issue has been locked since it has been closed for more than 30 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest version of @lazarv/react-server. If you have any other comments you should create a new discussion.