Urql: React native release error

[cipriancaba]

I've started using urql on a react-native project, that's implemented with Amplify.. All went pretty smooth, we have the types and hooks generated automatically, didn't ran into any major issues

However, when we create a release version of the app, we have these really weird errors (runs perfectly fine in debug mode) on iOS

I am going crazy over this and have tried different variations, different exchange version, but still failing. While I know that this information might be scarce it would be really helpful if you could maybe point me in the right direction for tracking this behaviour.

I've added the generated queries here https://gist.github.com/cipriancaba/1f543a10f3c53024746e70e51ba875d8

Much appreciated and thanks for the amazing work on the project

On the older version of urql this was the error:

error][tid:com.facebook.react.JavaScript] RangeError: Maximum call stack size exceeded.

This error is located at:
    in Unknown
    in Unknown
    in Unknown
    in Unknown
    in Unknown
    in Unknown
    in Unknown
    in RNCSafeAreaView
    in Unknown
    in Unknown
    in Unknown
    in RCTView
    in A
    in Unknown
    in RCTView
    in RCTView
    in x

On the latest version it's this

[error][tid:com.facebook.react.JavaScript] TypeError: s is not a function. (In 's(wonka.filter(_ref2)(f))', 's' is undefined)

This error is located at:
    in Unknown
    in Unknown
    in Unknown
    in Unknown
    in Unknown
    in Unknown
    in Unknown
    in RNCSafeAreaView
    in Unknown
    in Unknown
    in Unknown
    in RCTView
    in A
    in b
    in RCTView
    in RCTView
    in x

urql version & exchanges:

"@urql/exchange-graphcache": "^2.4.2",
"@urql/exchange-persisted-fetch": "^1.0.0",
"@urql/exchange-retry": "^0.1.7",
"urql": "^1.9.7",

const client = React.useMemo(
    () =>
      createClient({
        url: awsconfig.aws_appsync_graphqlEndpoint,
        fetchOptions: () => {
          // console.log('Fetching options with access token', auth.accessToken)
          return {
            headers: {
              authorization: auth.accessToken || '',
            },
          }
        },
        exchanges: [
          devtoolsExchange,
          dedupExchange,
          cacheExchange({
            keys: {
              GoalsProgress: () => null,
              GoalMaxValue: () => null,
              GoalMinValue: () => null,
              GoalMinMaxValue: () => null,
              GoalPercentageValue: () => null,
              GoalHydrationResultDetails: () => null,
              GoalHydrationResult: () => null,
              GoalStandingResultDetails: () => null,
              GoalStandingResult: () => null,
              GoalFoodResultDetails: () => null,
              GoalFoodResult: () => null,
              GoalExerciseResultDetails: () => null,
              GoalExerciseResult: () => null,
              GetProgramDetailsByDateResult: () => null,
            },
          }),
          retryExchange({
            initialDelayMs: 1000,
            maxDelayMs: 15000,
            randomDelay: true,
            maxNumberAttempts: 2,
            retryIf: err => !!err?.networkError,
          }),
          persistedFetchExchange,
          fetchExchange,
        ] as Exchange[],
      }),
    [auth.accessToken]
  )

Steps to reproduce

1. Create a release build in iOS
2. Use a simple query like the one below:

const [
    userSubscriptionsQuery,
    refetchUserSubscriptions,
  ] = useListUserSubscriptionsByUserQuery({
    variables: {
      userId,
      limit: 1000,
    },
    requestPolicy: 'network-only',
  })

Expected behaviour
Query runs fine

Actual behaviour
App crashes with limited info due to release optimisations

[kitten]

Do you have a more complete call stack and maybe a snippet of where this issue occurred? We had a similar issue at some point where Metro Bundler wasn’t able to strip out certain values and hoist them in a specific context https://github.com/FormidableLabs/urql/issues/736

Edit: Also to do our due diligence here, can you check a quick yarn list --pattern urql and yarn list wonka please? On upgrades the @urql/core and wonka packages sometimes get temporarily duplicated, and running the yarn-deduplicate CLI by atlassian will dedupe them

[cipriancaba]

Here is the info:

yarn list --pattern "urql"
yarn list v1.19.0
├─ @graphql-codegen/[email protected]
├─ @urql/[email protected]
├─ @urql/[email protected]
├─ @urql/[email protected]
├─ @urql/[email protected]
├─ @urql/[email protected]
├─ @urql/[email protected]
└─ [email protected]

yarn list wonka
yarn list v1.19.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ [email protected]

In terms of usage, I basically have a context that contains the provider

return (
    <ALAuthContext.Provider value={value}>
      <Provider value={client}>{children}</Provider>
    </ALAuthContext.Provider>
  )

And the value is the memo-ed value shown on top.. This doesn't happen when initialising the client, but it does happen on this specific query that lives in a child context as well.

Unfortunately I cannot really access more of the stack trace in production mode and it works fine in debug. I basically identified the problematic query after commenting and uncommenting most of the app

[kitten]

