Firebase-js-sdk: Setting a timer for a long period of time, i.e. multiple minutes

[saeedhei]

I want to use firebase auth with react native for Login and Signup but I got a yellow error:
Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See (https://github.com/facebook/react-native/issues/12981) for more info. (Saw setTimeout with duration 111862ms)

How Can I Fix That?
I don't want to ignore that, I want to understand this error and solve that with the best and Standard way.
And This is my Code:

 export default class Login extends Component {
        constructor(props) {
            super(props)
            this.state = {
                email: '',
                password: '',
                response: ''
            }
            this.signUp = this.signUp.bind(this)
            this.login = this.login.bind(this)
        }
        async signUp() {
            try {
                await firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
                this.setState({
                    response: 'Account Created!'
                })
                setTimeout(() => {
                    this.props.navigator.push({
                        id: 'App'
                    })
                }, 1500)
            } catch (error) {
                this.setState({
                    response: error.toString()
                })
            }
        }
        async login() {
            try {
                await firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
                this.setState({
                    response: 'user login in'
                })
                setTimeout(() => {
                    this.props.navigator.push({
                        id: 'App'
                    })
                })

            } catch (error) {
                this.setState({
                    response: error.toString()
                })
            }

        }
        render() {
            return (
                <View style={styles.container}>
                    <View style={styles.containerInputes}>
                        <TextInput
                            placeholderTextColor="gray"
                            placeholder="Email"
                            style={styles.inputText}
                          //  onChangeText={(email) => this.setState({ email })}
                            onChangeText={(email) => {console.log(email);}}
                        />
                        <TextInput
                            placeholderTextColor="gray"
                            placeholder="Password"
                            style={styles.inputText}
                            password={true}
                            onChangeText={(password) => this.setState({ password })}
                        />
                    </View>
                    <TouchableHighlight
                        onPress={this.login}
                        style={[styles.loginButton, styles.button]}
                    >
                        <Text
                            style={styles.textButton}
                        >Login</Text>
                    </TouchableHighlight>
                    <TouchableHighlight
                        onPress={this.signUp}
                        style={[styles.loginButton, styles.button]}
                    >
                        <Text
                            style={styles.textButton}
                        >Signup</Text>
                    </TouchableHighlight>
                </View>
            )
        }
    }

I Asked From Stackoverflow too, Link

[google-oss-bot]

Hey there! I couldn't figure out what this issue is about, so I've labeled it for a human to triage. Hang tight.

[google-oss-bot]

Hmmm this issue does not seem to follow the issue template. Make sure you provide all the required information.

[bojeil-google]

I assume you are including real-time database in your code?
We pro-actively refresh the token when database or other Firebase services are included. The token typically has a lifetime of one hour. We would need to use some other native utility or external dependency to replace the underlying setTimeout usage for this. This will take some time to implement. It seems benign for now so I see this as a low priority.

[saeedhei]

Yeah I'm using real-time database and when I added firebase to my project, I got This

Thank you @bojeil-google

[justColbs]

@bojeil-google Could you please update here when this has been resolved? Thank you!

[andy-awsdev7]

constructor() {
super();
console.ignoredYellowBox = [
'Setting a timer'
];
}

[liketurbo]

I wonder, this issue show up only in Android, and maybe it's caused by using react-navigator, I say this, because once I all repeat from tutorial and tutor doesn't get this error and only difference between our works it's I use react-navigator instead react-native-router-flux and I work with Android instead IOS

[liketurbo]

Maybe, we could throw this code below in to the project, and reset all setTimeout ?

const highestTimeoutId = setTimeout(() => ';');
for (let i = 0; i < highestTimeoutId; i++) {
    clearTimeout(i); 
}
// source: https://stackoverflow.com/questions/3847121/how-can-i-disable-all-settimeout-events

[saeedhei]

When will This issue be resolved?

[bojeil-google]

There are bunch of high priority features and bug fixes in the pipeline. We'll switch to this issue immediately after. It's been labeled as a P3 issue which is appropriate for its severity.

[mutazmq]

Hello guys, any update on this issue please? I have not been able to use Firebase on Android because of it.

[mopx]

Using the native sdk instead of the js/web sdk fixes the problem.

https://github.com/invertase/react-native-firebase

It involves a lot more configuration and it won’t work with Expo tho.

[bojeil-google]

My understanding is that this is not a blocking issue and can be suppressed.
I will try to experiment with a quick solution using react-native-background-timer and report back.

[bojeil-google]

Ok, I tried testing this issue with react native 0.48.4 and firebase 4.6.2 using an Android emulator (API 25) and I was not able to replicate this. I am not getting the warning at all.

[Narutuffy]

I am still getting this warning

[bojeil-google]

Can you provide more detailed information about your environment to facilitate replication?

[bogannathan]

I use Expo and get this error. Perhaps it is specific to Expo, which may be
why you did not get an error on your emulator.

On Tue, Nov 28, 2017 at 2:38 AM, bojeil-google [e-mail]
wrote:

Can you provide more detailed information about your environment to
facilitate replication?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-js-sdk/issues/97#issuecomment-347438764,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AdTknxE4yq8eD5wXOenm_14wg7o8KCJ1ks5s67h7gaJpZM4OYphr
.

[bojeil-google]

I also used expo version ^21.0.0.

[Deniscapp]

Getting the same warning here (not using Expo)

[kay-es]

expo ^23.0.0 and getting this error on emulator and android device

[eladcandroid]

expo ^23.0.0.. same warning

[pallavbakshi]

I am not using expo and directly debugging it on the mobile but still I am getting the warning.

[bojeil-google]

Ok, so for some unknown reason, I was not able to reproduce this on my mac laptop. However, I was able to reproduce it on my Linux workstation.

Overall, I think this is an issue with react-native underlying implementation of setTimeout in Android and I think the long term solution would be a fix on that end.

That said, I investigated adding a third party dependency for background react native timers but there seems to be issues with it and it requires additional setup steps for it to work. So I am not a fan of that.

I have found and successfully tested a workaround for this using multi-step short duration setTimeouts but this will only fix the issue from the auth side of things. Database also uses long duration setTimeouts too. So the firebase core should provide this common implementation.

[wcandillon]

Does the suggested fix for https://github.com/firebase/firebase-js-sdk/issues/283 also fixes this issue?

[cmromeo]

I also experienced this issue: Expo running on Android, coding on Mac Sierra 10.13.1. Used the following:

"expo": "^23.0.4",
"firebase": "^4.8.0",
"react": "16.0.0",
"react-native": "0.50.3",
"react-navigation": "^1.0.0-beta.21",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"

[jsappme]

Same thing here, please this issue should have a higher priority. Many many people are bothered by this useless warning.

[fabricehong]

Same problem in my side. Feels like Firebase web is not recommended to be used with react-native and that we should use https://rnfirebase.io/ instead :/ This is too bad

[jsappme]

This is too bad for all the people using Expo.

On 5 Jan 2018 02:47, "Fabrice" [e-mail] wrote:

Same problem in my side. Feels like Firebase web is not recommended to be
used with react-native and that we should use https://rnfirebase.io/
instead :/ This is too bad

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/firebase/firebase-js-sdk/issues/97#issuecomment-355502090,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AM0R9QWzS378U3cfrMCRctOIt2H1F5xQks5tHeGTgaJpZM4OYphr
.

[alican-k]

Fyi, In my case, this is not just a warning that annoys but it is also a blocking issue because it logs infinitely to the console when it is in the remote debug mode. I will try https://rnfirebase.io

[gnaresh]

For those who got this error using Expo. Try to change the file JSTimers.js to increase the MAX_TIMER_DURATION_MS from 60 * 10000 to 60 * 100000. This worked for me.

const MAX_TIMER_DURATION_MS = 60 * 10000;
to
const MAX_TIMER_DURATION_MS = 60 * 100000;

[codejamninja]

This fixes the yellow box and the console log. It even fixes it for Expo.

Simply place the following script at the beginning of your codebase.

import { YellowBox } from 'react-native';
import _ from 'lodash';

YellowBox.ignoreWarnings(['Setting a timer']);
const _console = _.clone(console);
console.warn = message => {
  if (message.indexOf('Setting a timer') <= -1) {
    _console.warn(message);
  }
};

[codejamninja]

I've encapsulated the previous logic into two npm modules, one for general node/javascript and one for react-native.

The react-native module is compatible with expo apps.

https://github.com/jamrizzi/ignore-warnings
https://www.npmjs.com/package/ignore-warnings
https://github.com/jamrizzi/react-native-ignore-warnings
https://www.npmjs.com/package/react-native-ignore-warnings

You would use it the following way . . .

import ignoreWarnings from 'react-native-ignore-warnings';
ignoreWarnings('Setting a timer');

[Friis1978]

@jamrizzi fixes the problem,
but I still wonder how to fix it properly.

But anyways thanks @jamrizzi

[codejamninja]

Yeah, it's a bandage fix, not a proper fix. But it's the best there is right now until firebase fixes the real problem.

[brunolemos]

The above method are not fixes for the problem, it only hides the warning.

The real problem is that the setTimeout is supposely being set to gigantic numbers, which has performance implications according to the message.

Looking forward to a patch fix.

Environment

| | |
| - | - |
| react native | 0.52.2 |
| firebase | 4.3.1 |
| android | api 27 |

[colinwong]

It's not just a warning issue but the setTimeout is also causing an actual issue on my app. I hid the warnings as suggested in previous comment.

import { YellowBox } from 'react-native';
import _ from 'lodash';

YellowBox.ignoreWarnings(['Setting a timer']);
const _console = _.clone(console);
console.warn = message => {
  if (message.indexOf('Setting a timer') <= -1) {
    _console.warn(message);
  }
};

then in my React-Native app I had this:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.log(`firebase.auth().onAuthStateChanged() ${user.uid}`); <<< THIS FIRES
    const profile = createProfile(user);

    firebase
      .firestore()
      .collection('users')
      .doc(profile.uid)
      .set(profile.doc, { merge: true })
      .then(() => {
        console.log('CREATED USER ON FIRESTORE'); <<< DOES NOT FIRE
      })
      .catch((error) => {
        console.log(error); <<< DOES NOT FIRE
      });

    console.log('got here'); <<< THIS FIRES
  } 
}

