Troubleshooting AgentHTTPResponseError

Developers JavaScript
1

What is the best way to troubleshoot the following error?

I am calling a backend canister function by importing the dfx generated declarations file into my React app component:

import { backend } from "../declarations/backend";

Then I am calling the backend function in a useEffect in the React component similar to this:

useEffect(() => {
    async function fetchList() {
      try {
        const list = await backend.getList();
        if (list) {
          setList(list);
        }
      } catch (error) {
        console.error("Error fetching list:", error);
      }
    }
    fetchList();
  }, []);

When I load the component in my React application, I am getting this error:

Error fetching proposals: AgentHTTPResponseError: Server returned an error:
  Code: 404 (Not Found)
  Body: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot POST /api/v2/canister/{canisterId}/query</pre>
</body>
</html>
    at HttpAgent._requestAndRetry (index.ts:380:1)
    at async HttpAgent._requestAndRetry (index.ts:377:1)
    at async HttpAgent._requestAndRetry (index.ts:377:1)
    at async HttpAgent._requestAndRetry (index.ts:377:1)
    at async HttpAgent.query (index.ts:430:1)
    at async caller (actor.ts:394:1)
    at async fetchList (Component.tsx:20:1)

What is the best way to troubleshoot this error?

2

Typically a 404 means that the canister that you’re trying to call does not exist

3

Is there a good way to troubleshoot if I am running the backend canister locally?

1 Like
4

I’d restart and reset the local replica. Use --clean when running dfx start and then rebuild your canisters. If that doesn’t work we can start to debug what goes wrong

2 Likes
5

Thank you for the tip! I realized that I was getting this error because I testing a backend functionality on a local web server and not the web server generated by DFX.

1 Like
6

@Severin I have the same error, but in my case --clean and re-deploying does not help.

Try to download GitHub - vporton/passport-client-dfinity at 43b400d2651376cddbc1fdc43d81e0e940016603 and then run

  1. dfx deploy backend
  2. curl 'http://localhost:3000/api/v2/canister/gf4a7-g4aaa-aaaaa-qaarq-cai/call' -H 'Accept: */*' -H 'Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,ru;q=0.7' -H 'Connection: keep-alive' -H 'Content-Type: application/cbor' -H 'Cookie: next-auth.session-token=eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..sKP0dzSTrnvUjXrg.VMxTpMyD3nLAeZUGjJmpr7IIo7J89EG_YYdM6M7QVr0PazVVvxIBWuefkcMjbQQcbWg0a-adSvgf-SFumUsjIiZu1w9XbTPGSd7FjQJfIWkAExDInPBA3mlTjzdCzeVru37uz-VYFxspkKC9nxzMOyWSspDF_mOKw4teDwEHajuKIiPiDhwjh6xF9UWlk8DhX8h-joylIngq_eQxj71IbGSc_Ya8H2mcg1oeJK81XY6VxLCo6dNjmap8xXCoTIm49iuADl2MS3pY7MItutTF0_LT3wwy90vj2IL5I8K_WRaHfti1NKZ-YTzH5kLz5uJJB4HlFEtOHREP36iCj4iTr97dfP3FqoEyWo7jA34Lt-HC.wtwGsAE0nfnLpXeLP0zQXQ' -H 'Origin: http://localhost:3000' -H 'Referer: http://localhost:3000/' -H 'Sec-Fetch-Dest: empty' -H 'Sec-Fetch-Mode: cors' -H 'Sec-Fetch-Site: same-origin' -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36' -H 'sec-ch-ua: "Not_A Brand";v="8", "Chromium";v="120"' -H 'sec-ch-ua-mobile: ?0' -H 'sec-ch-ua-platform: "Linux"' --data-raw $'ÙÙ÷¡gcontent§cargXÆDIDL\u0001l\u0002øÅ®«\u0001q´ã­è\u0009q\u0001\u0000\u0084\u00010x3ee0dc43440e1132aa506de9dfa547ab0f69fc2a6d22d535a1bae3502699f28257410511f4830aec198df2676480ed18e0e1b8d9c5a18a4e5e4c0534c0cabfe91b*0xF321940F3D1599a1336CA33f08015dB52eDB0A14kcanister_idJ\u0080\u0000\u0000\u0000\u0000\u0010\u0000#\u0001\u0001ningress_expiry\u001b\u0017ª¾*Ïõ\u0008\u0000kmethod_namex\u001cscoreBySignedEthereumAddressenoncePXa±õ&\u0015Ts\u0096|>\u0011²¶ïxlrequest_typedcallfsenderA\u0004'

The second command is copied from the browser “Export to cURL”.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot POST /api/v2/canister/gf4a7-g4aaa-aaaaa-qaarq-cai/call</pre>
</body>
</html>

$ dfx --version
dfx 0.15.2+rev15.283413df
7

I found that my app in the browser asks port 3000, while should 4943.

Here is my code that mal-functions:

import { createActor as createBackendActor } from './declarations/backend'
...
    const backend = createBackendActor(ourCanisters.BACKEND_CANISTER_ID);
    const score = await backend.scoreBySignedEthereumAddress({address, signature});

Or is 3000 a proxy and should work, too?

8

@Severin I see that on the port 4943, when I open the browser on it, there is the error message that there is no such canister.

I tried to query it (from the browser started on 8080 by npm start) directly after dfx deploy backend and have:

    backend: http://127.0.0.1:4943/?canisterId=bw4dl-smaaa-aaaaa-qaacq-cai&id=bkyz2-fmaaa-aaaaa-qaaaq-cai

(canister with this id exists)

and in the browser

Cannot POST /api/v2/canister/bkyz2-fmaaa-aaaaa-qaaaq-cai/call

(canister with the same id does not exist).

9

Note that I can query the canister through: http://127.0.0.1:4943/?canisterId=bw4dl-smaaa-aaaaa-qaacq-cai&id=bkyz2-fmaaa-aaaaa-qaaaq-cai. So, the canister indeed exists.

Directly after the above query I queried from the browser

POST /api/v2/canister/bkyz2-fmaaa-aaaaa-qaaaq-cai/call

and get an error.

Why does the canister exists but my script in the browser not see it?!

10

@Severin So,

POST http://127.0.0.1:4943/api/v2/canister/bkyz2-fmaaa-aaaaa-qaaaq-cai/call

works and

POST http://localhost:3000/api/v2/canister/bkyz2-fmaaa-aaaaa-qaaaq-cai/call

doesn’t. Proxy bug?

11

I’ve reported it as a bug:

12

I relayed it to the team. Feel free to ping me again if you don’t hear back in a few days…