Stack trace error is still showing up on my console

Question

I'm trying to do an auth sign up via firebase and it all works fine. but i'm trying to do some error handling for incorrect/empty fields and i'm getting:

index.js:1509 Uncaught Error: The error you provided does not contain a stack trace.

I'm able to retrieve the error message from firebase then throw it into an error state and render the message on screen, but the stack trace error is still showing up on my console.

export const signUp = (newUser) => async (dispatch, getState, { getFirebase, getFirestore }) => {
    try {
        const firebase = getFirebase();
        const firestore = getFirestore();

        const response = await firebase.auth().createUserWithEmailAndPassword(
            newUser.email,
            newUser.password
        );

        firestore.collection('users').doc(response.user.uid).set({
            firstName: newUser.firstName,
            lastName: newUser.lastName,
            initials: newUser.firstName[0] + newUser.lastName[0]
        });

        dispatch({
            type: SIGN_UP_SUCCESS
        });
    } catch(err) {
        dispatch({
            type: SIGN_UP_ERR,
            payload: err
        });
        console.log(err)
    }
};

import React, { useRef } from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { signUp } from '../../store/actions/authActions';

const SignUp = props => {
    const emailRef = useRef();
    const passwordRef = useRef();
    const firstNameRef = useRef();
    const lastNameRef = useRef();

    const handleSubmit = (e) => {
        e.preventDefault();
        const newUser = {
            email: emailRef.current.value,
            password: passwordRef.current.value,
            firstName: firstNameRef.current.value,
            lastName: lastNameRef.current.value
        };
        props.signUp(newUser);
    };

    if(props.auth.uid) return <Redirect to='/' />

    console.log('props: ', props)
    return (
        <div className="container">
            <form onSubmit={(e) => handleSubmit(e)} className="white">
                <h5 className="grey-text text-darken-3">Sign Up</h5>
                <div className="input-field">
                    <label htmlFor="email">email</label>
                    <input type="email" id="email" ref={emailRef} />
                </div>
                <div className="input-field">
                    <label htmlFor="password">password</label>
                    <input type="password" id="password" ref={passwordRef} />
                </div>
                <div className="input-field">
                    <label htmlFor="firstName">first name</label>
                    <input type="text" id="firstName" ref={firstNameRef} />
                </div>
                <div className="input-field">
                    <label htmlFor="lastName">last name</label>
                    <input type="text" id="lastName" ref={lastNameRef} />
                </div>
                <div className="input-field">
                    <button className="button btn pink lighten-1 z-depth-0">Sign up</button>
                    <div className="red-text center">
                        { props.authErr ? <p>{ props.authErr }</p> : null }
                    </div>
                </div>
            </form>
        </div>
    );
};

const mapStateToProps = state => {
    console.log('auth err:', state.auth.authError)
    return {
        auth: state.firebase.auth,
        authErr: state.auth.authError
    }
};

export default connect(mapStateToProps, { signUp })(SignUp);

not too sure how to handle the stack trace error

image of error here is an image of my console

Answer 1

I think await keyword may cause this error. try..catch can`t catch the error in await statement.

Answer 2

I think this error is printed by the firebase library, then it returns the error (which is what you receive in catch). What I find curious is that if you use "then, catch", the error does not appear, it is only shown when using async await.