SyncQueue busy with react-native-webview sharedCookies

[dazlious]

Description

Hey 👋

I did not want to create a bug report for this as I am maybe using it wrong. At least I am unable to find a solution for my problem.

I am getting stuck with

The app is busy with the following tasks:
• There are 2 work items pending on the dispatch queue: "Main Queue (<OS_dispatch_queue_main: com.apple.main-thread>)".
• Run loop "Main Run Loop" is awake.

I tried hundreds of things already, but I cannot debug the underlying issue for a specific use-case. Additionally I cannot turn off synchronization for this (it simply does not do anything).

Testing the following code:

const authenticate = async () => {
  await device.openURL({ url: 'https://www.example.com/login' });
  
  // type in user and password and hit signup

  // some magic happens now that calls our api which sits on api.example.com
  // and sets a cookie which is stored in our application
  // this cookie is later important for the login inside the webview

  // await some element after login is successful
};


describe('Test Suite', () => {
  beforeAll(async () => {
    // start without data
    await device.launchApp({
      delete: true,
    });
  });

  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('Should show private url', async () => {
    await authenticate();

    // it does not matter if I use launchApp, openUrl or navigate manually to my webview
    await device.launchApp({
      newInstance: true,
      url: 'https://www.example.com/some/route/that/needs/authorization',
    });

    console.log("You will never be able to read this :(");
  });
});

Right after opening the Webview the sync dies and enters an infinite loop. With Proxyman, Charles, Safari Inspector, I cannot see ANY pending requests or recurring timers. Also I overwrote setTimeout and setInterval to see if there is some native events going on.

import WebView from 'react-native-webview';

const App = () => (<WebView sharedCookiesEnabled source={{uri: "URL_HERE" }} />)

As our api is on a subdomain (api.example.com), it is important that the sharedCookiesEnabled is set to true. All webviews (no matter which urls are visible) stop working and are being blocked by a busy sync queue.

Do you have any idea how I can find out which event is put onto the queue?

I read this: https://wix.github.io/Detox/docs/troubleshooting/synchronization/
I already tried everything mentioned there and further added log level trace, but I cannot seem to find anything useful.

Your environment

Detox version: 20.20.0
React Native version: 0.72.6
Node version: 18.12.0
Device model: Simulator iPhone 15 Pro
OS: 17.4
Test-runner (select one): jest

[asafkorem]

@dazlious, I suspect the issue stems from the fact that you're not actually opening an react-native-webview but rather the iOS's webview (i.e. Safari). Your app can't handle this URL itself (since it isn't on its URL scheme), this results in Detox losing control of your app to the iOS browser.

[asafkorem]

React Native's Linking guide may help here.

[asafkorem]

If you encounter main run-loop synchronization issues despite what I've mentioned, you can try passing this experimental and unofficial launch-arg in your launchApp arguments: DTXDisableMainRunLoopSync=true.

[dazlious]

If you encounter main run-loop synchronization issues despite what I've mentioned, you can try passing this experimental and unofficial launch-arg in your launchApp arguments: DTXDisableMainRunLoopSync=true.

That is a good to know - Will try that if nothing works.

@dazlious, I suspect the issue stems from the fact that you're not actually opening an react-native-webview but rather the iOS's webview (i.e. Safari). Your app can't handle this URL itself (since it isn't on its URL scheme), this results in Detox losing control of your app to the iOS browser.

I would tend to agree, IF there was not the issue that it does work without that sharedCookies flag.
Let's say I visit https://www.example.com/imprint which is a publicly available React SPA that does fetch the user/cart by a cookie on that subdomain (https://api.example.com). It does not work with that cookie, but without it.

To me that is proof that Detox is not loosing track, as with and without cookie behaves different

[asafkorem]

So to me it seems like you have two issues here:

1. You open the iOS webview and not the App's webview.
2. Your main run-loop is busy due to the sharedCookies

[dazlious]

url: 'https://www.example.com/some/route/that/needs/authorization',

1. I get that point - but I not only tried the launchAppArgs url, and the device.openUrl, but also tapping through manually to the Component that is rendering from react-native-webview.
2. Is there any debugging I can do to see what is being added to the main run-loop in native code? I would be super curious to why it adds something. Furthermore on mounting it adds something to that main loop, when I unmount that webview, the item stays on that queue and blocks it further - which is the main part why I want to fix it

Btw, I appreciate your response a lot 🙇