The code gets to the part where firebase is suppose to create a new doc in the 'users' collection. Here is where the 'Setting a timer' warning happens. The warning is muted with the earlier code, but firebase does not create any records even though no error was caught.

react-native: 0.52.0
firebase: 4.6.2
android: version 7 on Samsung Galaxy S7

[codejamninja]

@brunolemos, I totally agree with you. But it definitely is nice to be able to hide the warnings while waiting for a proper fix.

[LukasNavickas]

There is no fix yet? So many people have this problem!

[Renji3]

I have the exact same problem as @colinwong
I thought about switching to the realtime database, but the issue seems to be there as well.

As it is right now firebase and expo seem to be unusable together.

[pmdlt]

@colinwong @LukasNavickas @Renji3 This problem is "normal" and has nothing to do with the timer error. Firestore is not supported by React Native (https://github.com/firebase/firebase-js-sdk/issues/283). The only solutions : Using Firebase Realtime Database or https://github.com/invertase/react-native-firebase (which is not compatible with Expo).

[jshcrowthe]

Hey folks, figured I'd chime in here.

Ultimately the fix needs to be made on the react-native side as indicated in the message

See (facebook/react-native#12981)

There is a workaround for the warning that you are seeing that @bojeil-google mentioned that we could implement.

i.e.

I have found and successfully tested a workaround for this using multi-step short duration setTimeouts but this will only fix the issue from the auth side of things. Database also uses long duration setTimeouts too. So the firebase core should provide this common implementation.

Using multi-step short duration setTimeouts doesn't actually fix the problem though. The Timer module still stays active and the app is still subject to the performance issues indicated in the warning. The issue here is that, we have use cases that require long timers, and react-native doesn't optimize for that use case.

So the net of all that is: This bug can't be fixed here we can only work around the error there are workarounds available (see https://stackoverflow.com/questions/44603362/setting-a-timer-for-a-long-period-of-time-i-e-multiple-minutes) that disable the warning. Doing the work to disable the warning in our code, doesn't help the issue (beyond disabling the warning), and adds additional SDK code/weight that is completely unnecessary.

I'd recommend chiming in on the issue mentioned above (i.e. facebook/react-native#12981) if you aren't comfortable w/ the workaround provided.

[denimar]

Maybe the best way to go through this problem is by changing JSTimers.js until they really fix it

[SKempin]

https://github.com/facebook/react-native/issues/12981#issuecomment-302059217 has a cleaner temporary fix for this.

[usfslk]

We really need a solution for this.
I am getting the warning when using firebase authentication and realtime database

"expo": "^30.0.1",
"firebase": "^5.5.1",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",

[minhdang-idev]

Same problem here. I am using 30.0.1 and firebase 5.5.2.

[cristo-rabani]

Work around issue with yellow warning 'Setting a timer' .

copy & import following file (as fast as you can ;-))

import {Platform, InteractionManager} from 'react-native';

const _setTimeout = global.setTimeout;
const _clearTimeout = global.clearTimeout;
const MAX_TIMER_DURATION_MS = 60 * 1000;
if (Platform.OS === 'android') {
// Work around issue `Setting a timer for long time`
// see: https://github.com/firebase/firebase-js-sdk/issues/97
    const timerFix = {};
    const runTask = (id, fn, ttl, args) => {
        const waitingTime = ttl - Date.now();
        if (waitingTime <= 1) {
            InteractionManager.runAfterInteractions(() => {
                if (!timerFix[id]) {
                    return;
                }
                delete timerFix[id];
                fn(...args);
            });
            return;
        }

        const afterTime = Math.min(waitingTime, MAX_TIMER_DURATION_MS);
        timerFix[id] = _setTimeout(() => runTask(id, fn, ttl, args), afterTime);
    };

    global.setTimeout = (fn, time, ...args) => {
        if (MAX_TIMER_DURATION_MS < time) {
            const ttl = Date.now() + time;
            const id = '_lt_' + Object.keys(timerFix).length;
            runTask(id, fn, ttl, args);
            return id;
        }
        return _setTimeout(fn, time, ...args);
    };

    global.clearTimeout = id => {
        if (typeof id === 'string' && id.startsWith('_lt_')) {
            _clearTimeout(timerFix[id]);
            delete timerFix[id];
            return;
        }
        _clearTimeout(id);
    };
}

[SMKH-PRO]

still getting this error :/ apps getting crashed due to this..!

[cristo-rabani]

Did you add 'fix code' before first setTimeout was used?

[MAfzalKhan1997]

Did you add 'fix code' before first setTimeout was used?

Work around issue with yellow warning 'Setting a timer' .

copy & import following file (as fast as you can ;-))

