Crash reports from production

[mattwoberts]

First of all, thanks for making and supporting this library :)

We're using it in our app (V 3.2.1), and we're seeing quite a lot of errors from production (from the Google play console). Here's a typical stack trace:

com.facebook.react.common.JavascriptException: TypeError: undefined is not a function
This error is located at:
in ToastContainer
in _default
in _default
in Root
in RootSiblingParent
in Root
in UserProvider
in ThemeProvider
in _default
in RCTView
in Unknown
in ChildrenWrapper
in _default
in Root
in RCTView
in Unknown
in AppContainer, js engine: hermes, stack:
anonymous@1:644553
commitUnmount@1:93662
unmountHostComponents@1:95576
commitMutationEffects@1:96794
commitRootImpl@1:103897
commitRoot@1:103518
performSyncWorkOnRoot@1:100589
flushSyncCallbacks@1:68909
scheduleUpdateOnFiber@1:98451
updateContainer@1:108227
unmountComponentAtNode@1:108455
anonymous@1:117847
unmountApplicationComponentAtRootTag@1:439181
__callFunction@1:128697
anonymous@1:127320
__guard@1:128264
callFunctionReturnFlushedQueue@1:127278
at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java
  at java.lang.reflect.Method.invoke (Native Method)
  at com.facebook.react.bridge.JavaMethodWrapper.invoke (JavaMethodWrapper.java:372)
  at com.facebook.react.bridge.JavaModuleWrapper.invoke (JavaModuleWrapper.java:188)
  at com.facebook.react.bridge.queue.NativeRunnable.run (Native Method)
  at android.os.Handler.handleCallback (Handler.java:938)
  at android.os.Handler.dispatchMessage (Handler.java:99)
  at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage (MessageQueueThreadHandler.java:27)
  at android.os.Looper.loop (Looper.java:246)
  at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run (MessageQueueThreadImpl.java:226)
  at java.lang.Thread.run (Thread.java:923)

We're totally unable to recreate this internally. I think it's happening from our app when we have code that responds to a notification being received in the foreground - in that case it uses this lib to show a message to the user. The toast is wrapped in this helper:

const ToastInfo = (message, options) => {
  try {
    Toast.show(message, {
      ...baseOptions,
      position: Platform.OS === 'android' ? 70 : 80,
      backgroundColor: AppColors.blue80,
      ...options,
    });
  } catch {
    // Something went wrong with Toast..
    // Logging code here.
  }
};

So the addition of the try/catch doesn't catch anything, I'm a bit stumped about where to look next...

Any ideas?

[snashug]

I have the error too

com.facebook.react.common.JavascriptException: TypeError: undefined is not a function
This error is located at:
in ToastContainer
in _default
in _default
in Root
in RootSiblingParent
in App
in RCTView
in Unknown
in ChildrenWrapper
in _default
in Root
in RCTView
in Unknown
in AppContainer, js engine: hermes, stack:
anonymous@1:702238
commitUnmount@1:104651
unmountHostComponents@1:106661
commitMutationEffects@1:107973
commitRootImpl@1:115621
commitRoot@1:115206
performSyncWorkOnRoot@1:112167
flushSyncCallbacks@1:79676
scheduleUpdateOnFiber@1:109696
updateContainer@1:120009
unmountComponentAtNode@1:120232
anonymous@1:129857
unmountApplicationComponentAtRootTag@1:446505
__callFunction@1:56173
anonymous@1:54662
__guard@1:55619
callFunctionReturnFlushedQueue@1:54620
at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java
  at java.lang.reflect.Method.invoke (Native Method)
  at com.facebook.react.bridge.JavaMethodWrapper.invoke (JavaMethodWrapper.java:372)
  at com.facebook.react.bridge.JavaModuleWrapper.invoke (JavaModuleWrapper.java:188)
  at com.facebook.react.bridge.queue.NativeRunnable.run (Native Method)
  at android.os.Handler.handleCallback (Handler.java:938)
  at android.os.Handler.dispatchMessage (Handler.java:99)
  at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage (MessageQueueThreadHandler.java:27)
  at android.os.Looper.loop (Looper.java:246)
  at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run (MessageQueueThreadImpl.java:226)
  at java.lang.Thread.run (Thread.java:923)

[mattwoberts]

The stack trace seems to suggest that the issue is coming from when react is unmounting some components - makes me think if it's related to showing a toast and then immediately going to another screen and thus unmounting the screen responsible for showing the toast?

[sunnylqm]

Is it the same as https://github.com/magicismight/react-native-root-toast/issues/146 ?

Can you guys try install the master version which includes a fix to the problem above

npm install https://github.com/magicismight/react-native-root-toast

[mattwoberts]

I don't think it's the same issue, since we're not getting keyboard related exceptions. Since I can't repro locally, the only way for me to test it out with the master version is to release to production - is master stable for me to do that?

Cheers

[snashug]

Is it the same as #146 ?

Can you guys try install the master version which includes a fix to the problem above

npm install https://github.com/magicismight/react-native-root-toast

At #146 I did not include RootSiblingParent, so I closed the issue.

[mattwoberts]

We released an update that cuts back on where we use the toast messages - now they're only used in certain places, e.g. when you're interacting with the app. But we're still seeing the same volume of crash reports on this (about 20 per day). The only thing that I can think could be related is that in some places we show a toast, and then navigate immediately somewhere else, I wonder if that could be causing some issues...

[sunnylqm]

Are you using the master version?

[mattwoberts]

Are you using the master version?

I'm still on the latest version from npm

[Alaa-Ben]

I'm having this issue. And to reproduce, it's pretty simple actually: Pressing the android back button to "leave" the app does it for me. (So you press the back button when you're at the top level of your navigation stack if you have one)

[sunnylqm]

@Alaa-Ben So it sounds very likely related to https://github.com/magicismight/react-native-root-toast/issues/146 which happens in unmount lifecycle. Can you try the master version to see whether it's fixed?

npm install https://github.com/magicismight/react-native-root-toast

[Alaa-Ben]

Sure. Just tried, still happening unfortunately.

[sunnylqm]

I can not reproduce. Can anyone provide a minimal reproducible demo? (use npx gitzip to make a minimal zip without node_modules and drop it in the comment)

[wmonecke]

Same here! This is my unobfuscated log and it's happening only in production and it started happening after upgrading react-native:

**TypeError** 
    undefined is not a function      
    node_modules/react-native-root-toast/lib/ToastContainer.js:140:8 - anonymous

This line does reference the keyboard:

ToastContainer.js:140:8
    this.keyboardListener?.remove();

@mattwoberts I think your issue is related to the keyboard even though you are not picking up any keyboard related exceptions.

@sunnylqm this is fixed in v3.3.0?

[mattwoberts]

Sorry for the late response @wmonecke . I'm not sure if it's related to the keyboard or not.

We've just moved to app center for our app, which collects crash data. On the iOS, there's hardly anything relating to ToastContainer, but on the android side, it's happening all the time:

[Akifcan]

We have similar issue, in analytics I can see we have around 200 active users in a day. but 2-3 users get crash. only android

[sunnylqm]

how about change https://github.com/magicismight/react-native-root-toast/blob/master/lib/ToastContainer.js#L152 to

this.keyboardListener?.remove?.();