rive-app / rive-wasm

Wasm/JS runtime for Rive
MIT License
733 stars 52 forks source link

`Cannot read properties of undefined (reading 'element')` during cleanup #375

Open kirbysayshi opened 2 weeks ago

kirbysayshi commented 2 weeks ago

Description

Occasionally, when tearing down via rive-react's useRive hook, we're seeing an error in rive-wasm / canvas:

Cannot read properties of undefined (reading 'element') (see screenshot of stack track below)

Provide a Repro

I don't have a repro, but I do have a stacktrace from our Sentry instance:

image

This clearly shows that observed is undefined.

Our usage is extremely simple:

function CorrectAnimation() {
  const { RiveComponent, rive } = useRive({
    src: getStaticAssetPath('anims/correct-animation.riv'),
    autoplay: true,
    layout: new Layout({ fit: Fit.Cover, alignment: Alignment.TopCenter }),
  });

  return <RiveComponent />;
}

Browser & Versions

Additional context

What I believe is happening:

There is a null check here: https://github.com/rive-app/rive-wasm/blob/9138225b8667d11fd492ff59039074b77f0c21f7/js/src/rive.ts#L2104-L2106

But not an undefined check, resulting in observed being undefined and then erroring out when observed.element is attempted to be resolved.

As to why observed is undefined, I am not sure. I see that it's conditionally initialized in the constructor... although I don't quite understand how that condition could be false.

https://github.com/rive-app/rive-wasm/blob/9138225b8667d11fd492ff59039074b77f0c21f7/js/src/rive.ts#L1564-L1569

One straightforward fix might simply be initializing it to null here (but this does not answer why):

https://github.com/rive-app/rive-wasm/blob/9138225b8667d11fd492ff59039074b77f0c21f7/js/src/rive.ts#L1491-L1492

kirbysayshi commented 2 weeks ago

I'd also like to report that applying the fix from https://github.com/rive-app/rive-wasm/pull/376 via a local pnpm patch fixed the errors! So it would be great to get that merged.