import {Platform, InteractionManager} from 'react-native';

const _setTimeout = global.setTimeout;
const _clearTimeout = global.clearTimeout;
const MAX_TIMER_DURATION_MS = 60 * 1000;
if (Platform.OS === 'android') {
// Work around issue `Setting a timer for long time`
// see: https://github.com/firebase/firebase-js-sdk/issues/97
    const timerFix = {};
    const runTask = (id, fn, ttl, args) => {
        const waitingTime = ttl - Date.now();
        if (waitingTime <= 1) {
            InteractionManager.runAfterInteractions(() => {
                if (!timerFix[id]) {
                    return;
                }
                delete timerFix[id];
                fn(...args);
            });
            return;
        }

        const afterTime = Math.min(waitingTime, MAX_TIMER_DURATION_MS);
        timerFix[id] = _setTimeout(() => runTask(id, fn, ttl, args), afterTime);
    };

    global.setTimeout = (fn, time, ...args) => {
        if (MAX_TIMER_DURATION_MS < time) {
            const ttl = Date.now() + time;
            const id = '_lt_' + Object.keys(timerFix).length;
            runTask(id, fn, ttl, args);
            return id;
        }
        return _setTimeout(fn, time, ...args);
    };

    global.clearTimeout = id => {
        if (typeof id === 'string' && id.startWith('_lt_')) {
            _clearTimeout(timerFix[id]);
            delete timerFix[id];
            return;
        }
        _clearTimeout(id);
    };
}

