Error Analysis

Tracking will start at the 1st screenview event, it is required to have screen tracking implemented. Make sure to follow the React Native Track screens sections.

If you are in the process of implementing the SDK for the 1st time (or choose to take this update as an opportunity to review your Privacy related implementation), make sure to follow the React Native Privacy section and use the Opt-in API to get the user consent, otherwise no data will be collected.

If you have already integrated the Contentsquare Bridge and enabled Error Analysis on CS Apps Analytics, the Error Analysis SDK should seamlessly function. However, note that additional configuration is required specifically for Android apps.

With the use of a Gradle plugin, an instrumentation of your code will be performed to collect the data about network errors.

plugins {
   id "com.contentsquare.error.analysis.network"  version "1.1.0"
}

buildscript {
   repositories {
      maven {
         url "https://plugins.gradle.org/m2"
      }
   }
   dependencies {
      classpath "com.contentsquare.gradle:error-analysis-network:1.2.0"
   }
}

apply plugin: "com.contentsquare.error.analysis.network"

plugins {
   id("com.contentsquare.error.analysis.network")  version "1.2.0"
}

buildscript {
   repositories {
      maven {
         url = uri("https://plugins.gradle.org/m2")
      }
   }
   dependencies {
      classpath("com.contentsquare.gradle:error-analysis-network:1.2.0")
   }
}

apply(plugin = "com.contentsquare.error.analysis.network")

You do not need to do anything to start the Error Analysis SDK, it will start itself with Contentsquare SDK.

Look at the native SDK docs for validation on each platform.

📚 Validate Android SDK integration
📚 Validate iOS SDK integration

For best implementation practices of our library, explore the Contentsquare for React Native sample app ↗.

API Errors automatically collects failed network requests.

By default, the API Errors feature collects the URL path of the failed API requests. To prevent the collection of Personal Data in the URL path, you can rewrite the request URL path with the ErrorAnalysis.setUrlMaskingPatterns SDK API.

Replace a step of the path - meaning between two slashes (/) - containing Personal Data with a variable:

• becomes CS_ANONYMIZED_USER_ID
• becomes CS_ANONYMIZED_ADDRESS

import { ErrorAnalysis } from '@contentsquare/react-native-bridge';

ErrorAnalysis.setURLMaskingPatterns([
  'https://www.contentsquare.com/users/:user_id/address/:address',
]);

If in-app features are enabled, a info log should appear with the details of the event (see React Native Debugging and Logging section):

I/CSLIB: API Error - GET 401 https://api.client.com

CSLIB ℹ️ Info: API Error - GET 401 https://api.client.com

The way our SDK works is by auto-starting with the application launch and automatically collects failed network requests.

Once started, our SDK fetches its config from our servers. It will start collecting data from network events if the API Errors setting is enabled in the config (this is handled by the Contentsquare team).

The SDK monitors only the API Errors with response code above 400, and generates analytics data. These events are then locally stored, and eventually sent to our servers in batches.

For each network error, a new event will be sent in analytics and Session Replay data. Check the following sections to learn more about how data is processed and sent:

• Analytics requests
• Session Replay requests

API Errors troubleshooting details enables you to collect more information about API errors so you can troubleshoot errors faster.

With this feature you will be able to see three types of additional API error details in the Event Stream of Session Replay.

• The HTTP headers of the request and the response.
• The body (the data sent by the request or received in the response).
• The query parameters of the request endpoint (of the URL of the information you request for).

See API Troubleshooting Details ↗ for more details.

This method will mask URLs of failing API calls to URLs that match the template URL.

Use colon (:) to indicate a dynamic parameter.

import { ErrorAnalysis } from '@contentsquare/react-native-bridge';

ErrorAnalysis.setURLMaskingPatterns([
  'https://<domain>/:status_code/person/:person_id/store/:store_id',
]);

Only network calls in error (response code above 400) will be collected.
Here the exhaustive list of data collected:

• URL (without query strings)
• HTTP method
• Response code
• Timestamp of the request
• Timestamp of the response
• HTTP headers of the request
• HTTP headers of the response
• HTTP body of the request
• HTTP body of the response
• Query parameters of the request endpoint

