Unencoded characters in url in Next app causes usermaven to crash

[RamlahAziz]

When I send a query with the '%' sign in the URL, the app crashes and the error originates from Usermaven.track function

• The crash still happens when I wrap the query I am sending in encodeURIComponent()

• When I comment out the tracking function, the crash does not happen. I have wrapped it in a trycatch block for now

• Next handles encoding and decoding characters in the url through its router by default. So I have not added that anywhere in my application.

• My tracking code is as follows with a try catch block added

  useEffect(() => {
  const usermaven: UsermavenClient = usermavenClient({
    key: process.env.USERMAVEN_KEY || "",
    tracking_host: process.env.USERMAVEN_TRACKING_HOST || "",
    autocapture: true,
    randomize_url: true,
    privacy_policy: "strict",
  });
  try {
    console.log(
      "query sent to usermaven",
      encodeURIComponent((queryParams?.q && queryParams.q.toString()) || "")
    );
    usermaven.track("query", {
      query: encodeURIComponent(
        (queryParams?.q && queryParams.q.toString()) || ""
      ),
    });
  } catch (error) {
    console.log(
      "Unhandled error while tracking query: ",
      query,
      "Error; ",
      error
    );
  }
  }, [queryParams]);

The website url where you can replicate this behaviour is stage.contentideas.io. type in "90% headshot count" in the search bar in https://stage.contentideas.io/ and it will give the error

[seeratawan01]

this error is probably from your nextjs implementation, I tried locally with the same payload and It seems like working fine.

usermaven.track("query", {
  query: encodeURIComponent('90% headshot count'),
});

@RamlahAziz can look into Jitsu Next App Example. They implemented the provider pattern to initialize the pixel, we can try this.