The efficient way to deal with React Native Crashes

what you mean to crushed, why you coming fast

1. Root Cause

Hey y’all! I want to write about probably one of the most virgin area in mobile development is the crash management. The reason of this is developers most of time can’t catch them without put extra effort even tough try go deeper probably faces fuzzy symbols and error messages which never seen before, because all of them is the outlets of operating system (Android, iOS) or Native Side (Objective-C, Java) when the consider writing javascript in React Native is seems completely meaningless or at the best case you get

{MyPreciousApp}.app/main.jsbundle:42:71478)

which means crash occurred in main.js bundle at 42th line and 71478th letter lmao :d to sum up all those clues in my experiences React Native developers only able to investigate with Crashlytics tools (Appcenter, firebase etc.) which completely insufficient in default configuration.

2. Problems

Before write the code section, its needed to determine outcome problems, unmanaged crashes led two main problem:

2.1. Lack of evidence for trace a crash

Problem: Even got comprehensible crash message its could be occurred in a certain conditions (service responses, navigation history, false input values and many more) so developer may not find proper conditions.

Our Incident: We are able to reach crash logs but pursued to same process without any crash so is the reason to needed to all customer information (navigation history, services responses etc.) in log.

2.2. Prioritize and personalize anonymous crashes

Problem: When customer services get ticket from a customer about the crash you have to able to prioritize and reach a specific certain custom crash log.

Our Incident: When get customer ticket about crash, you need to able to access specific crash log so at the beginning we couldn’t, we’ve been tried run out device model, date and time but it wasn’t efficient way.

3. Solutions

At the first, app need to catch catch properly after research i found this package:

React Native Error Boundary: Its seems good to catch React Native crash and render fall-back component for crash. After review source code noticed that its catch with only using componentDidCatch method and its not convinced me and i found another package:

React Native Exception Handler: This package can catch even native crashes with native support. On JS side different from boundary packet its use Node global exception handler.

I decided to merge these two package as CrashProvider.

import ErrorBoundary from 'react-native-error-boundary';
import {setJSExceptionHandler} from 'react-native-exception-handler';

export const CrashProvider: FunctionComponent<PropsWithChildren<CrashProviderPropsType>> = inProps => {
  const props = inProps as PropsWithChildren<CrashProviderDefaultPropsType>;
  const crashId = createUniqueId(); // Create random 6 digit to show customer

  const errorHandler = (err: Error, isFatal: boolean, type: string) => {
    sendCrashReport(err, isFatal, type, crashId); // Create log to Appcenter
  };

  setJSExceptionHandler(errorHandler, false, 'JS-Exception-Handler');
  setNativeExceptionHandler(errorHandler, true, 'Native-Exception-Handler');

  return (
    <ErrorBoundary
      onError={(error: Error, stackTrace: string) => sendCrashReport(error, true, stackTrace, crashId)}
      FallbackComponent={() => CrashFallbackScreen({errorCode: crashId})}
    >
      <>{props.children}</>
    </ErrorBoundary>
  );
};

For a now, we catches to crashes and send report to Appcenter — with sendCrashReport function, didn’t attached now. So we solved our second problem, we shows screen like that

In Turkish Unknown Error occurred and trace code

So customers can reach us with specific code then find our team can easily find related logs.

By the way we solved our second problem, we show crash code and catch crashes then send them to Appcenter event logs.

I thought to need these information to re-procedure exact crash:

• All navigation route history
• Crashed screen
• All api requests and responses history
• Fatal status
• UniqueId

I’ve able to access all those but all api requests and responses and I used to react-native-network-logger package which already installed on project for debugging process.

import Crashanalytics, {ErrorAttachmentLog, ExceptionModel} from 'appcenter-crashes';
import {rootNavigationRef} from 'MY-NAVIGATION-PAGE/NAVIGATION';
import {getRequests} from 'react-native-network-logger';

const createUniqueId = () => {
  return new Date(Math.ceil(Math.random() * 1e13)).valueOf().toString(36);
};

const sendCrashReport = (
  err: Error | undefined,
  isFatal: boolean | undefined,
  type: string | undefined,
  crashId?: string | undefined,
  payload?: object | undefined,
) => {

  if (!crashId) {
    // If uniqueId lack of presence we are adding here
    crashId = createUniqueId();
  }

  const exceptionModel = ExceptionModel.createFromError(err ?? new Error('New crash occured.'));

  const routeAllHistory = rootNavigationRef.current?.getState();
  const crashPage = rootNavigationRef.current?.getCurrentRoute();
  const apiHistory = getRequests();

  crashId = crashId ?? createUniqueId();

  const attachmentRouteAllHistory = ErrorAttachmentLog.attachmentWithText(
    JSON.stringify(routeAllHistory, null, 2),
    'routeAllHistory.txt',
  );
  const attachmentCrashPage = ErrorAttachmentLog.attachmentWithText(JSON.stringify(crashPage), 'crashPage.txt');
  const attachmentApiHistory = ErrorAttachmentLog.attachmentWithText(
    JSON.stringify(apiHistory, null, 2),
    'apiHistory.txt',
  );
  const attachmentType = ErrorAttachmentLog.attachmentWithText(JSON.stringify(type, null, 2), 'apiHistory.txt');

  const fatalStatus = ErrorAttachmentLog.attachmentWithText(JSON.stringify(isFatal), 'fatalStatus.txt');

  const crashUniqueId = ErrorAttachmentLog.attachmentWithText(crashId, 'unieuqId.txt');

  const attachments = [
    attachmentRouteAllHistory,
    attachmentCrashPage,
    attachmentApiHistory,
    fatalStatus,
    attachmentType,
    crashUniqueId,
  ];

  Crashanalytics.trackError(exceptionModel, undefined, attachments);
};

export {createUniqueId, sendCrashReport};

and we get detailed log from appcenter

Appcenter Error Log Header

Appcenter Error Details with Our Custom Informations

Happy end, with help this provider we easily accessed and deal with crashes.

P.S. For native crashes its not working as expecting but js crashes is the majority so its worth it.

Also I created custom Appcenter dashboard to track crashes which I’ll will reale as open source soon after adding some features and developers will can be access easily crash code and other attachments.