trying to deal with possible target errors

[RenanMev]

Hello everyone, my name is Renan, and I need someone's help. English is not my native language, so I’ll need to translate a few things. Here we go. Currently, I'm working on a full onboarding process where the data comes directly from the database, and I handle it on the frontend. However, it has some extra functionalities like clicking buttons and redirecting. All data is fetched directly from the database; I just handle it on the frontend.

Problem: I have the following issue: I need to handle some errors on the frontend and display them on the screen in some way. For the current error, I need to check if the target isn’t found, and if so, set the target to "body" and change the placement to "center." However, I’m struggling with this. Note that my code is legacy, so some things are hard to change.

Current Approach: I'm trying to handle it in the callback function by checking if the target is valid. If it is, it just proceeds. If not, it changes the target to "body." However, I believe that due to the library's lifecycle, I'm unable to change it correctly. It does change and displays on the screen, but it's broken – it lacks an overlay, and I can’t move to the next step, etc.

const onBoardingCallback = (data) => {
    const { action, step, lifecycle } = data;
    if (!step) return;
    let validTarget = document.querySelector(step.target);
    if (!validTarget) {
      const updatedStep = { ...step, target: "body", placement: "center" };

      setSteps((prevSteps) => {
        const newSteps = [...prevSteps];
        const stepIndex = newSteps.findIndex(
          (s) => s.step_id === updatedStep.step_id
        );
        if (stepIndex !== -1) {
          newSteps[stepIndex] = updatedStep;
        }
        return newSteps;
      });
    }
};

[gilbarbara]

Hey @RenanMev
With the uncontrolled flow, the callback usually receives updates after something has happened. In the case of a missing target, the internal index has already been increased.

For your case I'd suggest to use the run and stepIndex props to control the tour yourself.
In the step_after action, get the next step and check if it's mounted. If it is just increase the stepIndex and let it continue. Otherwise, make your changes before continuing.
Check the Controlled example code in the demo.