🐛 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

[vishant101]

Hi, I'm on expo SDK 52 without new architecture enabled and I experience this issue

[BakkerTom]

I’ve encountered the same issue. Some crashes, such as when passing a corrupt or non-existent source, originate from the upstream RiveRuntime package. However, other crashes—like when setting a text run value—appear to be caused by a bug in the mapToRNRiveError(riveError:) function, which leads to an app-wide crash.

Could someone look into these issues? Beyond the fact that the documented behavior isn’t functioning as expected, this also introduces a significant risk when using Rive animations from a CDN. If a resource returns a 404, our entire app crashes, which is a risk I’m hesitant to take.

[bassrock]

Encountered same issue as @BakkerTom as well, setting newArchEnabled to false solved it here.

[JerryBels]

@bassrock we can't really expect people to not enable the new arch. It brings so much, and... It's been cooking for YEARS and became the default only recently - the package should be updated by now, honestly.

[K123Ritesh]

Any other Solution @JerryBels @bassrock