Skip to main content

React Native

info

You can find the moduel source code in Github Bugfender React Native

Bugfender is a game-changing platform that logs every detail your users experience and feeds the data directly to an easy-to-use web console. Bugfender SDK is multi-platform and available for mobile and web apps, so you can use the same tool for all your apps.

Specifically for React Native developers, Bugfender offers powerful capabilities to remotely monitor and debug any log or error. You can easily reproduce and fix issues using our detailed log viewer and the stack trace of exceptions.

If you don't have a Bugfender account yet, go to Bugfender Signup and come back here.

This SDK depends on the iOS, Android and Javascript Bugfender SDKs.

This version has been tested in React Native with both the Old and New Architecture. The New Architecture is still experimental, and therefore subject to break in new React Native versions.

Expo Compatibility​

Bugfender works with Expo in the "bare workflow". The Expo Go application (used in the managed workflow) can not run the Bugfender SDK because it contains native code.

Install Bugfender​

Open a command prompt at the root of the project folder and run the following command.

$ cd path_to_your_project

Add the bugfender plugin from npm

$ npm install @bugfender/rn-bugfender @bugfender/sdk @bugfender/common

After installing, close and relaunch your app with npm run ios or npm run android.

Configure​

To use the plugin and start logging activities to Bugfender, import the library using the following line.

import { Bugfender, LogLevel } from '@bugfender/rn-bugfender';

Please check the following URL for a complete API reference: https://js.bugfender.com.

Note: always import @bugfender/rn-bugfender instead of @bugfender/sdk. This will enable the native features of the SDK that you wouldn't get otherwise.

Example​

import { Bugfender, LogLevel } from '@bugfender/rn-bugfender';

// Init Bugfender with your APP key
Bugfender.init({
  appKey: '<YOUR_APP_KEY_HERE>',
  // apiURL: 'https://api.bugfender.com',
  // baseURL: 'https://dashboard.bugfender.com',
  // overrideConsoleMethods: true,
  // printToConsole: true,
  // logUIEvents: true,
  // registerErrorHandler: true,
  // deviceName: 'Anonymous',
  // maximumLocalStorageSize: 5 * 1024 * 1024, // Native specific
  // enableLogcatLogging: false, // Android specific
  // logBrowserEvents: true, // Web specific
  // build: '42', // Web specific
  // version: '1.0', // Web sprecific
});

note

Remember to change YOUR_APP_KEY_HERE with the app key of your app. You can get an app key by signing up to Bugfender. For all the available options see our reference.

Usage​

Send logs​

After the successful installation and configuration, you can now use our APIs in your Flutter application to send logs.

Bugfender.log('This is a debug log in Bugfender from React Native');

Similarly, the SDK provides other methods to send logs to the server:

// Send logs with different levels
Bugfender.log('This is a debug log in Bugfender from React Native');
Bugfender.warn('This is a warn log in Bugfender from React Native');
Bugfender.error('This is a error log in Bugfender from React Native');
Bugfender.fatal('This is a fatal log in Bugfender from React Native');
Bugfender.trace('This is a trace log in Bugfender from React Native');
Bugfender.info('This is a info log in Bugfender from React Native');

Set Device Data​

Once your application is running on several devices, it will be useful to know which device belongs to whom. You can associate information to a device as if it were a dictionary:

// Set device values
Bugfender.setDeviceKey('device.key.string', 'fake.string.value');
Bugfender.setDeviceKey('device.key.boolean', true);
Bugfender.setDeviceKey('device.key.float', 10.1);
Bugfender.setDeviceKey('device.key.integer', 102);

This will later on let you search this device by “key” in the Bugfender Dashboard and you can use any of the associated data to filter our your device list.

If you want to remove a data from the device, you can call removeDeviceKey:

Bugfender.removeDeviceKey('device.key.integer');

Send Issues​

Bugfender allows you to send issues to the server. An issue is similar to an exception but they are showed in the issues section and you can send issues any time from the app, even if the device is not enabled in the system. Issues are useful to keep track of important errors that you can detect in your code.

For sending an issue you can use the following function:

Bugfender.sendIssue('Issue titile', 'This will create a new issue in Bugfender').then((url) =>
  console.log('Issue url: %s', url)
);

Send User Feedback​

Getting feedback from the final users is one of the most important things for an app developer. Good user feedback allows you to detect errors in your app and helps you to understand better your product.

Sending User Feedback automatically sends all cached logs for the current session, even if the device is not enabled for sending logs.

Send feedback using your UI​

You can send user feedback directly if you got the feedback with your own form. To send it, you should do like this:

Bugfender.sendUserFeedback('Feedback title', 'This will create a new feedback in Bugfender').then((url) =>
  console.log('Feedback url: %s', url)
);

Built-in feedback modal​

You can send user feedback with our ready-made UI like this:

// Show user feedback native screen
Bugfender.getUserFeedback({
    title: 'Feedback',
    hint: 'Please send us your feedback',
    subjectPlaceholder: 'This is the reason',
    feedbackPlaceholder: 'This is the full message',
    submitLabel: 'Send',
    closeLabel: 'Cancel',
  }
).then(response => {
  if (response.isSent) {
    console.log('RN: feedback sent with url:', response.feedbackURL);
  } else {
    console.log('RN: feedback not sent');
  }
});

Advanced Usage​

Send Logs with Tags​

Bugfender has a more advanced logging system than sending regular logs, you can use the following method to add a tag will allow you find and filter logs easily in the Bugfender log viewer.

// Send low level log
Bugfender.sendLog({
  line: 1001,
  level: LogLevel.Debug,
  tag: 'tag',
  method: 'method',
  file: 'file',
  text: 'Sending low level debug log.',
});

Having your app decide when to send logs​

In some special circumstances you may want to send logs, regardless of the enabled state of the device in the Bugfender console, for example in a custom exception handler. Use forceSendOnce to force sending the logs once, and use setForceEnabled: to force it for some period of time.

Bugfender.forceSendOnce();

Bugfender.setForceEnabled(true);

Manually sending crashes​

If you have your own crash reporting system and need to send crashes, you can do so by calling directly sendCrash

Bugfender.sendCrash('Crash title', 'This will create a new crash in Bugfender').then((url) =>
  console.log('Crash url: %s', url)
);

Sometimes you want to integrate Bugfender with a third party tool. For this purpose, the SDK provides a method that returns the URL for the session. You can send it to the third party tool to easily go to the logs of the current session from the other tool.

Bugfender.getSessionURL().then((url) => console.log('Session url: %s', url));

Sometimes you want to integrate Bugfender with a third party tool. For this purpose, the SDK provides a method that returns the URL for the current device. You can send it to the third party tool and easily navigate back to the logs of the device from the other tool.

Bugfender.getDeviceURL().then((url) => console.log('Device url: %s', url));

Cocoapods Troubleshooting​

We often get questions about CocoaPods install failing. Whilst this has nothing to do with Bugfender, you may encounter this problem while installing the pod.

To reinstall the pods, you can do:

bundle exec pod install

Or, for the New Architecture:

RCT_NEW_ARCH_ENABLED=1 bundle exec pod install