Skip to main content

React Native

info

You can find the module source code in GitHub Bugfender React Native.

GitHub Stack Overflow  Bugfender

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.

The SDK is tested with both the React Native Old and New Architectures.

Expo Compatibility​

Bugfender works in an Expo development build. Expo Go cannot run the Bugfender SDK because the SDK contains native code that is not included in Expo Go.

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
  // networkLoggingEnabled: false,
  // networkLoggingCaptureBodies: false,
  // networkLoggingCaptureErrorResponseBodies: false,
  // logBrowserEvents: true, // Web specific
  // build: '42', // Web specific
  // version: '1.0', // Web specific
});

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 installation and configuration, use the API in your React Native 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 lets you search for the device by key in the Bugfender Dashboard and use associated data to filter 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 appear 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 title', '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​

Network logging​

Network logging is opt-in and disabled by default. When enabled, HTTP requests appear in Bugfender as logs tagged bf_network.

Bugfender.setNetworkLoggingEnabled(true);

// Optional capture settings
Bugfender.setNetworkLoggingCaptureBodies(false);
Bugfender.setNetworkLoggingCaptureErrorResponseBodies(true);
Bugfender.setNetworkLoggingURLFilter(
  ['https://api.example.com/*'],
  ['*/secrets/*']
);
Bugfender.setNetworkLoggingMaxRequestsPerMinute(60);

You can enable the same behavior during init with networkLoggingEnabled, networkLoggingCaptureBodies, and networkLoggingCaptureErrorResponseBodies.

Use obfuscation handlers to redact application-specific secrets before a request is logged:

Bugfender.setNetworkLoggingRequestObfuscationHandler((url, headers, body) => ({
  url,
  headers: { ...headers, authorization: '[REDACTED]' },
  body,
}));

Bugfender.setNetworkLoggingResponseObfuscationHandler((headers, body) => ({
  headers,
  body: body?.replace(/"token":"[^"]*"/g, '"token":"[REDACTED]"') ?? null,
}));

Platform behavior:

  • iOS captures URLSession traffic, including React Native fetch.
  • Android captures React Native fetch and XHR through OkHttp.
  • Web uses @bugfender/sdk to capture fetch and XMLHttpRequest.

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

API Reference​

See the Bugfender JavaScript API reference for the shared API surface and the React Native package README for native-specific release notes.