Console error when using Amplitude

I’ve been running into this error that causes the feathery form not to load after naving past the start of the survey (when using the javascript SDK).

The error I’m seeing is: TypeError: undefined is not an object (evaluating 'i[null!=o?o:0]') and after inspecting the feathery javascript script, i see the null!=o?o:0 is in there.

I’m not certain this error is caused because of the amplitude integration, but I’m seeing other console errors like
Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'e._q.push')
and
Cannot load script https://cdn.amplitude.com/libs/analytics-browser-2.2.3-min.js.gz. Failed integrity metadata check. Content length: 64254, Expected content length: -1, Expected metadata ...
So my hunch is it is because of Amplitude

Hey Rachael, can you try our latest library version? 2.0.126 – it may be fixed there! cc: @eric

@peter I’m using the javascript injection script- https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js which pulls the latest version, right?

That’s correct. It will be a few hours delayed though from when new versions are published, and may require you to rebuild/redeploy the app/website where the library is embedded first.

1 Like

@peter alright it looks like the form is now loading correctly, but i’m still seeing a few console errors (that i think are related to amplitude still):
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push') at index.js:2:1186066

I see that error every time I click next or back through the form. I’m assuming this is from the form trying to push an amplitude event but for some reason isnt able to

Do you think it’s from Amplitude because you still see the Amplitude script install error?

yes that, and i’m also not seeing the events go through in my amplitude live view

Got it, I think you’re right. Are you seeing this error on webview or webkit? Or is this on your browser? It’d be great if you could share over a URL if so.

here’s a vid of the errors I’m seeing:

what I’m doing on my end for this:

  1. calling the create/fetch user from the Feathery API to get back a user’s SDK key
  2. loading in the JS script into my web component
  3. then calling Feathery.init and Feathery.renderAt

you can see the ‘view survey’ amplitude event go through (which is done internally on our end) but no events after that

here’s a link to our test form Feathery Forms

Thanks for flagging! The amplitude installation issue should be fixed now on the latest library version (2.0.129)

is there any easy way to see what script version is being pulled in as i render it??

Hmm the easiest way may be to fix the version, test out the form and see the behavior you’re getting, and then wait until @latest gives you the same behavior (at most a few hours afterwards)

1 Like

hmm, okay so fixing the version to https://cdn.jsdelivr.net/npm/@feathery/react@2.0.129/umd/index.js (and re-building my local and whatnot), I no longer see the Amplitude script install error, but I still see these errors, as well as it’s not rending the form at all now

I embedded your form via the JS SDK on that version into an empty html document and tested it out, everything seemed to work fine. I wonder if you have an existing amplitude installation that might somehow be colliding with our installation?

It’s difficult for us to reproduce the error on our side and right now it seems the issue is something elsewhere in your site may be confounding the feathery installation.

Given it works well in an empty HTML document, it’d be helpful to first figure out what in your environment is causing the form to error like that.

Peter we definitely will have an existing implementation of amplitude. However, I had thought Feathery would not try to instantiate amplitude if one was detected?

How are you detecting whether amplitude already has been initialized? What version of Amplitude are you using? We are on 2.3.2 of their analytics-browser and using npm/yarn to install it. No other integrations have had issues.

also, i noticed that in our local testing, there is an amplitude error thrown by your amplitude instance. Reason is that you need to set min_id_length: 1 to allow for max flexibility for integrations. by default they enforce min length of 5.

HTTP V2 API - Amplitude Developer Center.

in particular for local dev instances, the user IDs can’t always be 5 characters long. Setting to “1” shouldn’t be risky for feathery.

But note, that in practice this shouldn’t matter for the embedded flow since your amplitude instance shouldn’t be initialized anyways. So this only matters for other scenarios (and still worth doing)

Hey Trevin, we just updated the min id length on our side to 1 in the latest version. We are using 2.3.2, but looking at the default amplitude installation code, it looks like it will only try to ignore instantiation if there already exists an amplitude object on window. This is created during the web installation but perhaps not during the npm install. we also use the window.amplitude API to track events on our side.

Ok good news on the min id length.

I’ve verified that in our web app, window.amplitude returns an object, so it is defined. I’m so confused why we are getting errors.

I’m looking at the repo and see this line:

where is the logic to detect if amplitude is already installed to skip this?

One thought: on a given form, in amplitude integration settings, should you just add in an option on whether you should initialize or not? I mean most products that use amplitude that embed a feathery form will always have initialized it.

We are still seeing the errors that @rachaelsweetman reported earlier.
I recorded this in jam.dev so you can see the console errors. It shows the fact that our instance of amplitude SDK is instantiated correctly, and we fired an event when our page loads, but the events originating from Feathery are not fired (hence the console errors). It really does seems like something is wrong within the feathery code on this one.

This shows a blank screen but look at the console in it which is the key part:
https://jam.dev/c/36a68842-7158-44a1-8fc2-0be9e3edb342

in the amplitude installation code, you’ll see the line to check if (r.invoked). If the amplitude library is already installed, it won’t progress beyond that line. However, I did notice that the amplitude.init call will still be invoked in that case, so I made a change in the latest version (2.0.132) so that it is no longer invoked – try that out? Other than that, you can see the function calls we make to amplitude within the library – feel free to let us know if you see any issues there.

It’s hard for us to debug fully because we aren’t able to reproduce the issue on our side since your hosted form appears to be working well

Ok will try this and let you know.

If it still doesn’t resolve the issue, would it be helpful for you to get access to our test staging env? We can add you to get through our proxy/firewall.