500 (Internal Server Error) Error occurred while trying to proxy: localhost:8080/api/v2/canister/.../query

Developers
1

Over the last few weeks, I’ve started to encounter the following error when making canister calls to a remote backend running on the ICP mainnet from within my user interface which is run locally. The issue occurs for approximately 50% - 60% of the query and update calls that I make.

Uncaught (in promise) Error: Server returned an error:
  Code: 500 (Internal Server Error)
  Body: Error occurred while trying to proxy: localhost:8080/api/v2/canister/.../read_state

Does anyone know what may be causing this issue? I’ve noticed that this error is more persistent during certain times of the day and less persistent at other times, but I’m not entirely sure how to go about troubleshooting and debugging this issue as there’s no clear indicator given regarding what may be causing this issue.

2

Could you share more details on what you mean by this? E.g., which tools are involved (and their versions), what commands are executed etc.

Typically, “http outcalls” refer to canister http outcalls, i.e., calls from your canister to the http_request endpoint of the mgmt canister to connect to an arbitrary remote HTTP endpoint.

3

I’m not entirely sure what the process is. I’m not explicitly making any HTTP outcalls. I may have misspoke then. “api call” may be the more accurate phrase.

I have an asset canister running locally which houses my UI. The asset canister is the only thing that runs locally: it makes calls to the ICP mainnet for authenticating users and interacting with the backend canister that I have running on mainnet.

about half the time when i attempt to interact with said backend canister on mainnet I get the error that I mentioned above. The UI is React.JS and I’m using webpack. The Node version that I’m using is v18.13.0.

4

I noticed this issue is more persistent around midday central standard time and less so during the afternoon/evening hours. I also recently switched internet providers. I’m wondering if this could have something to do with the internet in my area. Does that seem plausible to you?

It could also have something to do with the destination address that I’m attempting to proxy. I’m proxying to https://icp-api.io . I suspect this address may be having some issues due to network congestion.

5

The error message refers to localhost:8080/api/v2/canister/.../read_state which is a network-local URL. If you’re proxying that to https://icp-api.io then your internet connectivity might indeed matter. You could also try https://icp0.io instead to see if this helps.

6

I gave it a shot, but it doesn’t make much of a difference. After doing some more digging, I’m pretty sure the issue isn’t my internet connectivity, but rather its an issue of congestion on the network. My best guest is that the number of API calls being made to the https://icp-api.io gateway must have increased as of late, congesting the gateway in the process and causing some of the calls to fail.

Due to the fact that my local development environment is running off-chain and is making calls to my remote canister which is running on-chain, the calls are being carried out via HTTPS requests that run through the gateway where they fail on occasion.

I think the only solution is going to be to set up a local environment for my backend.

7

I ended up finding the solution of the issue. Below is a copy of the code that I use for instantiating the actor that is used to interact with the API. When Instantiating the backend actor, I made sure to specify https://icp-api.io as the host.

What I neglected to do was also specify https://icp-api.io as the host when instantiating the HttpAgent that is provided when instantiating the backend actor.

specifying https://icp-api.io as the host on instantiation the HttpAgent and on instantiation of the backend actor resolved the issue.

export const getLoginCredentials = async (anon) => {
  const authClient = await AuthClient.create();
  if(!anon)await new Promise((resolve, reject) => {
    authClient.login({
      onSuccess: resolve,
      onError: reject,
    });
  });
  const identity = authClient.getIdentity();
  const agent = new HttpAgent({ identity, host: "https://icp-api.io" });
  return {agent};
};


export const getBackendActor = async ({anon = false}) => {
    const {agent} = await getLoginCredentials(anon);
    let pd_api_canisterId;
    if(process.env.NODE_ENV === "development") pd_api_canisterId = canisterIds.pd_api.ic;
    else {
      let currentURL = getCurrentURL();
      let frontEndPrincipal = extractCanisterIdFromURL(currentURL);
      let pdUiCanister = pdUiFiles.createActor(frontEndPrincipal, {agentOptions: {host: "https://icp-api.io"}});
      let authorizedPrincipals = await pdUiCanister.list_authorized();
      pd_api_canisterId = authorizedPrincipals[0];
    }
    let actor = Actor.createActor(pdApiFiles.idlFactory, { agent, canisterId: pd_api_canisterId} );
    return {actor, agent};
  };