React Native plugin for Bugfender

Bugfender module for React Native and React Native for the Web. It 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.

Adding Bugfender to your project

$ 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.

Usage

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

Please check the following URL for a complete API reference: https://docs.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>',
  // 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
});

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:
Bugfender.setNetworkLoggingCaptureBodies(false);
Bugfender.setNetworkLoggingCaptureErrorResponseBodies(true);
Bugfender.setNetworkLoggingURLFilter(
  ['https://api.example.com/*'],
  ['*/secrets/*']
);
Bugfender.setNetworkLoggingMaxRequestsPerMinute(60);

// Optional: redact sensitive headers/bodies before they are logged
Bugfender.setNetworkLoggingRequestObfuscationHandler((url, headers, body) => ({
  url,
  headers: { ...headers, authorization: '[REDACTED]' },
  body,
}));
Bugfender.setNetworkLoggingResponseObfuscationHandler((headers, body) => ({
  headers,
  body: body ? body.replace(/"token":"[^"]*"/g, '"token":"[REDACTED]"') : null,
}));

You can also enable it at init time with networkLoggingEnabled, networkLoggingCaptureBodies, and networkLoggingCaptureErrorResponseBodies.

Platform notes:

• iOS: URLSession traffic is captured (including React Native fetch).
• Android: React Native fetch/XHR is instrumented via OkHttp (android-okhttp 4.x adapter).
• Web: Uses @bugfender/sdk (≥ 4.0.0), which intercepts fetch and XMLHttpRequest.
• Requires native Bugfender Android SDK 4.x (this package pulls com.bugfender.sdk:android:4.+).

Changelog

The changelog of the Bugfender Web SDK can be found in ReleaseNotes under the react-native tag. For all the Bugfender product changes please visit the general release notes.

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

You can find more details here: https://reactnative.dev/docs/environment-setup