Fixing error only in production

[hanhanxue]

I've been trying to fix an issue that only appears in production. Currently found here

Not always, but often the element with id can't be found, browser error Application error: a client-side exception has occurred (see the browser console for more information).:

const getElementByIdWithDimensions = (id: string) => {
  const element = document.getElementById(id)
  if (element === null) {
    throw new Error(`Element with id '#${id}' doesn't exist.`)
  }

  const dimensions = element?.getBoundingClientRect();

  return {
    element,
    dimensions,
  }
}

I tried a few things, including using a setTimeout() to retry getElementById() and using async await for windowResized() and setup(). Interestingly enough the async await code works in production (doesn't fix the bug) but breaks in local

Async await version:

const getElementByIdWithDimensions = (id: string, retries = 5, delay = 200) => {
  return new Promise<{ element: HTMLElement, dimensions: DOMRect }>((resolve, reject) => {
    const attempt = () => {
      const element = document.getElementById(id);
      if (element) {
        const dimensions = element.getBoundingClientRect();
        resolve({ element, dimensions });
      } else if (retries > 0) {
        setTimeout(() => {
          retries--;
          attempt();
        }, delay);
      } else {
        reject(new Error(`The element with id '#${id}' does not exist.`));
      }
    };
    attempt();
  });
};

  p5.setup = async () => {
    try {
      const container = await getElementByIdWithDimensions("heroContainer");
      const WIDTH = container.dimensions.width;
      const HEIGHT = container.dimensions.height;

      p5.createCanvas(WIDTH, HEIGHT);
      p5.background(BG);
    } catch (error) {
      if (error instanceof Error) {
        console.error(error.message);
      } else {
        console.error("An unexpected error occurred", error);
      }
    }
  };

p5.windowResized = async () => {
    try {
      const container = await getElementByIdWithDimensions("heroContainer");
      const WIDTH = container.dimensions.width;
      const HEIGHT = container.dimensions.height;

      p5.resizeCanvas(WIDTH, HEIGHT);
      p5.background(BG);
      renderTonalPalette({ p5, tone, hue, chroma, swatchDimensions });
    } catch (error) {
      if (error instanceof Error) {
        console.error(error.message);
      } else {
        console.error("An unexpected error occurred", error);
      }
    }
  };

Again the error only happens in production, and I'm wondering how to approach it so that instead of throwing an error it reattempts after a set delay instead

Sorry for all the questions, hopefully this is the last one for a little while.

[jamesrweb]

The original version should be fine, assuming hero container is always rendered and never unmounted. Did you check the server rendered DOM, the DOM changes via updates to state / props that happen and also that the id is truly always set because the sketch only runs on the client and so if the id is there, it would be found consistently.

[jamesrweb]

The other option you have is to avoid using get element by id and instead pass a ref as a prop which is a ref to the container so you always have a direct reference to the hero container if you're really sure it's always there and apply the same logic to the ref.current which would be the element itself. It depends how well you've formed your DOM as to how easy that would be though and honestly this way should work already.

[hanhanxue]

Okay it's good to know that the code is supposed to work! I just added an Error Boundary to the container with id, and it is definitely always rendered. However the sketch fails 1 time out of 2 in production

Also now the error says TypeError: Cannot read properties of undefined (reading 'background')

Just saw something maybe similar?: processing/p5.js-web-editor#2145
I'll investigate a bit more :)

[hanhanxue]

@jamesrweb Alright this is actually very interesting. I've isolated the issue to the p5.updateWithProps function. If I call other functions within it, then in production it break sometimes:

  p5.updateWithProps = (props: IProps) => {
    hue = props.hue
    tone = props.tone
    chroma = props.chroma
    swatchDimensions = props.swatchDimensions

    p5.background(BGCOLOR)
    renderTonalPalette({ p5, tone, hue, chroma, swatchDimensions })
  }

if I only use it to update the variables then it's fine

  p5.updateWithProps = (props: IProps) => {
    hue = props.hue
    tone = props.tone
    chroma = props.chroma
    swatchDimensions = props.swatchDimensions
  }

But obviously I also want to update the sketch as well when props change. Any idea what might be the issue?

Again this ONLY happens in production. Works fine every time locally.

[jamesrweb]

Something is up with your production environment or bundling process is all I can think of. You might also consider checking that react strict mode is turned off to avoid the double render it includes. If it only happens in one environment, something is wrong with that environment.