{"_id":"5914b27ac022e40f00490dfd","__v":0,"parentDoc":null,"user":"55b2d5626862a10d00887af9","category":{"_id":"590a04f3ed80861900cbc740","project":"55b2d5baa74a380d00e290c4","__v":0,"version":"590a04f2ed80861900cbc737","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-15T02:33:11.315Z","from_sync":false,"order":8,"slug":"supported-frameworks","title":"React Native"},"project":"55b2d5baa74a380d00e290c4","version":{"_id":"590a04f2ed80861900cbc737","project":"55b2d5baa74a380d00e290c4","__v":4,"createdAt":"2017-05-03T16:27:30.085Z","releaseDate":"2017-05-03T16:27:30.085Z","categories":["590a04f3ed80861900cbc738","590a04f3ed80861900cbc739","590a04f3ed80861900cbc73a","590a04f3ed80861900cbc73b","590a04f3ed80861900cbc73c","590a04f3ed80861900cbc73d","590a04f3ed80861900cbc73e","590a04f3ed80861900cbc73f","590a04f3ed80861900cbc740","590a04f3ed80861900cbc741","590a04f3ed80861900cbc742","590a04f3ed80861900cbc743","590a04f3ed80861900cbc744","590a04f3ed80861900cbc745","590a04f3ed80861900cbc746","590a04f3ed80861900cbc747","590a04f3ed80861900cbc748","590a04f3ed80861900cbc749","590a04f3ed80861900cbc74a","590a04f3ed80861900cbc74b","590a04f3ed80861900cbc74c","590a04f3ed80861900cbc74d","59124949de13f61900336a7a","5914b04e7c2c552d008b7104","5914b47242c6a22300b9dc20"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"7.0.0","version":"7"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-05-11T18:50:34.819Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"The buddybuild SDK is a lightweight yet powerful [suite of tools](doc:integrate-sdk) that integrates seamlessly into your application. Amongst the many features the SDK provides, you can use the buddybuild SDK to capture JavaScript logs in the Crash and Feedback reports logs.\n\nHere 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:\n\n##Step 1: Install the buddybuild SDK\n\nThe SDK needs to be integrated into your main app prior to configuring React Native JavaScript logging.\n\nWe highly recommend using the [**automatic** buddybuild SDK integration](doc:integrate-sdk#section-step-2-install-the-sdk) right from your dashboard. However, if you wish to install the buddybuild SDK **manually**, follow [these steps](doc:sdk-integration).\n\n##Step 2: Get the latest version\n\nFollow [these instructions](doc:integrate-sdk#section-update-the-sdk) to update the SDK on your local machine.\n\n##Step 3: Make the following changes in your app delegate:\n\nFirst, add the following imports.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"#import <asl.h>\\n#import \\\"RCTLog.h\\\"\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]\nThen, add the following lines in `application: didFinishLaunchingWithOptions:`, right after `[BuddyBuildSDK setup];`.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {\\n\\t[BuddyBuildSDK setup];\\n  \\n\\tRCTSetLogThreshold(RCTLogLevelInfo);\\n\\tRCTSetLogFunction(BuddyBuildReactNativeLogFunction);\\n  \\n\\t// Your code here\\n  \\n\\treturn YES;\\n}\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]\nAnd finally, implement `BuddyBuildReactNativeLogFunction`\n\nCopy/paste the snippet below at the very bottom of your app delegate, right before the `:::at:::end`.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"RCTLogFunction BuddyBuildReactNativeLogFunction = ^(RCTLogLevel level, __unused RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {\\n  NSString *log = RCTFormatLog([NSDate date], level, fileName, lineNumber, message);\\n\\tNSString *theLog = [NSString stringWithFormat: @\\\"[REACT NATIVE LOG] %s\\\", log.UTF8String];\\n\\t[BuddyBuildSDK log:theLog];\\n\\tint aslLevel;\\n\\tswitch(level) {\\n\\t\\tcase RCTLogLevelTrace:\\n\\t\\t\\taslLevel = ASL_LEVEL_DEBUG;\\n      break;\\n    case RCTLogLevelInfo:\\n      aslLevel = ASL_LEVEL_NOTICE;\\n      break;\\n    case RCTLogLevelWarning:\\n      aslLevel = ASL_LEVEL_WARNING;\\n      break;\\n    case RCTLogLevelError:\\n      aslLevel = ASL_LEVEL_ERR;\\n      break;\\n    case RCTLogLevelFatal:\\n      aslLevel = ASL_LEVEL_CRIT;\\n      break;\\n  }\\n  asl_log(NULL, NULL, aslLevel, \\\"%s\\\", message.UTF8String);\\n};\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]\n##Step 4: Verify\n\nAdd a `console.log` line (similar to the example below) in your JavaScript codebase.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"console.log(\\\"Testing React Native logging with the buddybuild SDK\\\");\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThen 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.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"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\",\n      \"language\": \"text\",\n      \"name\": \"Xcode logs\"\n    }\n  ]\n}\n[/block]\n##Step 5: Commit and push\n\nCommit and push the changes to your repo to add the buddybuild SDK.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"git commit -am 'The buddybuild SDK now captures JavaScript console.logs'\\ngit push\",\n      \"language\": \"shell\"\n    }\n  ]\n}\n[/block]\nYour code push will be picked up by buddybuild. All subsequent Feedback and Crash Reports will capture JavaScript logs.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/d54ca57-1.png\",\n        \"1.png\",\n        1274,\n        702,\n        \"#eddfe7\"\n      ]\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"log-react-native-javascript-using-the-buddybuild-sdk-ios","type":"basic","title":"Log React Native JavaScript using the buddybuild SDK (iOS)"}

Log React Native JavaScript using the buddybuild SDK (iOS)


The buddybuild SDK is a lightweight yet powerful [suite of tools](doc:integrate-sdk) that integrates seamlessly into your application. Amongst 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](doc:integrate-sdk#section-step-2-install-the-sdk) right from your dashboard. However, if you wish to install the buddybuild SDK **manually**, follow [these steps](doc:sdk-integration). ##Step 2: Get the latest version Follow [these instructions](doc:integrate-sdk#section-update-the-sdk) to update the SDK on your local machine. ##Step 3: Make the following changes in your app delegate: First, add the following imports. [block:code] { "codes": [ { "code": "#import <asl.h>\n#import \"RCTLog.h\"", "language": "objectivec" } ] } [/block] Then, add the following lines in `application: didFinishLaunchingWithOptions:`, right after `[BuddyBuildSDK setup];`. [block:code] { "codes": [ { "code": "- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {\n\t[BuddyBuildSDK setup];\n \n\tRCTSetLogThreshold(RCTLogLevelInfo);\n\tRCTSetLogFunction(BuddyBuildReactNativeLogFunction);\n \n\t// Your code here\n \n\treturn YES;\n}", "language": "objectivec" } ] } [/block] And finally, implement `BuddyBuildReactNativeLogFunction` Copy/paste the snippet below at the very bottom of your app delegate, right before the `@end`. [block:code] { "codes": [ { "code": "RCTLogFunction BuddyBuildReactNativeLogFunction = ^(RCTLogLevel level, __unused RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {\n NSString *log = RCTFormatLog([NSDate date], level, fileName, lineNumber, message);\n\tNSString *theLog = [NSString stringWithFormat: @\"[REACT NATIVE LOG] %s\", log.UTF8String];\n\t[BuddyBuildSDK log:theLog];\n\tint aslLevel;\n\tswitch(level) {\n\t\tcase RCTLogLevelTrace:\n\t\t\taslLevel = ASL_LEVEL_DEBUG;\n break;\n case RCTLogLevelInfo:\n aslLevel = ASL_LEVEL_NOTICE;\n break;\n case RCTLogLevelWarning:\n aslLevel = ASL_LEVEL_WARNING;\n break;\n case RCTLogLevelError:\n aslLevel = ASL_LEVEL_ERR;\n break;\n case RCTLogLevelFatal:\n aslLevel = ASL_LEVEL_CRIT;\n break;\n }\n asl_log(NULL, NULL, aslLevel, \"%s\", message.UTF8String);\n};", "language": "objectivec" } ] } [/block] ##Step 4: Verify Add a `console.log` line (similar to the example below) in your JavaScript codebase. [block:code] { "codes": [ { "code": "console.log(\"Testing React Native logging with the buddybuild SDK\");", "language": "javascript" } ] } [/block] 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. [block:code] { "codes": [ { "code": "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", "language": "text", "name": "Xcode logs" } ] } [/block] ##Step 5: Commit and push Commit and push the changes to your repo to add the buddybuild SDK. [block:code] { "codes": [ { "code": "git commit -am 'The buddybuild SDK now captures JavaScript console.logs'\ngit push", "language": "shell" } ] } [/block] Your code push will be picked up by buddybuild. All subsequent Feedback and Crash Reports will capture JavaScript logs. [block:image] { "images": [ { "image": [ "https://files.readme.io/d54ca57-1.png", "1.png", 1274, 702, "#eddfe7" ] } ] } [/block]