Debugging Wized Applications
Here's a step-by-step guide to help you debug your Wized application
Wized is a powerful tool that allows you to build complex web applications. However, even with its user-friendly interface, bugs can still arise due to user error.
In this guide, we'll cover the most common bugs that you might encounter in Wized, along with practical solutions to help you debug your applications quickly and efficiently.
Identify the problem
Before you start debugging, it's important to narrow down what's causing the problem. Ask yourself the following questions:
What is the expected behavior?
What is the actual behavior?
What error messages are you seeing, if any?
Is it an issue with a request or with an Action?
These questions will help you narrow down the problem.
Once you have identified the problem, you can move on to debugging.
Common Bugs and Solutions
Common issues
Duplicate scripts in your Webflow project
Having multiple <script> tags from different Wized projects may cause unexpected behaviors; requests may not be executed, actions may stop working, errors may appear in the canvas, or duplicate requests may be generated.
Solution: To resolve this issue, go to the custom code settings in your Webflow project and look for the Wized scripts that look like this:
<script defer src="https://embed.wized.com/nZ1mctE6de6gFpEFdk9M.js"></script>
<script defer data-wized-id="nZ1mctE6de6gFpEFdk9M" src="https://embed.wized.com"></script>Each project consists of two <script> tags, one for the embed and one for the config. If more than one set of <script> tags exists, delete the old one.
Wrong script in your Webflow project
If for some reason you have a Wized script from another project by mistake your site will not behave as expected.
Solution: Make sure that the script in the Webflow site corresponds to the script in your Wized project. You can find the correct embed code inside your project Settings > Embed code.
Wrong names in Wized attributes
Wized attributes must not contain any special characters or spaces (i.e. wized = "#OfRooms" or wized = "number of rooms"), otherwise it may cause issues when choosing an attribute from the dropdown when creating an action or other unexpected errors.
Solution: To resolve this issues go to Webflow and review all the Wized attributes you have created throughout your website, rename them correctly, save and re-publish the project.
I get an error when trying to upgrade a project's subscription
Having multiple Wized/Finsweet accounts at the same time may cause that when you try to upgrade your Wized plan, among other scenarios, you get an error mentioning that you are not the owner of the project.
Solution: To resolve this issues go to https://my.finsweet.com/ and log out there, then go back to your Wized project and try again.
Action issues
All of the items in my rendered list are having content from the first item in the array
If this bug occurred, you most likely forgot to add an iterator (index) variable to each field that's supposed to be unique.
When rendering a list of items in Wized, it's essential to include an iterator variable to ensure that each item is displayed correctly. If you forget to add the iterator, you'll end up with a list where all of the elements look exactly the same.
Solution: To fix this bug, simply add the iterator variable in the appropriate place in your code.
Let's say we want to render a the name for of every item inside our list. For that we create a new action, select the right attribute (for our element inside the template) and select the "Set text" action. Notice how we now use the previously defined "Variable for index" to specify the right array item.
I added an Action, but it's not doing anything
You need to refresh the canvas after adding a new action, otherwise, the action won't be applied.
Solution: To fix this bug, simply refresh the canvas by clicking on the "Refresh canvas" button in the top left corner This will ensure that your new action is applied correctly.
If the action is still not working, it's likely that your Action logic wasn't configured correctly. Open the action again, and see if you missed something out.
Request issues
Common HTTP error codes for Data In, and Data Out requests include:
400 Bad Request: The request was malformed or invalid.
401 Unauthorized: The request requires authentication.
403 Forbidden: You don't have the permission to access this endpoint.
404 Not Found: The requested resource was not found.
500 Internal Server Error: There was an error on the server.
502 Bad Gateway: The server, while acting as a gateway or proxy, received an invalid response from the upstream server.
503 Service Unavailable: The server is not ready to handle the request. Common causes are a server that is down for maintenance or that is overloaded.
Each error code corresponds to a specific issue with the request or server response.
For example, a 400 error typically indicates a problem with the request data or parameters that you're sending in the request.
A 500 error suggests an issue on the server side.
By understanding these error codes, you can more quickly identify and resolve your bugs.
Wized is not working correctly with Airtable
Wized supports integration with the Airtable API, which allows you to easily access and manipulate data from your Airtable database.
However, if you name your database fields with spaces or special characters, you may encounter errors when working with the Wized data field.
Solution: To avoid this bug, use underscores (my_field) or camelCase (myField) instead of spaces or special characters when naming your database fields. This will ensure that the Wized data field correctly interprets your data.
Error code 400: Bad request
Another common bug is providing incorrect request header or body values, which can cause requests to fail.
This can happen if you're not familiar with the API documentation or if you make a simple mistake in the request configuration.
Solution: To resolve this bug, carefully review the API documentation and ensure that you're using the correct header and body values for your requests. What's more, double check the request URL in My Apps, and in your Data In or Data Out request, to make sure it matches with the URL that's required by the API.
Error code 401: Unauthorized request
If your backend endpoint requires authentication, it's essential to pass either a token (from your cookie) with your request or an API key. If you forget to add this, you will get an error from your endpoint..
Solution: To avoid this bug, get an API key from the app that you're connecting to. You need to send that API key or token in your request header or body, depending on the API documentation. If the issue is related to user authentication, you most likely didn't provide the authentication token for the user that's currently logged in. If you're using Xano, you can learn how to get an Auth token on this page.
Otherwise, if you're using Firebase or Supabase, you most likely need to first log in within your Wized configurator.
If that didn't resolve the issue, make sure to double check your Row Level Security (RLS) policy in Supabase or Database Security Rules in Firebase.
Error code 403: Forbidden
A "403 Forbidden" error code occurs when the server understands the request that you're making, but refuses to fulfill it.
This error indicates that the server has denied access to the requested resource.
This can happen if you don't have the necessary permissions, or because the server has determined that the request is not authorized for some other reason.
Here are some common scenarios where a "403 Forbidden" error might occur:
Authentication or Authorization Failure: You may not be authenticated or authorized to access the resource. For example, if you try to access an API endpoint that requires authentication, but you don't provide valid credentials, you will get a 401 or 403 error.
Access Control: The server may be configured to restrict access to certain resources based on a specific IP address, user agent, or other criteria. If your app's users (or you) do not meet the criteria, they will get a 403 error.
Resource Permissions: You don't have the necessary permissions to access the resource they are requesting. For example, if you try to access a file or directory on a server, but you do not have read or write permissions, you'll get a 403 error.
Rate Limiting: The server may be configured to limit the number of requests that a client can make within a specific time period. If the client exceeds the limit, they will receive a 403 error.
Solution: Read the error message, and try to pinpoint what's causing it.
If there's an authentication or authorization failure, check if you're providing the right token or API key in your request. Also, ensure that the currently logged in user account in your Wized app has the right permissions to access the enpoint.
If you're the admin of your backend, or if you're working closely to a backend developer, check your security policy on the backend, and make sure that the permissions are configured correctly.
Error code 404: Not Found
This error code indicates that the server could not find the requested resource.
Most likely you misspelled the URL endpoint or the base URL in My Apps.
Solution: To fix this bug, review the API documentation and ensure that you're using the correct endpoint.
The base URL from My Apps combined with the endpoint field in your request, need to match the URL from your API documentation. Example: If you want to make a request to an endpoint like this: www.my-example.com/v1/text You need to ensure to have the following setup in Wized:
Base url in My Apps: www.my-example.com/v1
Endpoint in Data Out or Data In: /text
Error code 405: Method not allowed
This error happens if you are using the wrong HTTP method (e.g., using Data Out instead of Data in or the POST method instead of PUT or DELETE).
Solution: Check the method in your API documentation, and ensure that it's matching with the method that you selected in your request.
Error codes 500, 502, 503
All of these codes suggest that there was an error on the server.
This is in most cases an issue that you don't have control over in Wized.
Solution: To resolve this bug, double check the values that you're passing in your request. If you find any issues, try to see if that resolved the bug. Otherwise you'll need to either have a look at your backend if you're the person who's managing it, or contact the person or company who's responsible for managing the API.
If you still feel stuck, feel free to contact our customer support. We will be happy to help you resolve any issues that you might be facing.