log_javascript.adoc

Log React Native JavaScript using the buddybuild SDK (iOS)

The buddybuild SDK is a lightweight yet powerful suite of tools that integrates seamlessly into your application. Among the many features the SDK provides, you can use the buddybuild SDK to capture JavaScript logs in the Crash and Feedback reports logs.

Here are the step-by-step instructions to configure your app to capture JavaScript logs emitted by console.log, console.error, etc. using the buddybuild SDK:

Step 1: Install the buddybuild SDK

The SDK needs to be integrated into your main app prior to configuring React Native JavaScript logging.

We highly recommend using the automatic buddybuild SDK integration right from your dashboard. However, if you wish to install the buddybuild SDK manually, follow these steps.

Step 2: Get the latest version

Follow these instructions to update the SDK on your local machine.

Step 3: Make the following changes in your app delegate:

First, add the following imports.

#import <asl.h>
#import "RCTLog.h"

Then, add the following lines in application: didFinishLaunchingWithOptions:, right after [BuddyBuildSDK setup];.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [BuddyBuildSDK setup];

  RCTSetLogThreshold(RCTLogLevelInfo);
  RCTSetLogFunction(BuddyBuildReactNativeLogFunction);

  // Your code here

  return YES;
}

And finally, implement BuddyBuildReactNativeLogFunction

Copy/paste the snippet below at the very bottom of your app delegate, right before the @end.

RCTLogFunction BuddyBuildReactNativeLogFunction = ^(RCTLogLevel level, __unused RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
  NSString *log = RCTFormatLog([NSDate date], level, fileName, lineNumber, message);
  NSString *theLog = [NSString stringWithFormat: @"[REACT NATIVE LOG] %s", log.UTF8String];
  [BuddyBuildSDK log:theLog];
  int aslLevel;
  switch(level) {
    case RCTLogLevelTrace:
      aslLevel = ASL_LEVEL_DEBUG;
      break;
    case RCTLogLevelInfo:
      aslLevel = ASL_LEVEL_NOTICE;
      break;
    case RCTLogLevelWarning:
      aslLevel = ASL_LEVEL_WARNING;
      break;
    case RCTLogLevelError:
      aslLevel = ASL_LEVEL_ERR;
      break;
    case RCTLogLevelFatal:
      aslLevel = ASL_LEVEL_CRIT;
      break;
  }
  asl_log(NULL, NULL, aslLevel, "%s", message.UTF8String);
};

Step 4: Verify

Add a console.log line (similar to the example below) in your JavaScript code base.

console.log("Testing React Native logging with the buddybuild SDK");

Then run your application in Xcode. In the Xcode output pane you should see the following log line, which indicates that the buddybuild SDK will now log JavaScript logs.

Xcode logs

2017-05-08 14:35:36.512 myAwesomeApp[5320:521089] [BuddyBuildSDKLog] [REACT NATIVE LOG] 2017-05-08 14:35:36.512 [info][tid:com.facebook.react.JavaScript] Testing React Native logging with the buddybuild SDK

Step 5: Commit and push

Commit and push the changes to your repo to add the buddybuild SDK.

git commit -am 'The buddybuild SDK now captures JavaScript console.logs'
git push

Your code push will be picked up by buddybuild. All subsequent Feedback and Crash Reports will capture JavaScript logs.