After reading this article, you will understand how to read a stack trace error, and how to resolve this error on your runtime page.
What is a stack trace error?
A stack trace error in Betty Blocks is a report of listings of page builder components or functions that are currently active on your canvas. It shows the sequence of components that have been generated up to a certain point, where a component could not load as expected and returned an error.
How can I read a stack trace error?
When your page has “crashed” and has returned a stack trace error, it would look something like this.
The error that is being returned says “TypeError: Cannot read properties of undefined (reading “_currentValue”)”
The error is present in a “Text” component. Usually all applications have a lot of text components called “Text”, so this does not give us much information.
After the text, there are HTML elements being presented, such as a “div” and “Unknown” elements. This also does not give us much information.
The next component that we see is a “DataContainer”. This gives us the information that our “Text” component resides in a data-container component. If our application does not use many data-container components, we can technically debug where this issue is present, but we will go one layer deeper.
The next component we find in our stack trace is a “BettyUserDataContainer”.
Because have two or more of the same components, we have given our duplicate component a unique name.
This allows us to easily locate our component and from there, we can locate our text component where the error is coming from.
For this, we go back to the page builder, and look into our component tree. Because the stack trace returns a unique name, we can use the component tree and filter for our “BettyUserDataContainer”.
We can follow the stack trace all the way down to a “Text” component.
After a little bit of debugging in our text component, we can see that the value of the Text component is asking for “stack trace errors.Name” (see image below). We have changed the data origin of the data container to something else, but have forgotten to change the value of our text component. We can confirm this by adding another variable to the textbox of the same model. Here, we can see that this is not possible.
The reason it is not possible, is because in our data-container, we pass a model called “stack trace relation”. This is a different model than the “stack trace errors” our text component is expecting.
The text component is unable to read the current value that it wants to display in the screen. This is what is currently causing the stack trace error.
The easiest way to resolve this is to remove the value from the text component. It will no longer want to show the value of something it is unable to read.
Another option is to change the structure of how data is passed to the component. For example, you can change the data container to grant the text component access to the “stack trace relation” model.
Another option, if the model is a relational model, is to look for the value through a relational path. Instead of looking for “stack_trace_relation.Name”, you might be able to access the value through “stack_trace_errors.stack_trace_relation.Name”.
These are some options that could help resolve a common builder stack trace error.
Important tips for debugging!
-
Give data components or components that are used multiple times, a unique name.
This allows you to read through your stack trace more easily and find a recognizable component in your tree view for further debugging. -
Read what the Type Error says. The type error can give you clues about the nature of the problem. For example: Cannot read properties of undefined (reading '_currentValue'), will tell you that it is unable to read a value from an option.
-
Go through your latest changes. What have been the latest changes that have been made to the page? Have you removed a property from a model? Have you changed a relation? Did you change anything in a data filter or interaction?