Blocks the entire UI

[DianaLaa]

Steps to reproduce

function* watchStuff() {
  while (true) {
    try {
      console.log('watchStuff');
      yield call(delay, 1000);
    } catch (err) {
      console.log('error', err);
    }
  }
}

export default function* MySaga() {
  console.log('MySaga');
  // Execute in parallel
  yield all([
    fork(watchStuff),
    // fork(morestuffhere)
  ]);
};

const sagaMiddleware = createSagaMiddleware();
const middlewares = [ authMiddleware, sagaMiddleware ];

export const store = createStore(reducer,
  compose(
    applyMiddleware(...middlewares),
    offline({
      ...offlineConfig
    })
  )
);

sagaMiddleware.run(MySaga);

Description of the bug/issue

No matter what I do, my UI totally freezes up.

Steps to reproduce the bug/issue

See above.

Actual results

UI freezes up completely.

The Expected results

For starters, just log something every second without freezing up the UI.

Environment information

"@expo/samples": "2.1.1",
"@redux-offline/redux-offline": "^2.5.1",
"babel-plugin-inline-dotenv": "^1.3.3",
"dotenv": "^8.0.0",
"expo": "^32.0.0",
"moment": "^2.24.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-masked-text": "^1.12.0",
"react-native-paper": "^2.15.0",
"react-native-swipeable-row": "^0.8.1",
"react-navigation": "^3.8.1",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-persist": "^5.10.0",
"redux-saga": "^1.0.5",
"uuid": "^3.3.2"

[DianaLaa]

I've been going back and forth with fork, yield, all, spawn, etcetera, but no matter what I try, my UI totally freezes up. Can someone help me see what I'm missing?

[Andarist]

That might be some environmental issue with your RN setup. You’d have to share your repoaitory so I could take a look at it, without that it’s hard for me to determine what might be the problem

[DianaLaa]

Okay, can't share my repo but in that case: Can you confirm that what I have here will run the watchers in parallel and nonblocking? Is the usage of all([...]) okay? Should I use fork or spawn? Thank you in advance.

[Andarist]

Is the usage of all([...]) okay?

Yes.

Should I use fork or spawn?

Depends on the use case, I'm generally in favour of using plain fork. They both are pretty similar, only difference is how they propagate errors & cancellations (spawn breaks the chain of propagation, so in a case of error thrown inside it won't kill its parent, but that's not necessarily a good thing because uncaught errors can have unpredictable outcomes for your app - so IMHO it's better to let the app crash and fix the error ASAP)

One extra thing - in v1 you should use yield delay(1000); over yield call(delay, 1000);. Maybe you haven't noticed a warning in the console about it?

[DianaLaa]

One extra thing - in v1 you should use yield delay(1000); over yield call(delay, 1000);. Maybe you haven't noticed a warning in the console about it?

Well, that's part of the problem at least. Delay couldn't be found.

changed

import { delay } from 'redux-saga';

to

import { delay } from 'redux-saga/effects';

Weirdly, no errors were showing at all..
Thank you for the clarification on spawn and fork.

[Andarist]

This has to be some problem with ur setup, we provide console warns (or erros? Not sure) for this exact problem as this has changed betwwen v0.x and v1. Has your issue been resolved completely by fixing this?

[DianaLaa]

I've been fiddling and it seems that indeed: A) I get not console warnings or errors and B) if I fix these errors the UI doesn't hang anymore ;)

I'll double-check my setup. Note, when I attach a debugger, I do hit the exceptions. But without a debugger attached, I don't get warnings or errors in the Android emulator. Could be because I'm using spawn?

[ThAlmighty]

Thats right, spawn swallows all the errors generated inside, which can be quite usefull for piece of code that are allowed to break. For example, we specifically chose to spawn our tracking saga fo r this reason since tracking data is optional and should never crash the client.

To have more control over debugging. It might be advisable to do your own try/catch inside the spawned process in which you can log the error.

Nice to see you're into React/Redux/Javascript nowadays!

[Andarist]

Have you been able to fix your issue? If not can you provide more info that could allow helping you to resolve it?

[DianaLaa]

Thank you for asking. I didn't get any errors when the saga had a JavaScript error. Instead, the app slowed down or was hanging. I fixed the errors in the saga, but haven't found a way to show the JS error from the saga itself.

[jonathanstiansen]

@DianaKoenraadt I had the same experience, the rootError didn't throw - the app's UI just froze. Oddly gestures still worked but nothing else. Couldn't find any way to make it throw the error in any way I could see, or report on it

[lucasfeijo]

@jonathanstiansen I suffer from the same issue you described, and it's very difficult to figure out where the problem is coming from.