Issue with WebSocket Proxy Configuration for Local Development in Next.js App

Hello community members.

I am currently setting up a local development environment for a Next.js application. Following the instructions at https://vercel.com/docs/storage/vercel-postgres/local-development, I have configured Docker containers for Postgres and WSProxy locally. I am attempting to connect to these services from the app running with npm run dev. However, I am encountering the following error:

Error fetching recipes: ErrorEvent {
  [Symbol(kTarget)]: WebSocket {
    _events: [Object: null prototype] {
      error: [Function],
      message: [Function],
      close: [Function],
      open: [Function]
    },
    _eventsCount: 4,
    _maxListeners: undefined,
    _binaryType: 'arraybuffer',
    _closeCode: 1006,
    _closeFrameReceived: false,
    _closeFrameSent: false,
    _closeMessage: <Buffer >,
    _closeTimer: null,
    _extensions: {},
    _paused: false,
    _protocol: '',
    _readyState: 3,
    _receiver: null,
    _sender: null,
    _socket: null,
    _bufferedAmount: 0,
    _isServer: false,
    _redirects: 0,
    _autoPong: true,
    _url: 'wss://localhost/v2',
    _req: null,
    [Symbol(shapeMode)]: false,
    [Symbol(kCapture)]: false
  },
  [Symbol(kType)]: 'error',
  [Symbol(kError)]: AggregateError [ECONNREFUSED]: 
      at internalConnectMultiple (node:net:1117:18)
      at afterConnectMultiple (node:net:1684:7)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    code: 'ECONNREFUSED',
    [errors]: [ [Error], [Error] ]
  },
  [Symbol(kMessage)]: ''
}

There are no logs displayed in the Postgres and WSProxy containers, indicating that the requests are not reaching them.

In the API route file, I checked the neonConfig settings as follows, and it appears that the settings from db.ts are being applied correctly:

export async function GET() {
  try {
    console.log('neonConfig settings:', {
      wsProxy: neonConfig.wsProxy,
      useSecureWebSocket: neonConfig.useSecureWebSocket,
      pipelineTLS: neonConfig.pipelineTLS,
      pipelineConnect: neonConfig.pipelineConnect,
    });

    console.log(neonConfig.wsProxy?.toString());

    const result = await sql.query(`SELECT id, ...`);
    ...

However, the error log shows _url: 'wss://localhost/v2'. Additionally, the documentation at https://github.com/neondatabase/serverless/blob/28c823db83fcf1a7c32987027fb0b1980bad1573/CONFIG.md?plain=1#L266 states the following:

#### `wsProxy: string | (host: string, port: number | string) => string`

If connecting to a non-Neon database, the `wsProxy` option should point to md-link-0. It can either be a string, which will have `?address=host:port` appended to it, or a function with the signature `(host: string, port: number | string) => string`. Either way, the protocol must _not_ be included, because this depends on other options. For example, when using the `wsproxy` proxy, the `wsProxy` option should look something like this:

Default: `host => host + '/v2'`.

Therefore, it seems that the wsProxy: neonConfig.wsProxy setting is not being applied correctly. Could you please provide guidance on how to resolve this issue?

Thank you for your assistance.

Best regards,

Hi , could you resolve your problem? I'm facing the same problem when try to connect to my local postgres DB on docker. I'm not using any ORM, just vercel/postgres.

Hi , Thank you for your reply.

I haven't resolve the problem. I'm also not using any ORM.

I' sorry for not being helpful for you. I'd like you to comment here if you get any way to resolve.

Thank you for your assistance. Best regards,

Hi !

I couldn't resolve the issue, so I started to use Prisma and it worked the first try. In conclusion I think that vercel/postgress has an issue when you want to work locally using your DB on a docker container or we haven't had something into consideration.

I hope it is useful to you. Best.

Hi !

I' ll try to use Prisma.

Thank you !

Thanks for jumping in and helping out, !

Hello community members.

Error fetching recipes: ErrorEvent {
  [Symbol(kTarget)]: WebSocket {
    _events: [Object: null prototype] {
      error: [Function],
      message: [Function],
      close: [Function],
      open: [Function]
    },
    _eventsCount: 4,
    _maxListeners: undefined,
    _binaryType: 'arraybuffer',
    _closeCode: 1006,
    _closeFrameReceived: false,
    _closeFrameSent: false,
    _closeMessage: <Buffer >,
    _closeTimer: null,
    _extensions: {},
    _paused: false,
    _protocol: '',
    _readyState: 3,
    _receiver: null,
    _sender: null,
    _socket: null,
    _bufferedAmount: 0,
    _isServer: false,
    _redirects: 0,
    _autoPong: true,
    _url: 'wss://localhost/v2',
    _req: null,
    [Symbol(shapeMode)]: false,
    [Symbol(kCapture)]: false
  },
  [Symbol(kType)]: 'error',
  [Symbol(kError)]: AggregateError [ECONNREFUSED]: 
      at internalConnectMultiple (node:net:1117:18)
      at afterConnectMultiple (node:net:1684:7)
      at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    code: 'ECONNREFUSED',
    [errors]: [ [Error], [Error] ]
  },
  [Symbol(kMessage)]: ''
}

There are no logs displayed in the Postgres and WSProxy containers, indicating that the requests are not reaching them.

In the API route file, I checked the neonConfig settings as follows, and it appears that the settings from db.ts are being applied correctly:

export async function GET() {
  try {
    console.log('neonConfig settings:', {
      wsProxy: neonConfig.wsProxy,
      useSecureWebSocket: neonConfig.useSecureWebSocket,
      pipelineTLS: neonConfig.pipelineTLS,
      pipelineConnect: neonConfig.pipelineConnect,
    });

    console.log(neonConfig.wsProxy?.toString());

    const result = await sql.query(`SELECT id, ...`);
    ...

#### `wsProxy: string | (host: string, port: number | string) => string`

If connecting to a non-Neon database, the `wsProxy` option should point to md-link-0. It can either be a string, which will have `?address=host:port` appended to it, or a function with the signature `(host: string, port: number | string) => string`. Either way, the protocol must _not_ be included, because this depends on other options. For example, when using the `wsproxy` proxy, the `wsProxy` option should look something like this:

Default: `host => host + '/v2'`.

Therefore, it seems that the wsProxy: neonConfig.wsProxy setting is not being applied correctly. Could you please provide guidance on how to resolve this issue?

Thank you for your assistance.

Best regards,

Hi , could you resolve your problem? I'm facing the same problem when try to connect to my local postgres DB on docker. I'm not using any ORM, just vercel/postgres.

Hi , Thank you for your reply.

I haven't resolve the problem. I'm also not using any ORM.

I' sorry for not being helpful for you. I'd like you to comment here if you get any way to resolve.

Thank you for your assistance. Best regards,

Hi !

I hope it is useful to you. Best.

Hi !

I' ll try to use Prisma.

Thank you !

Thanks for jumping in and helping out, !