All we'd really need is a stack of your output and the affected code (where the undefined issue is occurin), which you can still obtain: https://sportsbet.tech/demystifying-react-native-stack-traces-in-production-8f862da6f33
Otherwise it's hard to narrow down what's causing this in our bundle, since names aren't stable after minification

[cipriancaba]

Ok, so the new error seems to be related to persisted fetch exchange.. Gonna remove that for now:

```life-v2/namespaces/firebase:fetch.
2020-05-24 17:58:35.262 [error][tid:com.facebook.react.JavaScript] TypeError: d is not a function. (In 'd(wonka.filter(_ref2)(h))', 'd' is undefined)

 persistedFetchExchange = function persistedFetchExchange(a) {
return function (b) {
  var e,
      d = b.forward,
      c = b.dispatchDebug;
  a || (a = {});
  e = true;
  return function (b) {
    var k,
        h = wonka.share(b);
    b = wonka.mergeMap(function (b) {
      var g,
          d = b.key,
          k = wonka.filter(function (a) {
        return "teardown" === a.operationName && a.key === d;
      })(h),
          f = internal.makeFetchBody(b);

      if (!e) {
        return wonka.takeUntil(k)(makePersistedFetchSource(b, f, c, false));
      }

      g = f.query;
      return wonka.takeUntil(k)(wonka.mergeMap(function (a) {
        return a.error && isPersistedUnsupported(a.error) ? (f.query = g, f.extensions = undefined, e = false, makePersistedFetchSource(b, f, c, false)) : a.error && isPersistedMiss(a.error) ? (f.query = g, makePersistedFetchSource(b, f, c, false)) : wonka.fromValue(a);
      })(wonka.mergeMap(function (d) {
        f.query = undefined;
        f.extensions = {
          persistedQuery: {
            version: 1,
            sha256Hash: d
          }
        };
        return makePersistedFetchSource(b, f, c, !!a.preferGetForPersistedQueries);
      })(wonka.fromPromise(hash(g)))));
    })(wonka.filter(_ref)(h));
    k = d(wonka.filter(_ref2)(h));
    return wonka.merge([b, k]);
  };
};

},
```

[cipriancaba]

Removed that and apparently the old error is gone error][tid:com.facebook.react.JavaScript] RangeError: Maximum call stack size exceeded.

So probably #736 sorted that

Thanks for the help 🥇

[kitten]

Ok, I can explain the persistedFetchExchange error. You need to call it or call it with options: https://github.com/FormidableLabs/urql/blob/master/exchanges/persisted-fetch/CHANGELOG.md#100
I think we forgot to adjust our README for it but starting with v1.0.0 it accepts options now, which should also fail in development then

[cipriancaba]

I think I got overexcited and added the persistedFetchExchange as part of the urql@core upgrade and didn't really test in dev assuming it works..

However, did add the options and the error is now The window.crypto.subtle API is not available. This is an unexpected error. Please report it by filing a GitHub Issue. which I assume makes sense and is expected

[kitten]

@cipriancaba That's interesting! Looks like RN doesn't support the crypto APIs as we expected. We'll look into that.
Until then, is the issue otherwise resolved?

[cipriancaba]

I would say so, yes.. I removed persistedFetchExchange and seems fine. Thanks for the help

[olistic]

I've been debugging a RangeError: Maximum call stack size exceeded. error in the release version of my RN app (everything works well in debug), until I narrowed it down to a mutation I'm trying to execute and found this issue.

@kitten Here is the output of some of the things you requested above:

$ yarn list --pattern urql 
yarn list v1.19.1
├─ @urql/[email protected]
├─ @urql/[email protected]
├─ @urql/[email protected]
├─ @urql/[email protected]
├─ @urql/[email protected]
└─ [email protected]

$ yarn list --pattern wonka
yarn list v1.19.1
└─ [email protected]

(For the rich stack trace I'll need some time to set up the error handling as per the article you linked; will post it here once I have it.)

Some more info:

• I'm have a monorepo with this RN app and a CRA app using the same urql stack (except I'm not using the multipart fetch exchange in CRA). The CRA app runs flawlessly, as well as the debug version of the RN app.
• I'm using the following exchanges in RN:

import { dedupExchange } from 'urql';
import { multipartFetchExchange } from '@urql/exchange-multipart-fetch';

import cacheExchange from './cache'; // <- This is a `graph-cache`.

const exchanges = [dedupExchange, cacheExchange, multipartFetchExchange];

export default exchanges;

Please let me know if there's any other piece of info that would be useful to help troubleshooting this.

[kitten]

@olistic In some DMs I've been sent some stack traces and bundled & minified source code. What I know so far is that uglify-es, which React Native still uses by default, is running into a minification bug. Specifically in one section it transpiles arr.forEach((function a(b) { b(/* ... */) })) to arr.forEach(function a(b) { a(/* ... */) }), which leads to the stack trace error.

I'm trying to bundle wonka a little differently to avoid this issue. If you could test for me whether [email protected] fixes this for you, that'd be greatly appreciated :heart: https://github.com/kitten/wonka/commit/9c5bb1e8859e55fdbad391e6cd40a2dbfd9a8aa5

[olistic]

@kitten I can confirm [email protected] solves the issue for me, thanks!