Null pointer on resize

[philipp-tailor]

We've been getting the following NPE since upgrading from 2.21.4 to 2.29.6. It's not happening every time that the viewport / the marker area is resized though. Haven't found any pattern.

Please let me know if there's any implementation details that would help to understand what triggers the exception.

[ailon]

Hi. Thank you for reporting this. How often does this happen? I've tried to resize the default demo back-and-forth for some minutes but didn't get the error. So, I guess I'd need some more details or preferably a simple repro where it happens with some reasonable frequency. Also, does it happen in any browser or just some specific one? Thanks!

[YLemelin09]

Hello, I a having a similar issue. I get the same error (but not all the time but often) when resizing (either manual windows resize, open browser inspector or drag my browser to a bigger display and maximize it).

markerjs2 v2.29.7 Here is my implementation (skipped the imports and styling to save on space):

const ImageEditModal = ({ handleClose, show }) => {
    const editImage = useRecoilValue(editImageState);
    const imageRef = useRef();
    const containerRef = useRef();

    useEffect(() => {
        if (show && imageRef.current && containerRef.current) {
            const markerArea = new markerjs2.MarkerArea(imageRef.current);
            markerArea.targetRoot = containerRef.current;
            markerArea.renderAtNaturalSize = true;
            markerArea.addEventListener('render', event => {
                imageRef.current.src = event.dataUrl;
            });
            markerArea.show();
        }
    }, [show, imageRef]);

    const closeModal = () => {
        handleClose();
    };

    return (
        <FullHeightModal show={show} onHide={handleClose} size="xl" scrollable centered backdrop="static">
            <Modal.Header>
                <Modal.Title>Edit your image</Modal.Title>
            </Modal.Header>
            <StyledBody>
                <Container ref={containerRef}>
                    <StyledImage id="myimg" src={editImage} alt="Your edit" ref={imageRef} />
                </Container>
            </StyledBody>
            <Modal.Footer>
                <ThemeButton label="Close" icon={FaTimes} size="lg" color="grey" onClick={closeModal} />
            </Modal.Footer>
        </FullHeightModal>
    );
};

export default ImageEditModal;

Chrome error:

Safari error:

[philipp-tailor]

Waited a week with replying to answer the question how often this happens, but it's quite rare in my codebase. While it'd be nice to know and solve the root-cause, as consumer of the library I'd prefer the library to not throw when avoidable. Wondering if the function that's throwing here could swallow the error without it being irresponsible due to undesirable effects of handling the case with optional chaining / early exit etc.

[ailon]

@philipp-tailor yes, that's what I'll end up doing if I can't find the root cause. Will try to do some more experimenting today and will address it either way.

[ailon]

After some additional experimenting I still couldn't reproduce this, so ended up just adding additional guards around that statement. Please let me know if v2.29.9 fixes it for you.

[YLemelin09]

@ailon Seems to have fixed my issue.