React native console.log not showing in the console view.

[nanandn]

The log messages printed from the application using console.log are not showing the 'Console' view. I only see messages from React Native Packager. I started the 'Logs' as explained in https://nuclide.io/docs/platforms/ios/#simulator-logs.

Versions

• Atom: 1.12.4
• Nuclide: 0.183.0
• Client OS: macOS 10.12.1

Additional Details

• Installed packages (apm ls --installed):

├── atom-beautify@0.29.13
├── atom-formatter-jsbeautify@1.1.2
├── atom-material-ui@1.3.6
├── autoclose-html@0.23.0
├── git-plus@5.25.3
├── haskell-grammar@0.4.0
├── highlight-selected@0.11.2
├── language-babel@2.48.4
├── language-ini@1.16.0
├── language-ocaml@1.1.2
├── language-swift@0.5.0
├── language-thrift@1.0.2
├── merge-conflicts@1.4.4
├── nuclide@0.183.0
├── nuclide-format-js@0.0.36
├── sort-lines@0.14.0
└── tool-bar@1.0.1

[tsenterd]

hey just curious are you getting any errors in the console? @nanandn

[matthewwithanm]

Hey @nanandn! Do you see the logs if you relax the "tags to include" setting under "Nuclide-ios-simulator-logs"?

[nanandn]

@tsenterd I am not seeing any errors in the console.

[nanandn]

@matthewwithanm Thanks. yes The log shows once I relax the setting. I changed it to '^(.*)$' and I see the logs now. Is this a right setting? What are those tags?

[matthewwithanm]

The tags are our way of recognizing which items are coming from React Native, but it seems like they're not being applied in some cases (or maybe we're not parsing them correctly).

@yungsters Anything spring to mind here?

[nanandn]

@matthewwithanm Thank you for the explanation.

[jtokoph]

Possibly related:

• When remote js debugging is disabled console.log messages appear in the console.
• When remote js debugging is enabled and connected to Chrome, console.log messages appear in the Chrome devtool console.
• When remote js debugging is enabled and connected to the Nuclide debugger, console.log messages don't appear anywhere.

Is there some way to get the logged messages while the debugger is running?

[wellyshen]

@matthewwithanm What's the right way to set the "tags to include" ? Currently I just follow the @nanandn 's solution, set it to "^(.*)$".

[yungsters]

@nanandn Can you confirm that this is only an issue when remote debugging via the Nuclide debugger (as @jtokoph described)?

[wellyshen]

When does this issue will be fixed?

[alexhhn]

Any news about this issue?

[matthewwithanm]

@wellyshen @alexhhn Sorry, @yungsters is trying to help debug.

[yungsters]

@nanandn, @wellyshen, or @alexhhn: Can any of you confirm that this is only an issue when remote debugging via the Nuclide debugger (as @jtokoph described)?

[wellyshen]

@yungsters

I can see my console.log on Chrome devtool and I wasn't start debugging, here is my step :

• Setup my console.log() in code
• Run start logs in Nuclide
• Open the console view of Nuclide
• I can't see my console log information
• I change the iOS simulator log settings to ^(.*)$
• I can see my console log information

[alexhhn]

The same as wellyshen

[anarasimhan]

@yungsters The console log don't appear even if you are not using the debugging. When I change the tags to ''^(.*)$' it works.

[yungsters]

@wellyshen, @alexhhn, and @anarasimhan: Thanks for the extra information.

I tried reproducing the problem, but I am unable to. Can you try looking in the iOS Simulator's System Log (Menu Bar > Debug > Open System Log...) and look for your console.log(...) messages there? If so, can you share what those are?

For example, I see the following in my System Log:

Mar  7 21:06:23 yungsters-mbp Facebook[71888]: 2017-03-07 21:06:23.596 [info][core.react][tid:com.facebook.react.JavaScript][] Expected console log message.

[wellyshen]

@yungsters I only can find the console.log of Nuclide, can you explain how to access system log more specific? Maybe give us an image?

