XHR Poll Error - connecting to a acebase server from the browser

[theoparis]

Hi, so I'm hosting a acebase-server instance on my VPS. I was able to navigate to the acebase server's web manager panel, which seems to be working fine. However, when I used it in a react application in the browser it kept giving me XHR poll errors. There are no errors besides the repeated xhr error. I'd think it would be due to connection issues but I don't know how to solve it...

Here is the output in the inspector console on my browser:

[data] Connecting to AceBase server ****
[data] WARNING: The server you are connecting to does not use https, any data transferred may be intercepted!
[data] Websocket connection error: Error: xhr poll error

It also seems to be working fine in node.js in a CLI command that I created.

Here is the client connection code (excluding the ip address obviously)

import { AceBaseClient } from "acebase-client";

export const createClient = async () => {
    const dbName = import.meta.env.VITE_DB_NAME || "data";
    const dbHost = import.meta.env.VITE_DB_HOST || "localhost";
    const dbPort = import.meta.env.VITE_DB_PORT || "5858";

    if (!dbName || !dbHost || !dbPort) {
        throw new Error("DB_NAME, DB_HOST, DB_PORT is not defined!");
    }

    const client = new AceBaseClient({
        dbname: dbName.toString(),
        host: dbHost.toString(),
        port: parseInt(dbPort.toString()),
        https: import.meta.env.VITE_DB_HTTPS === "true"
    });

    await client.ready();
    return client;
};

[appy-one]

Which version of acebase-client are you using?

[appy-one]

My first attempt at debugging this would be checking if all environment variables are correct. What if you'd console.log all those (including your https var), do they point to the right server?

[appy-one]

If this is still an issue, please reply. I will be closing it otherwise

[paradis-A]

I'm also having the same issue. Im using client version 1.5.1,

[appy-one]

If XHR polls fail, the server is either not running at the same address you configured in the client, or unreachable because of a misconfigured firewall or proxy server in between. Try connecting to your server in the browser to test your settings. Example: if your server is running with https on myserver.com port 8735, simply go to https://myserver.com:8735/ in your browser. If that doesn't work, check your server, firewall and/or (reverse) proxy server configurations

[paradis-A]

client actually works on vanilla js. It's just bundling problem on my end.

[paradis-A]

if anyone in the future encountering this and using typescript. You can directly import the built browser js from dist folder add this to your tsconfig.json

{
  "compilerOptions": {
      "paths": {
        "acebase-client/dist/browser": ["node_modules/acebase-client/index.d.ts"]
     }, 
}

so in your ts file

 import {AceBaseClient} from "acebase-client/dist/browser"
    const db = new AceBaseClient({
        host: "localhost",
        port: 5757,
        dbname: "mydb",
        https: false,
    });
    db.ready(() => {
        console.log("Connected successfully");
    });

this works for me

[appy-one]

client actually works on vanilla js. It's just bundling problem on my end.

Which bundler do you use?