Skip to main content

Full Integration for React-Native Logs

About Shipbook​

ShipBook gives you the power to remotely gather, search and analyze your user logs and exceptions in the cloud, on a per-user & session basis.

Requirements​

React Native version 0.63.0 and up.

Installation​

ShipBookSDK is available through: NPM

npm i @shipbook/react-native

Integrating ShipBook into your code​

To initialize, add the following:

  import shipbook from '@shipbook/react-native';

  shipbook.start("YOUR_APP_ID", "YOUR_APP_KEY");

You can optionally provide app information:

  shipbook.start("YOUR_APP_ID", "YOUR_APP_KEY", {
    appVersion: "1.0.0",
    appBuild: "123"
  });

To have a log on each class you need to create a logger:

  import shipbook from '@shipbook/react-native';
  
  let log = shipbook.getLogger("MODULE_NAME");

The usage of the log:

  log.e("the log message"); // Error log
  log.w("the log message"); // Warning log
  log.i("the log message"); // Info log
  log.d("the log message"); // Debug log
  log.v("the log message"); // Verbose log

Enable Shipbook debug logging​

If your logs weren't uploaded to Shipbook, or you're experiencing some other issue with Shipbook, you can enable Shipbook debug logging to track down the problem.

  shipbook.enableInnerLog(true);

Linking ShipBook to a user’s information​

The SDK allows the option to associate each session with specific user information.

Register user:​

The best practice is to set registerUser before ShipBook.start. It will also work after this point however, it will require an additional api request.

  shipbook.registerUser("USER_ID", "USER_NAME", "USER NAME", "USER_EMAIL", "USER_PHONE_NUMBER", "STRING DICTIONARY OF KEY VALUE");

The only required parameter is userId.

Logout​

To logout the user, add the following code to your app’s logout function.

  shipbook.logout();

Screen​

To log the user’s screen information, add the following code

  shipbook.screen("SCREEN_NAME");

The best practice is to add this code to viewWillAppear in the view controller.

Flush​

Flush all logs on the device and send them now to the server.

  shipbook.flush()

Get the UUID​

The SDK creates it's own UUID. So to get the UUID call te following code.

  shipbook.getUUID()

Using Wrappers with ShipBook​

If you wrap ShipBook in your own logging class, the SDK will report your wrapper's filename and line number instead of the actual caller. To fix this, register your wrapper class:

  // Pass the class itself (recommended - works with minification)
  Shipbook.addWrapperClass(MyLogWrapper);

  // Or pass a string for third-party internals
  Shipbook.addWrapperClass('ThirdPartyLogger');

The SDK will skip any stack frames from registered classes when determining the caller location.

Stack Offset​

For cases where addWrapperClass isn't sufficient (e.g., deeply nested third-party wrappers in minified code), you can set a manual stack offset:

  // Skip 1 additional stack frame beyond SDK internals
  Shipbook.setStackOffset(1);

Linking to Your Backend​

To see this app's sessions and your Node.js backend's requests in one timeline, add the header from getSessionHeaders() to the requests your app sends to your backend. See Cross-App Session Linking.

Custom Appenders​

You can create custom appenders to route logs to additional destinations such as analytics services, local databases, or test harnesses. Register your custom appender before calling start().

class AnalyticsAppender {
    constructor(name, config) {
        this.name = name;
    }

    update(config) {}

    push(log) {
        if (log.type === ‘message’) {
            // Send to your analytics service
        }
    }

    flush() {}
    destructor() {}
}

// Register before start
shipbook.registerAppender(‘AnalyticsAppender’, AnalyticsAppender);

shipbook.start(‘YOUR_APP_ID’, ‘YOUR_APP_KEY’);

Once registered, your custom appender can be configured through the Shipbook console by its type name, and assigned to loggers with the desired severity level.

Additional Information​

Static Function Alternative to getLogger​

You may use a static function in place of getLogger. This is not recommended and the caveats are listed below. When a static function activates the logger, the tag will become the filename. The usage of the logs:

Log.e("the log message") // Error log
Log.w("the log message") // Warning log
Log.i("the log message") // Info log
Log.d("the log message") // Debug log
Log.v("the log message") // Verbose log

As mentioned, working with this static logger isn’t ideal:

  • Performance is slower, especially in cases where the log is closed
  • The log’s information is less detailed. Ideally, you should create a logger for each class.
  • The Log name can have a name collision with a local Log class.