InfluxCommunity / influxdb3-js

The JavaScript Client that provides a simple and convenient way to interact with InfluxDB 3.
https://influxcommunity.github.io/influxdb3-js/
MIT License
13 stars 4 forks source link

Browser client requests fail due to unsupported Content-Type `application/grpc-web-text` #370

Closed jannisch closed 1 week ago

jannisch commented 1 month ago

Specifications

Code sample to reproduce problem

import { InfluxDBClient } from "@influxdata/influxdb3-client"

interface Env {
    INFLUX_TOKEN: string
    INFLUX_DB: string
}

export default {
    async fetch(request: Request, env: Env): Promise<Response> {
        const influx = new InfluxDBClient({
            host: "https://eu-central-1-1.aws.cloud2.influxdata.com",
            token: env.INFLUX_TOKEN,
            database: env.INFLUX_DB
        })

        const res = await influx.query("SELECT * FROM foo")

        const data = []

        for await (const value of res) {
            data.push(value)
        }

        return Response.json(data)
    }
} satisfies ExportedHandler<Env>

Expected behavior

Respond with query results

Actual behavior

RpcError: invalid gRPC request content-type "application/grpc-web-text"
  at null.<anonymous>
  (file:///C:/Users/jannisch/source/influx-worker/node_modules/@protobuf-ts/grpcweb-transport/build/es2015/grpc-web-transport.js:62:23)
  {
    code: 'INVALID_ARGUMENT',
    meta: {
      connection: 'keep-alive',
      'content-length': '0',
      date: 'Wed, 24 Jul 2024 23:54:46 GMT',
      'strict-transport-security': 'max-age=31536000; includeSubDomains',
      'x-envoy-upstream-service-time': '0'
    },
    methodName: 'DoGet',
    serviceName: 'arrow.flight.protocol.FlightService'
  }

Additional info

Same behaviour with @influxdata/influxdb3-client-browser

jannisch commented 1 month ago

I'm wondering how this could have ever worked before ?

bednar commented 1 month ago

Hi @jannisch,

Thank you for choosing our client for your application.

I understand you are using the influxdb3-client-browser, which is specifically designed to operate within a browser environment. It’s important to ensure that you have a properly configured proxy to facilitate the client's operations, especially since it makes use of gRPC calls to communicate with InfluxDB 3.

For a step-by-step guide on setting up the client in a browser environment, including examples that might help you configure your setup more effectively, please visit our documentation here: Browser Examples.

Regarding the configuration of your Cloudflare environment to support gRPC:

Please ensure that Cloudflare’s gRPC settings are correctly configured to avoid connection issues or disruptions in service. This includes checking any relevant firewall settings, SSL/TLS configurations, and ensuring that your Cloudflare settings are compatible with gRPC's requirements.

If you have further questions or encounter specific issues while setting this up, feel free to share more details or error messages, and I’ll be more than happy to assist you further.

Best Regards

jannisch commented 2 weeks ago

Thanks a lot for your reply. While I thought it is AI generated at first, it is quite helpful since you do provide an example for such a proxy. If I am not mistaken, the proxy is generally required, as the client could support only HTTP/1.1, i.e in the case of an outdated browser. On the other hand, one does control the environment when building an app using Deno, Bun, etc, just as in the case of Node.JS, where we know that the supported version supports HTTP/2. So it would be a nice feature enhancement in fact to be able to use the direct gRPC transport with in the browser sdk, correct?

bednar commented 1 week ago

Hi @jannisch,

As I mentioned, the proxy is required due to the browser environment. For more information, see - https://github.com/grpc/grpc/blob/master/doc/PROTOCOL-WEB.md.

Best regards

jannisch commented 1 week ago

I am going to close this issue as it is a non-issue with browsers in fact.

However what I tried to point out that deno and other runtimes (which you already support) are not browser environments. They are rather like Node.js as we deploy them but with the same APIs as the browser, hence I don't understand the need for the proxy.