堆栈跟踪错误仍然显示在我的控制台上 [英] Stack trace error is still showing up on my console

问题描述

我正在尝试通过Firebase进行身份验证注册，并且一切正常.但是我正在尝试对不正确/空字段进行一些错误处理，而我得到了:

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.

我能够从Firebase检索错误消息，然后将其置于错误状态并在屏幕上呈现该消息，但是堆栈跟踪错误仍在我的控制台上显示.

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

错误图片这是我的控制台图片

推荐答案

我认为此错误由firebase库打印，然后返回错误(这是您在catch中收到的错误).我感到奇怪的是，如果您使用然后，抓住"，则不会出现错误，只有在使用异步等待时才会显示该错误.

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.

这篇关于堆栈跟踪错误仍然显示在我的控制台上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！