React-native-reanimated: Unexpected Console.log behavior, resulting in empty bug reports

[gilbertl]

Description

The app my team and I work on an app that uses Instabug to help users send bug reports to us. Instabug captures all console.log / error statements and compiles a bug report that help us debug problems.

https://github.com/Instabug/Instabug-React-Native

After installing react native reanimated, we noticed that all the Instabug reports are no longer capturing / sending console.log statements. We believe it has something to do with Reanimated V2 overriding global console, but we're not sure.

https://github.com/software-mansion/react-native-reanimated/blob/b80d480df20632d15b07cc46f858d40e5f8464eb/src/reanimated2/core.js#L246

We're looking for insights into how all these works underneath the hood and how we can best move forward with the 2 packages.

Steps To Reproduce

1. Setup Instabug React Native
2. Install react native reanimated
3. File a bug report using Instabug

Expected behavior

All console.log statements captured as part of Instabug report

Actual behavior

No console.log statements are captured.

Package versions

• React: 17.0.1
• React Native: 0.64.0-rc.0
• React Native Reanimated: software-mansion/react-native-reanimated#pull/1469/head
• NodeJS: 10

[github-actions[bot]]

Issue validator - update # 4

Hello!
Congratulations! Your issue passed the validator! Thank you!

[piaskowyk]

Hey @gilbertl
Reanimated uses two threads - native UI thread and JS thread. console object exists in JS scope, but we also want to use logging functions on native UI thread where they are not defined.
function _setGlobalConsole doesn’t override the console object but it creates a mock of the console object to use on UI thread. Look at the definition of UI console object

const capturableConsole = console;
runOnUI(() => {
 'worklet';
 const console = {
   log: runOnJS(capturableConsole.log),
   warn: runOnJS(capturableConsole.warn),
   error: runOnJS(capturableConsole.error),
   info: runOnJS(capturableConsole.info),
 };
 _setGlobalConsole(console);
})();

We create a handler to call logging functions from UI thread on JS thread - where is the original scope of console object.

You also can compare output of this functions:

console.log(console)
runOnUI(() => {'worklet'; console.log(console)})()

The output is different.

So that's why I’m not sure that is the problem with Reanimated. Have you any logs from Instabug about problems with Reanimated or something? It can be helpful.

[JB-CHAUVIN]

Hello,

I have an other problem with RC1 :

Error is : ReferenceError: Can't find variable: _setGlobalConsole

App is not starting at all..

Clash and bundler is cleaned...

[gilbertl]

Hey @gilbertl
Reanimated uses two threads - native UI thread and JS thread. console object exists in JS scope, but we also want to use logging functions on native UI thread where they are not defined.
function _setGlobalConsole doesn’t override the console object but it creates a mock of the console object to use on UI thread. Look at the definition of UI console object

const capturableConsole = console;
runOnUI(() => {
 'worklet';
 const console = {
   log: runOnJS(capturableConsole.log),
   warn: runOnJS(capturableConsole.warn),
   error: runOnJS(capturableConsole.error),
   info: runOnJS(capturableConsole.info),
 };
 _setGlobalConsole(console);
})();

We create a handler to call logging functions from UI thread on JS thread - where is the original scope of console object.

You also can compare output of this functions:

console.log(console)
runOnUI(() => {'worklet'; console.log(console)})()

The output is different.

So that's why I’m not sure that is the problem with Reanimated. Have you any logs from Instabug about problems with Reanimated or something? It can be helpful.

No, we haven't seen any errros from either package.

Is there anything we can patch to help debug this issue?

[piaskowyk]

Yes, you are can help 🙌
If you could tell me two things:

• what they happens when you uninstall Reanimated
• what they happens when you comment out line _setGlobalConsole(console);

Remember about clearing cache.
And next I will try to contact with Instabug team.

[iagormoraes]

Got the same error after upgrading from 2.0.0-rc0 to 2.0.0-rc1. after commenting the line that @piaskowyk quoted it worked again, it seems this function was renamed for the second time and maybe caused some miss configuration.

Stack trace

ReferenceError: Property '_setGlobalConsole' doesn't exist, js engine: hermes

[piaskowyk]

@iagormoraes You can check this solution - It should help.

[piaskowyk]

@gilbertl any updates?

[piaskowyk]

Closed because inactive

[JB-CHAUVIN]

I still have the issue. How can I fix this ?

[piaskowyk]

Do you have a problem with instabug or with undefined _setGlobalConsole?

[gilbertl]

Sorry for the late reply.

After some experimentation, I now conclude that this doesn't have anything to do with Instabug.

I used a clean RN repo at 0.64-rc2, enabled Hermes, and installed Reanimated v2.

The repro is here: https://github.com/akoralabs/rn-diff-purge/commit/955ca7960a42003dfa8b7f97fffdf140febb62a8

Before installing reanimated v2, console.log('hello world') will appear in Metro. After installing reanimated v2, console.log('hello world') will no longer appear on Metro (and Instabug).

@piaskowyk

[gilbertl]

I also tried commenting out

_setGlobalConsole(console);

in node_modules/react-native-reanimated/src/reanimated2/core.js

That did not solve the problem.

[11kodykay11]

Commenting out _setGlobalConsole(console); does work for me in expo.
@gilbertl , not sure if you are still experiencing this, I commented out the line after clearing the cache and installing 2.0.0-rc.2

[piaskowyk]

console.log() with reanimated + react native 0.64 doesn't work properly