Continuous crashes on React Native Android

Summary: I'm using React Native and Expo to create an app which connects to a GraphQL server using Apollo. I was using apollo-cache-hermes, but it continually crashed the application as soon as the first GraphQL query was made. It took me a while to track down apollo-cache-hermes as the culprit, but once I did I replaced it with apollo-cache-inmemory and the app worked as expected. This behavior was repeated on two Android emulators (Android Studio and Genymotion) and an Android device.

Incidentally, it runs perfectly on iOS.

Reproduction Steps:

Create a new expo project
Wire it up to connect to a GraphQL server using apollo-cache-hermes
Run in an Android emulator. Observe it crash.
Replace apollo-cache-hermes with apollo-cache-inmemory
Run in an Android emulator. Observe it work as expected.

Link to a demo repo: https://github.com/alexanderson1993/apollo-cache-hermes-crash
Link to an expo application: https://expo.io/@alexanderson1993/apollo-cache-hermes-crash

Expected Behavior:

Retrieve data through Apollo when GraphQL queries are performed.

Actual Behavior:

The app crashes whenever a GraphQL query is made.

I'm sorry for the delay on this issue. Working on getting my machine set up for android again (I've gone and goofed my SDK/NDK somewhere)

In the meantime, do you have a stack trace handy—or remember what error was being thrown?

I'm afraid I'm not technically savvy enough to be able to pull up a stack trace or even the error thrown. The app crashed immediately after the request was made, and I was only able to track down apollo-cache-hermes as the culprit after a lot of trial and error.

Alright, I'm able to reproduce this one! Not sure exactly what's going on, yet. Here's what I know so far:

The app is running out of memory and being killed by the OS
It occurs before apollo client even initiates the network request (the configured apollo link is not called)
None of Hermes' verbose logging triggers before the OOM occurs

Actually, interestingly, the OOM occurs sometime before Hermes' query interface is called.

I have a hunch that it's similar to zloirock/core-js#368, but can't prove that yet

Aha! Nope, it is getting into Hermes' read call, somewhat. I've narrowed it down to this loop:

apollo-cache-hermes/src/context/QueryInfo.ts

Line 85 in 61b59ad

for (const name of this.variables) {

It iterates forever for your query (when consuming an empty set), emitting undefined until OOM. Might be a tslib bug, or we might be passing unexpected data to it

Oof, it may be a tslib bug. Just filed microsoft/tslib#59 to get some more eyes on it. Might also be that react-native android is incorrectly polyfilling Set/Map...

Aha, nope, it's a RN packager issue: facebook/react-native#4676

Alright! @alexanderson1993, the fix for your situation is to add the following to index.js:

import 'core-js/es6/symbol';
import 'core-js/es6/set';
import 'core-js/es6/map';

The root cause here is that RN fails to correctly polyfill Symbol in the Android environment (the issue linked above). So, we explicitly load that polyfill, and also Set/Map for good measure, as Hermes also relies on those.

I'm going to see if I can have Hermes detect this case and throw a helpful error…

This is fabulous! Many thanks!

Hopefully this error helps people from having to go down this rabbit hole again:

Alright! @alexanderson1993, the fix for your situation is to add the following to index.js:
import 'core-js/es6/symbol';
import 'core-js/es6/set';
import 'core-js/es6/map';
The root cause here is that RN fails to correctly polyfill Symbol in the Android environment (the issue linked above). So, we explicitly load that polyfill, and also Set/Map for good measure, as Hermes also relies on those.

I'm going to see if I can have Hermes detect this case and throw a helpful error…

Thanks @nevir it worked like a charm