Examples and local implementation crash on ios browser

[erodriguezvesti]

that's all, simply open examples on ios mobile browser and page crashes. i try with locally implementation and got the same issue

[ValentinH]

I finally managed to get access to an iOS device. I tested the website (https://valentinh.github.io/react-easy-crop/) and it works fine. What examples are you referring to?

[erodriguezvesti]

https://github.com/ValentinH/react-easy-crop/assets/118006154/4d8ab581-6321-4e89-824e-2769a6e348fb

Hi! This happens with iOS. In my implementation in my project, the same thing happens. In my project, it doesn't crash automatically, but when cropping, it collapses and throws the same error

Video if from this url -> https://codesandbox.io/s/v69ly910ql

[ValentinH]

Are you able to share the exact error from the console please?

Le ven. 21 juin 2024, 08:00, erodriguezvesti @.***> a écrit :

https://github.com/ValentinH/react-easy-crop/assets/118006154/4d8ab581-6321-4e89-824e-2769a6e348fb

Hi! This happens with iOS. In my implementation in my project, the same thing happens. In my project, it doesn't crash automatically, but when cropping, it collapses and throws the same error

— Reply to this email directly, view it on GitHub https://github.com/ValentinH/react-easy-crop/issues/541#issuecomment-2182059027, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUN6UTVNNCPHOKFTCG6EWTZIO6PNAVCNFSM6AAAAABIOCMJAOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBSGA2TSMBSG4 . You are receiving this because you commented.Message ID: @.***>

[erodriguezvesti]

That's the problem. I tried to fix it or figure out the issue, but the console doesn't show any errors or logs. The browser just says "an error occurred" many times and crashes the page.

[ValentinH]

What about the crash on your app, not on codesandbox?

[erodriguezvesti]

Here is real time console when web site crashes

https://github.com/ValentinH/react-easy-crop/assets/118006154/d27fd3b8-5e16-41be-a217-d51a2e5aa6e5

You cannot see error messages about react easy crop

[erodriguezvesti]

https://codesandbox.io/p/sandbox/react-easy-crop-v69ly910ql fails on startup , i don't know why https://codesandbox.io/s/v69ly910ql not crashes

[ValentinH]

It seems that the app crashes when the crop button is clicked. It means that the issue isn't happening in the lib code but in the cropping function.

[erodriguezvesti]

In my implementation? No only drag crop and crash, in code sanbox crop is loaded and crash

[erodriguezvesti]

can you test https://codesandbox.io/p/sandbox/react-easy-crop-v69ly910ql on ios device?

[erodriguezvesti]

update: Testing previous versions, version 5.0.2 works well and the browser does not crash

[ValentinH]

Thanks for catching that. Then it means that 5.0.4 brought the issue. Are you using the objectFit property?

[erodriguezvesti]

since 5.0.3 crash on ios device.

No, i'm not using objectFit, my code is really simple

import { useModal } from "@/context/modal/modal.provider";
import { Button } from "@nextui-org/react";
import { useCallback, useRef, useState } from "react";
import Cropper from "react-easy-crop";
import getCroppedImg from "./get-cropped-img";

interface ICropImageProps {
  b64: string;
  onConfirm: (b64: string) => void;
  onClose?: () => void;
  cropRatio?: number;
}

const CropImage = ({
  b64,
  onConfirm,
  onClose = () => {},
  cropRatio = 1 / 1,
}: ICropImageProps) => {
  const { closeModal } = useModal();
  const [crop, setCrop] = useState({ x: 0, y: 0 });
  const croppedAreaPixelsRef = useRef<any>(null);

  const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
    croppedAreaPixelsRef.current = croppedAreaPixels;
  }, []);

  const showCroppedImage = useCallback(async () => {
    try {
      const croppedImage = await getCroppedImg(
        b64,
        croppedAreaPixelsRef.current,
        0
      );
      onConfirm(croppedImage as string);
      closeModal();
    } catch (e) {
      console.error(e);
    }
  }, [b64, onConfirm, closeModal]);

  const onCloseCrop = useCallback(() => {
    closeModal();
    onClose();
  }, [closeModal, onClose]);

  return (
    <div className="p-6">
      <div style={{ minHeight: 350, height: 350 }} className="relative">
        <Cropper
          image={b64}
          crop={crop}
          aspect={cropRatio}
          onCropChange={setCrop}
          onCropComplete={onCropComplete}
        />
      </div>

      <div className="flex justify-between mt-6">
        <Button onClick={onCloseCrop} color="danger" variant="bordered">
          Cancelar
        </Button>
        <Button onClick={showCroppedImage} color="success">
          Confirmar
        </Button>
      </div>
    </div>
  );
};

export default CropImage;

[ValentinH]

So it doesn't crash on 5.0.2? What I don't get is that 5.0.3 only added changes to the README 🤔

[ValentinH]

I confirm that, at the first look, nothing looks suspicious in your code. I'll try to reproduce when I'm back on my computer.

[erodriguezvesti]

Sorry, I've been testing different versions for a while and the same thing happens with all of them. Sometimes it occurs less frequently, but you can still experience the same problem. The console doesn't show any error; everything just restarts. 😔😔😔

What seems most strange to me and could provide a clue is that in this URL https://codesandbox.io/p/sandbox/react-easy-crop-v69ly910ql the problem occurs, but in this one https://codesandbox.io/s/v69ly910ql it does not.

[ValentinH]

What version of iOS are you testing on? I'm testing on iOS 17.5 and didn't managed to reproduce with the sandbox you shared 🤔

Do you manage to reproduce on the preview url: https://v69ly910ql.csb.app?

[ValentinH]

What seems most strange to me and could provide a clue is that in this URL codesandbox.io/p/sandbox/react-easy-crop-v69ly910ql the problem occurs, but in this one codesandbox.io/s/v69ly910ql it does not.

These are 2 different versions of the codesandbox editor. Therefore, I would say that the issue is more on the codesandbox side than on the lib itself.

Are you able to create a small repository of your example that still reproduces the error and share it here please? The goal is to remove codesandbox from the equation.

[erodriguezvesti]

After a thousand tests, the error occurs when having a tracking provider like Clarity or Hotjar; when initializing the crop or moving the image, the site crashes. I imagine it must be issues with these services. For now, I solved it by disabling Clarity on my website. Many thanks for your help and follow-up.

[erodriguezvesti]

What version of iOS are you testing on? I'm testing on iOS 17.5 and didn't managed to reproduce with the sandbox you shared 🤔

Do you manage to reproduce on the preview url: https://v69ly910ql.csb.app?

That's a point, the error only occurs on real devices. I couldn't reproduce it on the emulator either, but I did on four real devices.

[ValentinH]

After a thousand tests, the error occurs when having a tracking provider like Clarity or Hotjar; when initializing the crop or moving the image, the site crashes. I imagine it must be issues with these services. For now, I solved it by disabling Clarity on my website. Many thanks for your help and follow-up.

That's very interesting! I've never heard about such issues, it would be great to see at what line it throws so that we can fight a solution.