Error and crash reporting

  • Latest Dynatrace
  • Explanation
  • 1-min read
  • Published Jan 12, 2025

Dynatrace provides comprehensive error and crash reporting for React Native applications. The plugin automatically captures unhandled exceptions and platform-level crashes. You can also manually report errors and exceptions with additional context.

Automatic crash reporting

When you configure the Dynatrace React Native plugin, automatic crash reporting is enabled by default. The plugin captures crashes from the native platforms (Android and iOS) as well as JavaScript errors.

How it works

The plugin registers error handlers to capture:

  • Unhandled JavaScript errors—fatal errors that crash the JavaScript runtime.
  • Native crashes—platform-level crashes from Android and iOS.
  • React Native errors—errors from the React Native framework.

Disable automatic crash reporting

Automatic crash reporting is enabled by default. If you prefer to handle error reporting manually, you can disable it in the configuration.

To disable automatic crash reporting, set reportCrash to false in your dynatrace.config.js:

Android:

android: {
  config: `
    dynatrace {
      configurations {
        defaultConfig {
          crashReporting false
        }
      }
    }
  `
}

iOS:

ios: {
  config: `
  <key>DTXCrashReportingEnabled</key>
  <false/>
  `
}

Or in case of manual startup:

import { Dynatrace, ConfigurationBuilder } from '@dynatrace/react-native-plugin';


const configurationBuilder = new ConfigurationBuilder("beaconUrl", "applicationId");
configurationBuilder.withCrashReporting(false);


await Dynatrace.start(configurationBuilder.buildConfiguration());

Error handler configuration

The plugin includes an automatic error handler for JavaScript errors. You can configure its behavior in dynatrace.config.js:

module.exports = {
  react: {
    errorHandler: {
      enabled: true,
      reportFatalErrorAsCrash: true
    }
  }
};

Configuration options:

  • enabled: Activates the error/crash handler (default: true).
  • reportFatalErrorAsCrash: Report fatal/unhandled errors as crashes instead of errors (default: true).

If enabled is set to false, the value of reportFatalErrorAsCrash is not considered as the error handler will not be started. When reportFatalErrorAsCrash is set to false, fatal errors are reported as errors and the current session remains open.

ANR reporting

Application Not Responding (ANR) errors occur when the main thread is blocked for too long. Dynatrace automatically captures ANR events.

What is captured

ANR events indicate that your app's UI became unresponsive, causing user frustration.

Configuration

ANR reporting is enabled by default. To disable it:

Android:

android: {
  config: `
    dynatrace {
      configurations {
        defaultConfig {
          anrReporting false
        }
      }
    }
  `
}

iOS:

ios: {
  config: `
  <key>DTXANRReportingEnabled</key>
  <false/>
  `
}

ANR events are only sent if the user restarts the app within 10 minutes of the ANR occurring. On Android, ANR reporting requires Android 11 or higher.

Manual error reporting

For errors that you handle in your code but still want to report to Dynatrace, use the manual reporting API.

Send exception event

The sendExceptionEvent() method provides a structured way to report exceptions with additional context and custom properties using the ExceptionEventData class.

import { Dynatrace, ExceptionEventData } from '@dynatrace/react-native-plugin';


try {
  // Code that may throw an error
  throw new Error('Something went wrong');
} catch (error) {
  if (error instanceof Error) {
    const exceptionEventData = new ExceptionEventData(error)
      .addEventProperty('event_properties.context', 'data_processing')
      .addEventProperty('event_properties.user_action', 'submit_form');
    Dynatrace.sendExceptionEvent(exceptionEventData);
  }
}

Parameters:

  • error: The Error object containing exception information (required).

Add custom properties

Add context to help with debugging:

import { Dynatrace, ExceptionEventData } from '@dynatrace/react-native-plugin';


async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) throw new Error('Fetch failed');
  } catch (error) {
    if (error instanceof Error) {
      const exceptionEventData = new ExceptionEventData(error)
        .addEventProperty('event_properties.operation', 'fetch_user_data')
        .addEventProperty('event_properties.user_id', userId)
        .addEventProperty('event_properties.retry_count', retryCount);
      Dynatrace.sendExceptionEvent(exceptionEventData);
    }
  }
}
Related tags
Digital Experience