track_forms fails with error for certain forms
I have strange error on one of my forms, and i dont know how to handle it. Can somebody assist me on this one? If i disable this plugin error is not reproduced.
if this helps, i am using redux form combined with material ui v0 components. But i think its because of phone field which returns value like 0 (888) 888-88-88
Comments
Hi Andrii
I talked with our devs, and they think the issue is being caused by "...serializing any of the react elements since all react elements are circular objects with internal states.".
They tried to replicate the errors and could not get the error to pop up. Would it be possible to have you or your devs check the debug for circular errors?
Let me know and we can discuss further.
Thanks!
-Andreas
I'm not sure how can i correctly debug circular errors, meaning what approach i should choose?
also please take a look on 2 forms values my form gives me:
if only this fields with values are present then Countly doesnt throw errors:
{cellNumber: "(234) 543-4534", homeNumber: "(444) 444-4444", emailAddress: "paa22ing@s.com"}
and this is version with errors:
{name: "андрій", relationship: "888", cellNumber: "(234) 777-7777", homeNumber: "(323) 888-8888", emailAddress: "888rere@aa888.com"}
using TextField from material v0 and Field from "redux-form": "^8.3.6"
Hi Andrii
Can you please post a link to the application you are trying to integrate Countly into? This way we can check a few things on the UI front and get back to you.
Thanks
-Andreas
Can you reach me directly or give me your email? i will have to give you also credentials for our app for you to check this, and i would rather not post it here.
Thank you
Sure thing! You can email me:
Hello!
I noticed the same error on one of my forms and am curious if it has been solved?
The website is a website based on react (nextjs).
It does not seem like react is the issue.
In the websdk I noticed that the form is tracked via the `Countly.track_forms` function. In the top of the processForm function you can see that the data is gathered via get_event_target. In the steps that follow the code tries to get the name attribute from the form.
On my form I have an input field with name="name"... if I inspect the segmentation that is going to be serialized (and where the error happens on) I can see the "circular" structure points to the input element I just mentioned.. weird!?
I cannot tell why the name element is pointing to this value here, but what I do know, and is perhaps the reason, the "name" attribute on a form is deprecated: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form.
I also have set a name attribute on the form (and renaming the "name" one): that fixes the issue, but introduces a new one.. the name of the form is not passed.
If you really need a form name, probably a custom attribute (like data-countly-form-name?) would make more sense? just thinking out loud about that.
I did some digging, on form submit, this is what happens: https://html.spec.whatwg.org/multipage/forms.html#dom-form-elements-dev
What it means, form[name] (like form.name) will give you the element with the name 'name'. This leads eventually to the error `Uncaught TypeError: Converting circular structure to JSON`.
If you want to get the form's name attribute (which most forms likely won't have, assumption), you would want to do something like `event.target.getAttribute('name')`. That will get you the correct value.
A very simple code example: https://codepen.io/joggie/pen/vYKNqYE
Hi Jogchum,
Thanks for your comments. So is everything working for you now that you got that workaround? If you need more support please let me know.
-Andreas
For me at this moment, yes.. I've added a hidden field with name="form-name".. that helps for me.
It is a rightfully bug in the web-sdk though ;-)
So for that i've created an issue on github: https://github.com/Countly/countly-sdk-web/issues/79
Thanks for responding!
Please sign in to leave a comment.