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.

Add Contentsquare Error Analysis to your app

Section titled Add Contentsquare Error Analysis to your app

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.

Using the plugins DSL:

app/build.gradle
plugins {
id "com.contentsquare.error.analysis.network" version "1.1.0"
}

Using legacy plugin application:

build.gradle
buildscript {
repositories {
maven {
url "https://plugins.gradle.org/m2"
}
}
dependencies {
classpath "com.contentsquare.gradle:error-analysis-network:1.2.0"
}
}
app/build.gradle
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.

Removing Personal Data in request URL path

Section titled Removing Personal Data in request URL path

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',
]);
URL before maskingURL after masking
https://www.contentsquare.com/users/123/address/castle+blackhttps://www.contentsquare.com/users/CS_ANONYMIZED_USER_ID/address/CS_ANONYMIZED_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

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:

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.

Mask API Error By Template URL

Section titled Mask API Error By Template URL

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

Known limitations and recommendations

Section titled Known limitations and recommendations

Conflict with Firebase Performance Monitoring

Section titled Conflict with Firebase Performance Monitoring

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

Validate JavaScript crashes integration

Section titled Validate JavaScript crashes integration
Validate JavaScript error handler is activated
Section titled Validate JavaScript error handler is activated

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.
Validate JavaScript crash reporting
Section titled Validate JavaScript crash reporting

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>

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:

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

Use the index.android.bundle.map path in the sourcemapPath configuration for android. Example for default path:

./android/app/build/generated/sourcemaps/react/release/index.android.bundle.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.

contentsquare-cli.json
{
"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.

OptionDescription
--client-idThe client ID of API credentials
--client-secretThe client secret of API credentials
--configThe path to the configuration file relative to project root.
Default value: contentsquare-cli.json
--helpDisplay the help message
--platformThe platform to target: ios or android
--project-idThe project ID
--sourcemap-pathThe path to the source map file
--urlThe URL of the Contentsquare platform.
Default value: https://api.csq.io
--verboseDisplay verbose output

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.

    Terminal window
    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:

    Terminal window
    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.

    Terminal window
    npx contentsquare-cli upload-sourcemaps