502 Error when running Fynd extension on localhost using trycloudflare.com

Fynd Platform Extensions
#1

Issue: 502 Error when running Fynd extension on localhost using trycloudflare.com on windows system

FDK CLI version: 6.2.1

When I run the command fdk extension preview, the extension preview URL opens, but nothing appears on the screen. Upon inspecting the Network tab in the DevTools, I noticed that the URL trycloudflare.com is showing a 502 Bad Gateway error.

Here are the screenshots of the error:

image (3)
image (3)1366×614 88 KB

image (2)
image (2)1016×317 18.5 KB

Steps to reproduce:

  1. Run fdk extension preview.
  2. Open the extension preview URL.
  3. Check the Network tab for any errors.

Expected behavior: The extension should load in the preview without any errors. Actual behavior: 502 Bad Gateway error is observed.

Please help me resolve this issue.

#2

To resolve the issue, please ensure the following steps are properly done:

  1. Verify that your .env file is set up correctly with all the necessary details.
  2. Confirm that you’re using the latest version of the following packages:
    • fdk-client-javascript (v^1.4.12 or later)
    • fdk-extension-javascript (v^0.7.9 or later)
  3. Try hard refreshing the website, or access it using incognito mode or a different browser to rule out caching issues.

If the problem persists, try running the command with verbose logging enabled:

fdk extension preview --verbose

This will help identify any potential issues. Feel free to share the logs for further debugging if needed.

#3

I am currently using fdk-extension-javascript:v0.6.0 for my extension and it was working fine with command “fdk extension preview-url -p 3000”, but I am facing issues with the fdk login command on the older fdk-cli version, which is not working.

#4

Could you please update to the latest version and try logging in via the Chrome browser using the command:

fdk login

If you encounter any issues during the login process, such as errors, logs, or unexpected behavior, kindly share the details so we can assist you in resolving them.

#5

I have updated the versions, and ran “fdk extension preview --verbose”
below is my updated packages:

"@gofynd/fdk-client-javascript": "^1.4.12",
"@gofynd/fdk-extension-javascript": "github:gofynd/fdk-extension-javascript#v0.7.9",
"@gofynd/nitrozen-vue": "0.0.33",

image
image1267×376 42.4 KB

Now still getting 502 error

#6

Let’s connect @vikash108 on Google Meet at 6:30 PM to discuss the issue.

#7

To start your extension using the new fdk-cli version with older code, please follow these steps:

  1. Start a Tunnel:
    Run the following command to create a tunnel and get the URL:

    fdk tunnel --port PORT

  2. Set the Launch URL:
    Use the obtained tunnel URL to update the partner panel:

    fdk extension launch-url set --url TUNNEL_URL

Additionally, I recommend migrating your older code version to be compatible with the new fdk-cli version. You can follow the migration documentation for this process:

This will ensure that your code is fully compatible with the latest fdk-cli.