[CAL-4027] Booking confirmation Unexpected token '<, *<!DOCTYPE "… is not valid JSON

[TahaDDC]

Issue Summary

It all started today maybe yesterday after the push of the new redirection to success booking page. when I try to book a schedule it takes a while then says : Unexpected token '<, *<!DOCTYPE "… is not valid JSON . in the upcoming booking page I can see that it happenned, but it doesn't show the success booking page for the one booking and it also doesn't trigger automations because of it.

Steps to Reproduce

1. on the Browser application
2. try to book on any event type

_CAL-4027

[dosubot[bot]]

Hello, @TahaDDC! I'm here to help you with any bugs or questions you have. I can also assist you in becoming a contributor.

To resolve the "Unexpected token '<, *<!DOCTYPE "… is not valid JSON" error that occurs after attempting to book a schedule, you need to ensure that the redirection URL is correctly set and that the response from the server is in the expected format.

It seems that the redirection URL might be returning an HTML page instead of a JSON response, which is causing the JSON parsing error. You should check the redirect_url_description and ensure it is correctly configured to return the expected JSON response.

Here is the relevant part of the configuration:

"redirect_success_booking": "Redirect on booking",
"you_are_being_redirected": "You are being redirected to {{ url }} in $t(second, {\"count\": {{seconds}} }).",
"external_redirect_url": "https://example.com/redirect-to-my-success-page",
"redirect_url_description": "Redirect to a custom URL after a successful booking",

Make sure that the external_redirect_url is set to a URL that returns a valid JSON response. If the URL returns an HTML page, you will need to update it to return JSON or handle the redirection differently to avoid the JSON parsing error.

Additionally, you can use the useBookingSuccessRedirect hook from the @calcom/lib/bookingSuccessRedirect library to handle the redirection properly. This hook ensures that the redirection is managed correctly and can help avoid issues with unexpected response formats. Here is an example of how it is used:

import { useBookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect";
import { useEffect } from "react";
import { trpc } from "@calcom/trpc";
import { showToast } from "@calcom/ui";

function PaymentChecker(props) {
  const bookingSuccessRedirect = useBookingSuccessRedirect();
  const utils = trpc.useUtils();

  useEffect(() => {
    const interval = setInterval(async () => {
      if (props.booking.status === "ACCEPTED") {
        return;
      }
      const { booking: bookingResult } = await utils.viewer.bookings.find.fetch({
        bookingUid: props.booking.uid,
      });

      if (bookingResult?.paid) {
        showToast("Payment successful", "success");
        bookingSuccessRedirect({
          successRedirectUrl: props.eventType.successRedirectUrl,
          query: { uid: props.booking.uid, email: props.email, location: "web_conferencing_details_to_follow" },
          booking: props.booking,
          forwardParamsSuccessRedirect: props.eventType.forwardParamsSuccessRedirect,
        });
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [bookingSuccessRedirect, props.booking, props.eventType, utils.viewer.bookings]);

  return null;
}

This approach ensures that the redirection is handled correctly and avoids the JSON parsing error.

Additionally, you can refer to the useBookings hook from the @calcom/features/bookings/Booker/components/hooks/useBookings.ts file for more context on how bookings and redirections are managed ^[1][2][3].

To continue talking to Dosu, mention @dosu.

[yalla-habibi]

Guys any updates on these? This bug has stopped our sale process for more than one day already, this is very disappointing

[prynsh]

@dosu can you please help me reproduce the error? I have tried producing it after setting it up locally but i can't seem to wrap my head around it. Thank you.

[yalla-habibi]

@prynsh description in issue https://github.com/calcom/cal.com/issues/15655