This worked for me ... pretty solution !

[cpmech]

The problem persists, unfortunately...

[cpmech]

Work around issue with yellow warning 'Setting a timer' .

copy & import following file (as fast as you can ;-))

import {Platform, InteractionManager} from 'react-native';

const _setTimeout = global.setTimeout;
const _clearTimeout = global.clearTimeout;
const MAX_TIMER_DURATION_MS = 60 * 1000;
if (Platform.OS === 'android') {
// Work around issue `Setting a timer for long time`
// see: https://github.com/firebase/firebase-js-sdk/issues/97
    const timerFix = {};
    const runTask = (id, fn, ttl, args) => {
        const waitingTime = ttl - Date.now();
        if (waitingTime <= 1) {
            InteractionManager.runAfterInteractions(() => {
                if (!timerFix[id]) {
                    return;
                }
                delete timerFix[id];
                fn(...args);
            });
            return;
        }

        const afterTime = Math.min(waitingTime, MAX_TIMER_DURATION_MS);
        timerFix[id] = _setTimeout(() => runTask(id, fn, ttl, args), afterTime);
    };

    global.setTimeout = (fn, time, ...args) => {
        if (MAX_TIMER_DURATION_MS < time) {
            const ttl = Date.now() + time;
            const id = '_lt_' + Object.keys(timerFix).length;
            runTask(id, fn, ttl, args);
            return id;
        }
        return _setTimeout(fn, time, ...args);
    };

    global.clearTimeout = id => {
        if (typeof id === 'string' && id.startWith('_lt_')) {
            _clearTimeout(timerFix[id]);
            delete timerFix[id];
            return;
        }
        _clearTimeout(id);
    };
}

