JS Errors
Errors may be encountered when using JS Objects or writing JS functions. They can be caused by syntax errors in the code, data type mismatch, or attempts to access properties or functions that don't exist.
This section helps you troubleshoot common JS errors on the Appsmith platform.
Data type evaluation errors
This error occurs when the value in the property of the widget doesn't match the data type required by the property.
Error message
Cause
While working with Tables or Lists, you may encounter this error, as the data property expects an array of objects which might not match the data type of the API response.
Solution
The solution to this is to bind the array inside the response object or transform the response object using JavaScript. Take an example response of the fetch users API as below. Binding it to a table directly would lead to an error.
{
"next": "https://mock-api.appsmith.com/users?page=2&pageSize=10",
"previous": null,
"users": [
{
"id": 1,
"name": "Barty Crouch",
"status": "APPROVED",
"avatar": "https://robohash.org/sednecessitatibuset.png?size=100x100&set=set1",
"email": "barty.crouch@gmail.com",
},
{
"id": 2,
"name": "Jenelle Kibbys",
"status": "APPROVED",
"avatar": "https://robohash.org/quiaasperiorespariatur.bmp?size=100x100&set=set1",
"email": "jkibby1@hp.com",
}
]
}
To overcome this, you can bind the user's array of the response instead of the entire response object using JavaScript:
{{ fetch_users.data.users }}
Error message
Cause
While adding options to single-select or multi-select dropdowns, you might face a data mismatch error. In such cases, make sure the options property is an array of objects containing a label and value as strings.
Solution
In case the response doesn't contain label and value keys as below, you can map over the response to transform it using JavaScript.
// invalid response of fetchColors API
[
'Blue',
'Green',
'Red'
]
// Transform Response
{{
fetchColors.data.map((color) =>{
return {
label: color,
value: color
}
})
}}
Error message
Cause
The below image shows that there is an error in the Chart Data field of the Chart widget. The Evaluated Value here indicates the current value of the field, and in the screenshot below, you can see that the current value is an array while the error indicates that it must be an array\<x, y>.
Solution
In cases like these, you can use JavaScript to transform the data to the correct data type or access the correct data inside the object. The below code reduces the fetch_orders.data array to aggregate orders based on the date into an array \<x, y> where x is the date of the order and y is the order amount
{{
_.values(fetch_orders.data.reduce((accumulator, order) => {
if(accumulator[order.date]) {
accumulator[order.date].y += order.orderAmount
} else {
accumulator[order.date] = { x:order.date, y: order.orderAmount };
}
return acc;
}, {}))
}}
Error message
Cause
The date picker expects its default date in the standard ISO format. If the date you provided doesn't match this, you'll see this error.
Solution
To resolve this, you can transform the date string using moment.js.
// Moment can be used to set the default date to the current date
{{moment()}}
// Moment can parse your date format
{{ moment("2021-07-26", "YYYY-MM-DD") }}
Error message
Cause
This error typically occurs in the isVisible and isDisabled properties and indicates that the value in the property doesn't match a boolean type.
Solution
You can solve this by using a comparison operator.
{{ Dropdown1.selectedOptionValue === "RED" }}
Error message
Cause
When working with widgets, you may come across an error where the data property is expecting a string value that doesn't match the data type of the query response.
Solution
The solution to this issue is to convert the data type of the API response to a string. This can be done using JavaScript methods. Additionally, make sure that the data being passed to the widget is in the correct format. For example:
To get text,
{{Text1.text}}
To get image,
{{Image1.image}}
In case the preceding doesn't work, you can also check the EVALUATED VALUE section to make sure that it's returning a string value and not an object or other data type.
Error message
Cause
You may come across an error where the data property is expecting a numeric value that doesn't match the data type of the API response.
Solution
It's important to ensure that the data being passed to the widget's data property matches the expected data type. One solution to this issue is to use JavaScript to convert the API response to the correct data type, or to access the correct data type from the API response.
You can also check the EVALUATED VALUE section to make sure that it's returning a numeric value and not an object or other data type.
Syntax error
This error occurs when there is invalid JavaScript inside the handlebars {{ }}. The evaluated value of the field is displayed as undefined in this case. Verify the number of braces in your code and consider re-writing your JS as multi-line code.
In the example below, fetch isn't defined anywhere in the application
Cyclic dependency error
An app gets a cyclic dependency error when a node is directly or indirectly dependent on itself.
Reactivity and dependency map
In Appsmith, all user-editable fields are defined as nodes, and to provide reactivity, a dependency map is created between these nodes to find the optimal evaluation order of these nodes. For example, when you would refer to {{Api1.data}} in a Table1's tableData field, there is a dependency created between Api1.data and Table1.tableData. So every time Api1.data updates, Table1.tableData needs to be updated.
// Table1.tableData depends on Api1.data
Api1.data -> Table1.tableData
Similarly, all parent nodes are implicitly dependent on the child nodes to ensure updates are propagated up an entity object. A more straightforward way to understand this is that if a child node updates, the parent node, and its dependencies should also be updated.
// Implicit. Parent depends on children
Api1.data -> Api1
Table1.tableData -> Table1
// Explicit. Table1.tableData depends on Api1.data
Api1.data -> Table1.tableData
The most common scenario where a cycle occurs is when you would try to bind a node to its parent node. Since it's impossible to evaluate an app with a cyclic dependency, you have to exit out and be in an error state till the cycle is resolved.
// A cycle is formed
Table1 -> Table1.tableData
Table1.isVisible -> Table1
Infinite loop error
An infinite loop error occurs when a function or code block repeats indefinitely, causing the app or function to become unresponsive, and can even prevent users from accessing certain features of the app.
Cause
The problem may be due to a page load function that's stuck in a loop. This can happen if you have added code that uses the navigateTo function and is executed on onPageLoad, which can cause the page to become inaccessible or cause the app to get stuck in a loop and constantly routing to the destination page.
Solution
To fix this problem, you can use debugger statements in Appsmith to halt the execution of the code and identify the source of the infinite loop. Here are the steps to do this:
- Open the app in Appsmith and go to the page where the infinite loop is occurring.
- Locate the function or code block that's causing the infinite loop.
- Insert a debugger statement at the beginning of the function or code block that pauses the execution of the code and allows you to inspect its state. For more information, see debugging statement and how to use it.
- Use the debugger console of the browser to step through the code and identify the cause of the infinite loop.
- Once you have identified the issue, make the necessary changes to the code to fix it.
- Save the changes and test the app again to ensure the infinite loop issue has been resolved.
If you can't find what you are looking for and need help debugging an error, please raise your issue on Discord Server or email at support@appsmith.com.