Contentsquare Error Analysis is not compatible with Firebase Performance Monitoring auto-collection. Only one of the two will log events, and usually, the events will be automatically logged by the Contentsquare Error Analysis. To log events to Firebase Performance Monitoring, we suggest logging it manually ↗.

Contentsquare Error Analysis is compatible with Firebase Performance auto-collection, but the HTTP body from the response won’t be collected by the Error Analysis SDK.

Workaround: Disable Firebase automatic monitoring:

// <project-root>/firebase.json
{
  "react-native": {
    "perf_auto_collection_enabled": false
  }
}

Contentsquare Error Analysis may not be compatible with other network auto-collection tools.

To enable crash collection and symbolication for native crashes, follow the steps for your platform:

📚 Contentsquare iOS SDK crash reporter
📚 Contentsquare Android SDK crash reporter

If the JavaScript Crash reporter has been successfully initialized an info log should appear in React Native logs:

CSLIB ℹ️ Info: CSErrorHandler is set as javascript global error handler.

To test that the JavaScript Crash Reporter is working properly, you can throw unhandled JavaScript error. The next time you start your application, the JavaScript crash will be sent to our servers. If you have logging enabled, you will see the upload reflected in the logs for iOS or Android.

I/CSLIB: React Native Crash event detected and sent for userID: <user-id>, session: <session-number> on screen: <screen-number> crashID: <crash-id>

CSLIB ℹ️ Info: React Native Crash event detected and sent for userID: <user-id>, session: <session-number> on screen: <screen-number> crashID: <crash-id>

Check the React Native documentation ↗ on how to enable source maps generation for JavaScript, and make sure to adjust the following settings in your project:

react {
  // Ensure the following hermesFlags are present
  (hermesFlags = ['-O', '-output-source-map'])
}

./android/app/build/generated/sourcemaps/react/release/index.android.bundle.map

  ...
  export SOURCEMAP_FILE="$(SRCROOT)/main.jsbundle.map";
  WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh";
  REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh";

  /bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
  ...

./ios/main.jsbundle.map

Download the contentsquare-cli-v0.1.0.tgz package and install it as a dev dependency to your project. The following information is required for the CLI to successfully upload the source maps:

• The targeted platform

  ios or android

• The project ID

1. Log on the Contentsquare platform on https://app.contentsquare.com ↗
2. Make sure to be on the right project
3. The project ID can be found in the URL query parameter project: https://app.contentsquare.com/#/{MODULE_NAME}?project={PROJECT_ID}&hash={HASH}

• Valid API credentials

  Follow the dedicated documentation from the Help Center to get the client ID and client Secret: How to create API credentials ↗.

• The source map path

  The path to the source map file in the project. The path should be relative to the project root.

There are two ways to provide this information to the CLI script:

Provide the required information by adding a contentsquare-cli.json file at the root of your project.

{
  "android": {
    "clientId": "ANDROID_CLIENT_ID",
    "clientSecret": "ANDROID_CLIENT_SECRET",
    "projectId": "ANDROID_PROJECT_ID",
    "sourcemapPath": "ANDROID_PROJECT_SOURCEMAP_PATH"
  },
  "ios": {
    "clientId": "IOS_CLIENT_ID",
    "clientSecret": "IOS_CLIENT_SECRET",
    "projectId": "IOS_PROJECT_ID",
    "sourcemapPath": "IOS_PROJECT_SOURCEMAP_PATH"
  }
}

Alternatively, the required information can be added as arguments directly on the command line.

Following exact steps is crucial to ensure the correct deobfuscation of the stack traces:

1. Invoke the Contentsquare CLI with the update-sourcemap-id command from the root of your project to create/update contentsquare-sourcemap-info.json, that contains the source map ID for both platforms.

   npx contentsquare-cli update-sourcemap-id

   The contentsquare-sourcemap-info.json file can be added to .gitignore to prevent it from being committed to the repository:

   echo "contentsquare-sourcemap-info.json" >> .gitignore

2. Build a release version of your app.

3. Upload the source maps to the Contentsquare platform by invoking the upload-sourcemaps command from the root of your project.

   npx contentsquare-cli upload-sourcemaps