[yungsters]

@wellyshen Select your iOS Simulator. In the Menu Bar, under the Debug menu, select the "Open System Log..." option. This should open a new window with System Logs.

From there, use the search feature to look for your console.log message. Please share the entirety of that log message.

[wellyshen]

@yungsters Here's my log, does the info enough?

Mar 8 15:44:11 Weide-MacBook-Pro WorkoutTube[30915]: === MY LOG ===

It seems my log on iOS's console.log works fine, but it can't show on the Nuclide's console view. Unless I use the ^(.*)$ instead of the default settings.

[yungsters]

@wellyshen Hmm, looks like the iOS Simulator logs are for some reason missing the standard tags that Nuclide uses as the default filter. Thanks for the help.

[wellyshen]

@yungsters It seems my log on iOS's console.log works fine, but it can't show on the Nuclide's console view. Unless I use the ^(.*)$ instead of the default settings.

[chipanda]

I did not seen the console.log in nuclide console with errors in chrome console:./host/InspectorFrontendHost.js:653 Incompatible embedder: method InspectorFrontendHost.platform is missing. Using stub instead.

[wellyshen]

Any update for this?

[hfossli]

Should it work from device as well? Does those settings in iOS Simulator Logs apply to device as well? I guess not?

[wellyshen]

Any update for this?

[cristiantx]

I'm having the same issue as @chipanda #899 (comment). Console with a lot of errors and inspectors doesn't seem to work. If I use the default chrome debugger that opens from packager it shows the logs ok.

[agersoncgps]

I do not get logs in Atom / Nuclide with or without the remote debugger enabled. CHanging the tags to include does fix it.

[mesbahsabur]

+1

[wellyshen]

Any update?

[yungsters]

I think I have it figured out.

Internally at Facebook, we have configured React Native via RCTSetLogFunction to log not only the message, but also [core.react]. This is how we differentiate logs coming from React Native apart from the rest of our app.

@matthewwithanm Is there a mechanism to configure the default tag filter in Nuclide differently internally? The current default is very specific to our internal environment.

Solution: Use ^(.*)$ as your tag filter in Nuclide.

[matthewwithanm]

@yungsters We don't tag messages at all in open source? Having no filter (^.*$) isn't really a solution because the console gets spammed with irrelevant logs.

[yungsters]

@matthewwithanm We do not. If you take a look at #899 (comment), the output is entirely up to how developers happen to integrate React Native into their mobile apps.

[matthewwithanm]

Ugh. Maybe we have to go back to tailing that one random file. I'd much prefer having React's messages tagged in some way that we could identify though. @frantic do you have any ideas here?

[wellyshen]

Sorry, may I know any update for this issue?

[matthewwithanm]

@wellyshen No updates currently, sorry! For now, you need to change the filter like you're already doing.

[wellyshen]

Okay, I just want to remind that console.log is one of the most important debug way for many developers. We're eager for hearing the fixing of this issue.

[winsonet]

I have the same issue, but I don't want to set the log filter to ^(.*)$, because it will show a lot of other system messages and keep to loop to show :(

[wellyshen]

use ^(.*)$ on xCode 9 simulator can't work...

[mostafaeweda]

That should be fixed in the latest RN debugger release.

[wellyshen]

@modocache Which version of nuclide?

I'm use v0.286.0 of nuclide. Even I use ^(.*)$. It still not show the console.log().

RN: 0.50.3
Nuclide: 0.286.0
NodeJS: 9.1.0
RN App OS: 11
iOS-simulator: 10.0

[mostafaeweda]

It’s currently in master (if you build from source) and will be in next week’s release

[wellyshen]

@mostafaeweda

OK, thank you a lot ;)
Should I still need to use ^(.*)$ to filter my console.logs?

[jayeshjain24]

This is the best link that explains logging with chrome devtools : https://codeburst.io/react-native-debugging-tools-3a24e4e40e4