🐛 Error handling doesn't work and crashes the app

[guval-gh]

Description

Hi 👋

<Rive> component allows us (normally) to handle some errors (RNRiveErrorType):

• IncorrectRiveFileUrl
• MalformedFile
• FileNotFound
• IncorrectArtboardName
• UnsupportedRuntimeVersion
• IncorrectStateMachineName
• IncorrectStateMachineInput

But instead of displaying a warning and/or handling error with onError, the app crashes instantly with any of the errors listed above 😕

Example

The app crash instantly with something like that:

const malformedFileUrl =
  "https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg";

const correctFileUrl =
  "https://public.rive.app/community/runtime-files/2195-4346-avatar-pack-use-case.riv";

export default function Example7() {
  const riveRef = useRef<RiveRef>(null);

  return (
      <Rive
        url={malformedFileUrl}
        // url={correctFileUrl}
        onError={(riveError: RNRiveError) => {
          switch (riveError.type) {
            case RNRiveErrorType.IncorrectRiveFileUrl: {
              console.log(`${riveError.message}`);
              return;
            }
            case RNRiveErrorType.MalformedFile: {
              console.log("Malformed File");
              return;
            }
            case RNRiveErrorType.FileNotFound: {
              console.log("File not found");
              return;
            }
            case RNRiveErrorType.IncorrectArtboardName: {
              console.log("IncorrectAnimationName");
              return;
            }
            case RNRiveErrorType.UnsupportedRuntimeVersion: {
              console.log("Runtime version unsupported");
              return;
            }
            case RNRiveErrorType.IncorrectStateMachineName: {
              console.log(`${riveError.message}`);
              return;
            }
            case RNRiveErrorType.IncorrectStateMachineInput: {
              console.log(`${riveError.message}`);
              return;
            }
            default:
              return;
          }
        }}
      />
  );
}

Repository

To reproduce, I created a rive playground: https://github.com/guval-gh/rive-playground
And the last example (Example 7) crash: https://github.com/guval-gh/rive-playground/blob/main/app/example7.tsx

Expected behavior

I expect my log to be displayed in the case of onError:

case RNRiveErrorType.MalformedFile: {
    console.log(“Malformed File”);
    return;
}

I expect that all the error cases that can be handled via onError won't cause the app to crash.

Screenshots

As soon as I try to go to the screen of the previous example, the app crashes:

Crash_on_error.mp4

Device

• (Screenrecord): iOS Simulator - iOS 18.1
• Crash on iOS Simulator and Android Emulator

Additional context

Crash appear on:

"expo": "^52.0.11",
"react-native": "0.76.3",
"rive-react-native": "^8.2.0",

Also tested on rive-react-native versions: 8.0.0 and 8.1.0

[markcruz389]

Any update on this? Experiencing the same issue.

[guval-gh]

@markcruz389 Nothing new on my side and I'm still trying to find a solution.

[weizhe412]

I think it's because the current version of rive-react-native does not support the new architecture in Expo 52.
If you're still using Expo, please go to app.json and set newArchEnabled to false.
It worked for me

[guval-gh]

Thanks for your answer @weizhe412 👍

The problem is SDK 52 change so much things (in the right way) that I can't reject it and set newArchEnabled to false.

So we need to wait for new architecture support to use rive-react-native in updated project 😞

[AdamTyler]

I'm on expo SDK 51 and I also see this crash if I put in an invalid url