React Native

Installation

1. Install

Installation of react-native-bugsee module allows for a richer integration and brings the ability to further control Bugsee from within your Javascript code.

Install the module itself:

npm install --save react-native-bugsee

2. Prepare iOS project

With CocoaPods

Make sure your Podfile includes the following lines:

pod 'React', :path => '../node_modules/react-native', :subspecs => [
  'Core',
  'CxxBridge',
  'DevSupport',
  'RCTText',
  'RCTNetwork',
  'RCTWebSocket',
  'RCTAnimation'
]
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

pod 'react-native-bugsee', path: '../node_modules/react-native-bugsee'

Without CocoaPods or manual installation

Locate the Bugsee.framework in node_modules/react-native-bugsee/ios/lib and add it to your project by drag and dropping it into the right location. When asked, choose to copy:

Copy frameworks

You can also use instructions for native iOS applications from here to install native part of Bugsee SDK for react native.

Publishing to App Store (Only for Bugsee iOS SDK v1.20 and later) [iOS]

If you plan to publish your application to App Store, one additional step is required. It will trigger the stripping of extra data during build to prevent submission rejection. Follow the steps below to do that:

  • For iOS project, in XCode, add an extra "Run Script" build phase to your project

Build phase

  • Paste the following script into it
SCRIPT_SRC=$(find "$PROJECT_DIR/../node_modules/react-native-bugsee" -name 'BugseeClean' | head -1)
if [ ! "${SCRIPT_SRC}" ]; then
echo "Error: BugseeClean script not found."
exit 1
fi
/usr/bin/python "${SCRIPT_SRC}"

Execute the following command to link native libraries. For Android, it will automatically link the underlying SDK and copy bridging files. For iOS, if there is Podfile present with reference to 'react-native-bugsee' it's no-op, otherwise it will add bridging files to your project.

react-native link react-native-bugsee

Launch from JS

iOS/iPadOS: Make sure you launch your app with Bugsee on a real device. Underlying Bugsee iOS SDK does not work in simulator as it heavily depends on the hardware.

Now open your App.js and add the following code to launch Bugsee at application startup (don't forget to put proper application tokens):

import Bugsee from 'react-native-bugsee';
import {Platform} from 'react-native';

// ...

export default class App extends Component<{}> {
  constructor(props) {
    super(props);

    this.launchBugsee();
  }

  async launchBugsee() {
    let appToken;

    if (Platform.OS === 'ios') {
        appToken = '<IOS-APP-TOKEN>';
    } else {
        appToken = '<ANDROID-APP-TOKEN>';
    }

    await Bugsee.launch(appToken);
  }
}

Launch from native

iOS/iPadOS: Make sure you launch your app with Bugsee on a real device. Underlying Bugsee iOS SDK does not work in simulator as it heavily depends on the hardware.

In most cases launching Bugsee from JavaScript code should be sufficient. But if you prefer it to be launched from native code (e.g. catching early crashes), then you should follow the corresponding instructions for iOS and Android.

When launching Bugsee from native code, you have to initialize JS layer yourself. You should do that by calling Bugsee.initialize(). Refer to the code snippet below for an example.

import Bugsee from 'react-native-bugsee';
import {Platform} from 'react-native';

// ...

export default class App extends Component<{}> {
  constructor(props) {
    super(props);

    this.initApp();
  }

  async initApp() {
    // ...

    await Bugsee.initialize();

    // ...
  }
}