Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Instrumentation causing FormData Error #135

Open
KevinEonix opened this issue Nov 29, 2024 · 2 comments
Open

Instrumentation causing FormData Error #135

KevinEonix opened this issue Nov 29, 2024 · 2 comments

Comments

@KevinEonix
Copy link

Hi, i had a lot of trouble with this.
We have a NerxtJs app. We use the route handlers as a BFF (Backend For Frontend) to keep the tokens in the backend.

The problem is: When the instrumentation is active (with only the service name)

import {registerOTel} from '@vercel/otel'

export function register() {
    registerOTel({serviceName: 'MyApp'})
}

Our Other api (in .Net) throw an error

      An unhandled exception has occurred while executing the request.
      System.IO.IOException: Unexpected end of Stream, the content may have already been read by another component. 

Does the vercel otel package modify the body in any way ?
But i tested everything: the dotnet api, the next middleware, the docker environment, the Reverse Proxy (Traefik) configuration.
The only thing that's causing the problem is the instrumentation hook

Tested on both Next version 14.2.18 and 15.0.3 and we have the same error

the route handler code :

const fd = await req.formData();

        const query = await fetch('http://localhost:5098/api/test-formdata', {
            method: 'POST',
            body: fd,
        })

        if (query.ok) {
            console.log('working')
        }
        else {
            console.log('query not ok');
        }

and the input file that send the formdata to the Next Api

<input type="file" onChange={async e => {
          const f = e.currentTarget.files![0];

          const fd = new FormData();
          fd.append("document", f as File);

          const query = await fetch('/api/test', {method: 'POST', body: fd});
        }}/>
@edwarddamato
Copy link

I can confirm this also happens with a Python backend using FastAPI.

On the Python side, we get the following:
{"name": "multipart.multipart", "message": "Did not find boundary character 49 at index 26", "timestamp": "2025-01-13 10:48:46,437", "level": "WARNING"}

The error we get on NextJS is There was an error parsing the body. Going with the manual open-telemetry setup solved this issue.

@RobertoArmas
Copy link

Hello I've seen the same issue, when I have instrumentationHook enabled.

  experimental: {
    instrumentationHook: true,
  },

FormData is like getting ignored in fetch method.

I found a work araound and basically it's adding on fetchOptions which solve the issue, but that is not the point, because it's getting ignored from telemetry.

 opentelemetry: {
      ignore: true,
    },

Would you able to resolve this bug?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants