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.