Possible unhandled promise rejection (id:29)

Question

Working on React-Native for first time and using keychain for login page where I got this issue.

import React, { useEffect, useState } from "react";
import { StyleSheet, Text, TextInput, View, Dimensions } from "react-native";
import * as Keychain from "react-native-keychain";

export default function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [userDetails, setUserDetails] = useState({});
  useEffect(() => {
    (async () => {
      try {
        const credentials = await Keychain.getGenericPassword();
        if (credentials) {
          setIsLoggedIn(true);
          setUserDetails(credentials);
        } else {
          console.log("No credentials stored");
        }
      } catch (error) {
        console.log("Keychain couldn't be accessed!", error);
      }
    })();
  }, []);
  
  const handleLogin = async () => {
    // login api call here
   
    const username = "Shivam";
    const password = "shivam";
    await Keychain.setGenericPassword(username, password);
    setIsLoggedIn(true);
    setUserDetails({password, username});
  };
  const handleLogout = async()=>{
    const logout = await Keychain.resetGenericPassword();
    console.log({logout});
    if(logout){
      setIsLoggedIn(false);
      setUserDetails({});
    }
  }
  return (
    <View style={styles.container}>
      {!isLoggedIn ? (
        <View>
          <Text style={styles.helloText}>Hello Tayze User!</Text>
          <TextInput placeholder="email" style={styles.textInput} />
          <TextInput
            placeholder="password"
            secureTextEntry
            style={styles.textInput}
          />
          <Text style={styles.loginBtn} onPress={handleLogin}>
            Login
          </Text>
        </View>
      ) : (
        <View>
          <Text style={styles.welcomeText}>
            Welcome back! {userDetails}
          </Text>
          <Text style={styles.logoutBtn} onPress={handleLogout} >Logout</Text>
        </View>
      )}
    </View>
  );
}
const screenWidth = Dimensions.get("screen").width;

I'm getting the following error:

Possible unhandled promise rejection (id:0: Network request failed)

Here's the promise code, I don't see what's wrong here, any ideas? This code is setting the user during login and getting to home page where user name will displayed and one logout button

Answer 1

The Possible unhandled promise rejection error means that an error was thrown in some of your asynchronous code and the error was not handled.

To handle errors in asynchronous methods, you should wrap them in try/catch blocks:

  const handleLogin = async () => {
    const username = "Shivam";
    const password = "shivam";
    try {
        await Keychain.setGenericPassword(username, password);
        setIsLoggedIn(true);
        setUserDetails({password, username});
    } catch (err) {
        console.log('Login failed', err);
    }
  };

  const handleLogout = async () => {
    try {
        const logout = await Keychain.resetGenericPassword();
        setIsLoggedIn(false);
        setUserDetails({});
    } catch (err) {
        console.log('Logout failed', err);
    }
  };

In this case, the error being thrown is a network error. You can check the network tab of your browsers developer tools to see what is happening.