Issue with Candid UI and online IDE (Gitpod, Codespaces...)

Developers
1

Hello,
I am encountering a specific issue when attempting to integrate a local replica, Candid UI, with an online IDE/workspace, like Gitpod or GitHub Codespaces. Here’s a brief overview

Environment

  • Any browser (Chrome, Firefox, Brave latest versions)
  • Using an online IDE such as GitPod.
  • dfx version: 0.15.2
  • Local deployment.

Steps to reproduce the issue.

  1. Start a GitPod workskpace, such as the one provided for Motoko Bootcamp.
  2. Start a local replica: dfx start --clean --background
  3. Deploy a canister: dfx deploy project_1 (assuming we’re using the repository provided at step 1)
  4. Click on the URL to access the Candid UI of the deployed canister: http://127.0.0.1:4943/?canisterId=bd3sg-teaaa-aaaaa-qaaba-cai&id=bkyz2-fmaaa-aaaaa-qaaaq-cai

Error message

Screenshot 2024-01-03 at 10.34.20
Screenshot 2024-01-03 at 10.34.201406×640 54.1 KB

  • In the console (warning message): Could not infer host from window.location, defaulting to mainnet gateway of https://icp-api.io. Please provide a host to the HttpAgent constructor to avoid this warning.
  • In the console (error message): Failed to load resource: the server responded with a status of 400 ()

What I’ve tried

  • I’ve made sure that the port 4943 of the Gitpod workshpace is exposed. The .gitpod.yml file contains the following lines:
ports:
  - name: Replica
    port: 4943
    visibility: public
    onOpen: ignore

The Candid UI canister is accessible, as well as the local replica so this is clearly not the issue.

What I believe is happening
I think the problem comes from the format of the “real” URL in the GitPod workspace. Unlike the typical format http://127.0.0.1:4943/?canisterId=bd3sg-teaaa-aaaaa-qaaba-cai&id=bkyz2-fmaaa-aaaaa-qaaaq-cai, it appears as https://4943-motokobootc-daoadventur-s4o8fjy7a8a.ws-eu107.gitpod.io/?canisterId=bd3sg-teaaa-aaaaa-qaaba-cai&id=bkyz2-fmaaa-aaaaa-qaaaq-cai. This discrepancy might be causing an issue with the Candid UI canister’s code, particularly in how it generates the HttpAgent. It seems to be attempting communication with the mainnet rather than the local replica. This issue aligns with similar problems discussed in this forum thread.

The root of the error may lie in the is_local method within the Candid UI canister, as indicated in this code snippet.

1 Like
2

Right, the is_local check is not very robust. Can you try bd3sg-teaaa-aaaaa-qaaba-cai.localhost:4943/?id=bkyz2-fmaaa-aaaaa-qaaaq-cai to see if it works?

To help us better troubleshoot, can you check in the browser console, what’s window.location? is_local is only used to decide if we want to fetch the rootkey. Another thing we can try is to always fetch the rootkey: candid/tools/ui/src/candid.ts at 7b45d8a4c29ec1b3bbbb727ac0675b1bd117585b · dfinity/candid · GitHub, and try to deploy this version in the gitpod to see if it works.

3

@chenyan thanks for answer!

Below is window.location

{
    "ancestorOrigins": {},
    "href": "https://4943-motokobootc-daoadventur-f63kr2ycdxm.ws-eu107.gitpod.io/?canisterId=bd3sg-teaaa-aaaaa-qaaba-cai&id=bkyz2-fmaaa-aaaaa-qaaaq-cai",
    "origin": "https://4943-motokobootc-daoadventur-f63kr2ycdxm.ws-eu107.gitpod.io",
    "protocol": "https:",
    "host": "4943-motokobootc-daoadventur-f63kr2ycdxm.ws-eu107.gitpod.io",
    "hostname": "4943-motokobootc-daoadventur-f63kr2ycdxm.ws-eu107.gitpod.io",
    "port": "",
    "pathname": "/",
    "search": "?canisterId=bd3sg-teaaa-aaaaa-qaaba-cai&id=bkyz2-fmaaa-aaaaa-qaaaq-cai",
    "hash": ""
}

Seems like it’s indeed the issue. The rootkey is not being fetched then.

4

For anyone who is still running into this issue, I managed to identify the root of this problem as a change in the @dfinity/agent npm package in version 0.19.1.

Bugfix PRs:

If you’re encountering this in your own front-end canister (outside of Candid UI), a temporary workaround is to downgrade to @dfinity/agent version 0.19.0.

Cheers!

2 Likes