it seems to work but I had to replace startWith by startsWith

thanks

[malikimran34]

an old issue in firebase still waiting for a proper fix

[eng-osman]

this warning from socket firebase add that code to the App file to get rid of that warning
console.ignoredYellowBox = [
'Setting a timer'
];

[rauldeheer]

Is this getting fixed any time soon? I have the same issue and I see it has been here since 2017. I'm using Expo SDK v32 and I'm not using the realtime database but rather the Firebase Firestore.

[carlosenambam]

My friends I had the same error just 20 minutes ago and I figured out the cause of the error, I had to define a value for the iterations param in the Animated.loop function:

const animation = Animated.loop( Animated.timing(animatedRotation, { toValue: 1, duration: 800, easing: Easing.linear, useNativeDriver: true }), { iterations: 20 // Just add a reasonable value here } );

By default the value of the "iterations" param is -1, meaning the animation will run with infinite loops, but this feature is implemented by using a setTimeOut function with a big number of seconds in order to run the animation 'infinite' times.

Problem Solved

[HOllarves]

My friends I had the same error just 20 minutes ago and I figured out the cause of the error, I had to define a value for the iterations param in the Animated.loop function:

const animation = Animated.loop( Animated.timing(animatedRotation, { toValue: 1, duration: 800, easing: Easing.linear, useNativeDriver: true }), { iterations: 20 // Just add a reasonable value here } );

By default the value of the "iterations" param is -1, meaning the animation will run with infinite loops, but this feature is implemented by using a setTimeOut function with a big number of seconds in order to run the animation 'infinite' times.

Problem Solved

Could yo explain a bit more about your solution? I actually never declare an animation variable in my app.

Let's just hope a proper bug fix comes.
Thanks!

[mikecappie]

Has anyone managed to find a fix for this yet? It doesn't prevent development or stop the app working but it's a bit of a pain and I don't like the idea of just supressing an underlying issue, I will for now though.

[SohamToraskar]

To sort this out you need to hard code the value, increase the value of the variable MAX_TIMER_DURATION_MS. Here are the steps:

Go to node_modules/react-native/Libraries/Core/Timer/JSTimers.js

Look for the variable MAX_TIMER_DURATION_MS

Change 60 * 1000 to 10000 * 1000

Save the changes and re-build your app.

This worked for me.
https://stackoverflow.com/a/46678121