Event properties not being sent to Amplitude

[AndreiIl]

Abstract

Events are being triggered from inside my app using the correct properties as defined in the Tracking Plan but they are being logged as invalid as the properties are not being sent.

Environment

"amplitude-js": "8.18.1"
"@types/amplitude-js": "8.16.0"
Chrome: 100.0.4896.127

Repro steps

1. Create a custom event with some properties inside your project's Data Dashboard
2. Follow the steps to setup the Typescript SDK inside React app as described here
3. Instrument the event in the app using the provided strongly typed associated method, passing in the required fields as enforced by the customized SDK
4. Use the application in order to trigger the custom event logging
5. Investigate the Tracking Plan Events page and notice that the events have been registered but as Invalid because the mandatory fields were not being captured

Observations

• While investigating the Network requests done for registering the events, noticed the payload sent does not contain any of the properties set by the app when triggering the event inside the event_properties field. Below I pasted the payload for one such event ( sensitive values have been taken out ):

checksum: <some_checksum_value>
client: <client_value>
e: [{"device_id":" <some_device_id", "user_id":null,
"timestamp":1651149411282,
"event_id":13,
"session_id":1651145226753,
"event_type":"Dictionary`Search",
"version_name":null,
"platform":"Web",
"os_name":"Chrome",
"os_version":"100",
"device_model":"Mac` OS",
"device_manufacturer":null,
"language":"en-US",
"api_properties":{},
"event_properties":{},
"user_properties":{},
"uuid":<some_uuid_id>,
"library":{
    "name":"amplitude-js", 
    "version":"8.18.1"
},
"sequence_number":13,
"groups":{},
"group_properties":{},
"user_agent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36",
"plan":{"branch":"main","source":"web-react","version":"1","versionId":<some_version_id>}
}]
upload_time: 1651149411283
v: 2

• Neither the ampli.customEventName(props) nor the ampli.track(new CustomEventName(props)) worked, both of them failed to register the attributes and were marked as invalid because of it

• While debugging noticed that when calling the track(new CustomEventName(props)) the event object only has the event_type prop set, while event_properties is not, which could indicate an inheritance issue, as the CustomEventName class implements BaseEvent but only relies on the constructor to set the event_properties, which it does not.

• If inside my custom event class definition (inside ampli/index.ts), I add the assignment of event_properties to this.event_properties inside the constructor, the issue is resolved, eg:

export class MyCustomEvent implements BaseEvent {
  event_type = 'My Custom Event';

  constructor(
    public event_properties: MyCustomEventProperties,
  ) {}
}

becomes

export class MyCustomEvent implements BaseEvent {
  event_type = 'My Custom Event';

  constructor(
    public event_properties: MyCustomEventProperties,
  ) {
    this.event_properties = event_properties;
  }
}

Please let me know if I should provide more info about the issue and thank you for looking into this.

[yuhao900914]

Hi @AndreiIl, thanks for using amplitude SDK.
Did create a source for your project in Data, and link this source to your tracking plan?
And also what's the ampli version?

[AndreiIl]

@yuhao900914 yes, I created a source with the Typescript Runtime, added an event in the tracking plan, and added the source to the event.

ampli --version
@amplitude/ampli/1.9.0 darwin-x64 node-v12.22.12

[yuhao900914]

@AndreiIl , how does the function method myCustomEvent look like and what are your MyCustomEventProperties?

[yuhao900914]

cc: @qingzhuozhen @justin-fiedler, any other thought you might have related to this issue?

[qingzhuozhen]

Is this for any custom event for Typescript Browser? @yuhao900914 Maybe check on the examples and pull with demo see if anything changed.

[justin-fiedler]

I ran the Browser TypeScript Ampli Example and it tracked event properties correctly with the same code.

Is this happening for all events or just one in particular? It will be helpful to know the exact property types on MyCustomEventProperties. We have different codegen based on different property scenarios.

[AndreiIl]

@yuhao900914 so what ampli generated for me when using pull is the code below ( note that in my example MyCustomEvent is actually DictionarySearch here ):

export class DictionarySearch implements BaseEvent { event_type = "Dictionary Search"; constructor( public event_properties: DictionarySearchProperties, ) {} }

dictionarySearch( properties: DictionarySearchProperties, options?: EventOptions, extra?: MiddlewareExtra, ) { return this.track(new DictionarySearch(properties), options, extra); }

@qingzhuozhen tried with only the above event so far but don't see why it would work for others. Could try a few options to validate/ narrow down the issue if that helps.

@justin-fiedler DictionarySearchProperties has 3 properties, an optional string prop, a mandatory field accepting an enum with 3 possible string values, and another mandatory field that accepts any string.

[justin-fiedler]

Hi @AndreiIl, sorry for the delay. I think we finally found the root cause of the issue - minification.

Another customer was using webpack and babel to compile and minify their code. Their .babel.config.js file included
['@babel/preset-env', { useBuiltIns: 'entry', corejs: 3, modules: false }] which compiles classes down to functions and strips the event_properties. Once they removed this plugin the issue went away.

https://babeljs.io/docs/en/babel-plugin-transform-classes

I opened a ticket to also fix the issue on our end (based on your suggestion) but hopefully this can unblock you for now.

I'll update you once the fix is released. Thanks!

[justin-fiedler]

This also seems to be a known issue in babel that has since been fixed.
babel/babel#8669