Amplitude Logger [Error]: Failed to fetch

[Decolo]

Expected Behavior

expect that no response error when sending event to amplitude

Current Behavior

I found some issue on sentry. This kind of issue happened accidentally.

All of this new user's events can't be found on the amplitude platform. So I use sentry to sending event simultaneously, this user can be found on sentry..

Possible Solution

I guess our amplitude setting up is not the best practise, especially the userId setup.
I have posted a topic before https://community.amplitude.com/data-instrumentation-57/amplitude-logger-error-load-failed-2765. And then I follow the example of nextjs to adjust:

// before
amplitude.setUserId(data?.data?.result?.userId);

// now 
amplitude.identify(new amplitude.Identify().set("JR_userId", data?.data?.result?.userId));

The previous error is: Amplitude Logger [Error]: Load failed
The current error is: Amplitude Logger [Error]: Failed to fetch

Steps to Reproduce

1. init amplitude in _app.page.tsx

if (typeof window !== "undefined") {
  amplitude.init(AMPLITUDE_API_KEY);
}

2. set userId in user.properties by amplitude.identify(new amplitude.Identify().set();

// our backend will generate a userId.
// after get userId in client, I will set it by Identify

if (data?.data?.result?.userId) {
        // https://github.com/amplitude/Amplitude-TypeScript/blob/main/examples/browser/next-app/pages/index.tsx
        amplitude.identify(new amplitude.Identify().set("JR_userId", data?.data?.result?.userId));
      }

3. send event by amplitude.track

amplitude.track(eventInput, {
    ...eventProperties,
  });

Environment

• JS SDK Version: 2.2.3
• Installation Method: pnpm
• Browser and Version: [Chrome 116.0.0]

[yuhao900914]

Hi @Decolo , thanks for using Amplitude.
amplitude browser only supports the client side. Using amplitude browser SDK on server-side might cause an issue. can you make sure if that's the case?

[Decolo]

Hi, @yuhao900914, thx for replying.

This is the codes in our nextjs project, I checked the existence of window object firstly (server-side no window object) to ensure amplitude.init() in client-side.

// _app.page.tsx

if (window) {
  amplitude.init(AMPLITUDE_API_KEY);
}

Now I change some options when amplitude.init(), seems no more Amplitude Logger [Error]: Failed to fetch error yesterday, but still need more time to verify.

if (typeof window !== "undefined") {
  amplitude.init(AMPLITUDE_API_KEY, {
    defaultTracking: true,
    transport: "xhr",
  });
}

And I want to find the root cause of this, maybe it's a response error? But the message of error is a little unclear.

[yuhao900914]

We have an example app in GitHub here. It's working fine.
In steps 2 and 3 did you check if there is an amplitude instance before calling the identify and track call?

Did you try to enable the debug mode and check if there is any valuable info there?

Do you have a website link/example app where we can test it out?

[Decolo]

@yuhao900914 thx, Alyssa.
What you mentioned:

1. How to check amplitude instance, like codes below?

if (amplitude) {
  amplitude.identify(new amplitude.Identify().set("userid", data?.data?.result?.userId));
}

2. I'll try the debug mode later
3. Today we met a new issue
   
   
   seems sdk get an exception response from server?

[yuhao900914]

@Decolo
Did some research on Failed to fetch error. Possibly it's the issue for the cross-domain. Is there any error message related to this? Can you check if that's related?

[Decolo]

@yuhao900914
Hi, Alyssa. Now the error Failed to fetch seems to disappear.
But recently, met a new issue Amplitude Logger [Error]: Unexpected end of JSON input

Can u help to figure it out pls? Thank u a lot~

Plus:
Our site url is https://jobright.ai/ .

[Decolo]

any update, pls @yuhao900914

[Decolo]

It seems like an issue happened in client side. Did the sdk support retrying when fail to send request /httpapi. Or I have to try catch the error and retry it manually?

[Junlin-Zhu]

Do we have any updates on this?

[Junlin-Zhu]

For the Unexpected end of JSON input issue, on my side, there is a clear reproduce step:

1. If I connect the vpn to US endpoint, the trace request went through successfully.
2. If I disconnect the vpn and my ip location is in China, the request failed with this output.

[kbsali]

same problem for me

[zhen1asemen1uk]

Hello everyone. I faced the same error and got what happened. My router(or in your case, it can be an ads blocker extension) blocks Amplitude to save my privacy.

If turn off all extensions and connect for example to a mobile wi-fi network everything works ⚙️