"Options could not load due to a 3rd-party API Failure" on workflow extension dropdown

[DonPosty]

I have two apps I created for our customers to integrate hubspot with our platform. Each relies on using an external API call to pull a list of possible options into a dropdown, as per this documentation on 3rd party post fetch options . 

The field we are tyring to create uses the following definitions: 

"inputFields": [
    {
      "typeDefinition": {
        "name": "endpoint_id",
        "type": "enumeration",
        "schema": {
          "format": null,
          "type": "STRING"
        },
        "fieldType": "select",
        "options": [],
        "optionsUrl": "https://testapi.test/api/v1/hubspot/drips",
        "referencedObjectType": null,
        "externalOptions": false,
        "externalOptionsReferenceType": null
      },
      "supportedValueTypes": [
        "STATIC_VALUE"
      ],
      "isRequired": false,
      "includeEmptyIfValueAbsent": false,
      "automationFieldType": null,
      "allowedObjectTypes": null
    }
]

And the function that powers it is:

 "functions": [
    {
      "functionType": "POST_FETCH_OPTIONS",
      "id": "endpoint_id",
      "functionSource": "exports.main = (response, callback) => {\n  return callback(transformResponse(response));\n};\n\nfunction transformResponse(response) {\n  let body = JSON.parse(response.responseBody);\n\n  // External value fields in multi value fields in custom actions v1 were\n  // migrated to have a key like v1FieldKey__hs1 in custom actions v2\n  let fieldKey = response.fieldKey.replace(/__hs[0-9]+/, '');\n\n  if (!body.options || !(fieldKey in body.options)) {\n    return { options: [] };\n  }\n\n  let options = [];\n  for (const label in body.options[fieldKey]) {\n    options.push({\n      label,\n      value: body.options[fieldKey][label]\n    });\n  }\n\n  return { options };\n}\n"
    }
  ]

Our reponse code back from our API endpoint is formatted as follows:

{
  "options": {
    "endpoint_id": {
      "Option 1": "CkFzzbbyLTGVSLbNRqGxCtAJVJBBsF",
      "Option 2": "tDwoxoUgnTyIJRrNVmeyLzRmCNzqPU"
    }
  }
}

Here's the sad thing. Both app A and app B have the exact same configurations. App A works currently. App B failes every time with the error "options could not load due to a 3rd-party API failure. To load please refresh the page.". Any app I create by redownloading the config file and recreating the app (i.e. app c, d, e) also fails as such. I cannot figure out why the first app even works now.

I've tried modifiying the API endpoint to send back the data exactly as the API document suggestions: 

{
  "options": [
    {
      "label": "Big Widget",
      "description": "Big Widget",
      "value": "10"
    },
    {
      "label": "Small Widget",
      "description": "Small Widget",
      "value": "1"
    }
  ]
}

And used the following post fetch function as well:

exports.main = function(event, callback) { return callback(transformRequest(event)); }
function transformRequest(request) { return { webhookUrl: request.webhookUrl, body: JSON.stringify(request), httpMethod: 'POST' }; }

And yet still the field returns the same error. How can I effectively create a dynamic drop down ufor the workfloe extension?

[GRajput]

Hi @DonPosty 

Some of the possible causes could be -
1. App B might be failing due to an invalid token, an expired token, or unauthorized scopes. Please recheck them.
2. HubSpot enforces a ~3-second timeout on dynamic option sources. If your API is slow or the request takes too long, it will silently fail. Maybe your second app is responding in a longer time period.
3. Cors Error. This might be the cause here.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.

Thanks!

[Jaycee_Lewis]

Hey, @DonPosty 👋 Welcome to our community! That's a strange one, but I have a theory. 

Since App A works and the identical App B fails, I wonder if your API is rejecting the request from App B due to an invalid request signature (X-HubSpot-Signature-v3). 

Do you have access to your API server logs? If you check them when trying to load the dropdown in App B, you can see the status code your server is returning to HubSpot. That might tell us everything we need to know.

If you already ruled this out, knowing this might be helpful too. Talk soon — Jaycee

[DonPosty]

Unfortunately, I am able to rule out the server rejection. I do have access to the logs, and for app B, we are recieving the incoming request and returning a 200 OK response back to to HubSpot with the exact same payload. 

[Jaycee_Lewis]

Hey, @DonPosty 👋 Were you able to make any progress? I am at the limit of my troubleshooting skills, but I did ask Gemini to help suggest some troubleshooting steps for us. I'll add below as a separate comment. Talk soon! — Jaycee

[Jaycee_Lewis]

Option one — the `externalOptions` flag

In your app configuration, have you tried changing this one line and redeploying App B?

From: "externalOptions": false,

To: "externalOptions": true,

Option two — verify the server response time

Check the precise timestamps in your server logs for App B. Log the exact time the request is received and the time the 200 OK response is sent. Verify if the duration is well under 3 seconds.

Option three — log the POST_FETCH_OPTIONS Input

Log the entire response object that your POST_FETCH_OPTIONS function receives. (my interpretation of this one is that we are looking to see if a formatting issue is the culprit — J) We need to know the exact value of response.fieldKey for the failing App B.

— Jaycee

[Jaycee_Lewis]

One last thing. My favorite question to ask in this situation when I get stuck — what's the simplest test we can create to verify/rule out the root cause(s)? 

• set up a new API endpoint on your server that return a hardcoded, correctly formatted JSON response. Use the simple format you already tested:
  

  {
    "options": [
      { "label": "Test Option 1", "value": "val1" },
      { "label": "Test Option 2", "value": "val2" }
    ]
  }​

• use a function that does nothing but pass the response through
  

  exports.main = (response, callback) => {
    const body = JSON.parse(response.responseBody);
    callback({
      options: body.options
    });
  };​

• Create a new app definition pointing to this new static endpoint, ensuring that "externalOptions" is set to true

If this minimal test app works, the problem lies within the logic or performance of your original .../hubspot/drips endpoint or the transformation function. If it still fails, the issue is likely related to your app's core configuration or its authentication with HubSpot.

Have fun testing! — Jaycee

[Jaycee_Lewis]

Thanks for the update @DonPosty. Let's ask some of our community experts if they have any suggestions — hey @Teun @Mike_Eastwood @zach_threadint do you have any other troubleshooting thoughts for @DonPosty?

Thank you very much for taking a look! — Jaycee