AttributeError: 'list' object has no attribute 'track' (Connecting to Segment)

Hi there, I’m a novice when it comes to python and anvil.

I’m following this article exactly but I keep running into the following error:

Here is the project URL: Knack 4 Freedback

I’m trying to add Segment’s JS library, identify a user, and send a track event on button submit (following the article exactly).

The JS library loads fine as I can see the .page event in Segment, but when I try to submit the button and send a .track event, I get an error in Anvil.

Here is my Anvil code (using the feedback project), can someone please help me understand what I may be doing wrong?

from ._anvil_designer import feedbackformTemplate
from anvil import *
import anvil.server
import anvil.tables as tables
import anvil.tables.query as q
from anvil.tables import app_tables
from anvil.js.window import analytics


class feedbackform(feedbackformTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    # Any code you write here will run when the form opens.

  def submit_button_click(self, **event_args):
    # NEW line:
    analytics.track("Feedback submitted")
    
    name = self.name_box.text
    email = self.email_box.text
    feedback = self.feedback_box.text
    
    anvil.server.call('add_feedback', name, email, feedback)
    
    Notification("We have recorded your feedback, and sent an email to the owner of this app.", title="Thanks!").show()
    
    self.clear_inputs()
    
    
  def clear_inputs(self):
    self.name_box.text = ""
    self.email_box.text = ""
    self.feedback_box.text = ""

Please help!! Thanks everyone.

@aknackfor_anvil - thanks for reporting. I’ve moved to bug reports.
This looks like a problem with segment fully loading.

I’ve managed to reproduce the error and we’ll see what we can fix our end and report back.
It may be partially browser related. In firefox it seems to work consistently.
I’ve been able to reproduce in both safari and brave.
Which browser are you using?

1 Like

@aknackfor_anvil - we think we’ve identified the source of the problem.
It appears to be a race condition with how segment loads the analytics object.
The blog will be updated soon.
In order to fix your own app, we suggest adjusting the following:

Replace

from anvil.js.window import analytics

to

from anvil.js import window

And then replacing analytics with window.analytics throughout the form.
This should fix the error.
Do let us know if that works for you.

1 Like

@stucork I experience the same issue, even after following your suggestion.

Thanks @koulesali, you could try the following, which should work.

As well as replacing analytics with window.analytics,
Go to the script provided by segment.
At the start of the script you’ll find this expression:

var analytics=window.analytics=window.analytics||[];

replace it with

var analytics=window.analytics=window.analytics||Object.create(Array.prototype);

This is a bit of hack, but it should work.

It tells Anvil’s Javascript <-> Python bridge to not treat window.analytics as a Python list
Segment does some unconventional overloading of a Javascript Array, which we’re not able to handle when we convert it to a Python list

1 Like

Thanks @stucork that worked perfectly.

You are the best! :grinning:

1 Like