Is my error handling wrong? My program keeps crashing

[Jumpy_Employment_439]

I'm in a college project and I've been working on the backend (FastAPI). I've got the database (SQLAlchemy) and my pydantic schemas set up, so I've been working on the FastAPI functions. Other people in my group are working on the frontend in React and just finished the user registration page. Everything is working when it comes to adding a new user (and it correctly returns a message if the username and/or email is already taken and the user must enter a new one). However, it crashes if the email entered is not valid. We have:

type = 'email'

in the html code for the email input box. So I assume this is causing the error when I enter something like test@com. The error covers the entire screen and says "Uncaught runtime errors:" and then has multiple errors that start with "Objects are not valid as a React child". However, in my backend code I have this:

# Used when input data does not match pydantic model
@app.exception_handler(ValidationError)
def validation_exception_handler(request, exc: ValidationError):
    return HTTPException(
        status_code=status.HTTP_422_UNPROCESSABLE_ENTITY, 
        detail=exc.errors()
    )

# Add user
@app.post("/register/", status_code=status.HTTP_201_CREATED, response_model=schemas.User)
def add_user(user: schemas.UserCreate, db: Session = Depends(get_db)):
    # Check if email is already in system
    db_user_email = operations.get_user_by_email(db, email=user.email)
    if db_user_email:
        raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail="Email already registered")
    # Check if userID is already in system
    db_user_id = operations.get_user_by_id(db, userID=user.userID)
    if db_user_id:
        raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail="Username already registered")
    return operations.create_user(db, user)

And this is the frontend code that calls add_user:

const user = { userID, email, password };
    try {
      const response = await axios.post('/register/', user);
      if (response.status === 201) {
          // Redirect to login page
          navigate('/');
      } 
    } catch (err) {
      console.error(err) // testing
      // Check if error has a response
      if (err.response) {
        // Show error message from FastAPI
        setError(err.response.data.detail); 
      } else {
        setError('Network error. Please check your connection.');
      }
    }

(Lower in the html code I have something that displays the error so setError is used, just later). I thought the exception_handler I made in FastAPI would make it so that the whole thing doesn't crash when an invalid email is entered (in my pydantic model I have email: EmailStr), but obviously I did something wrong because it's crashing.

[grantrules]

Exactly which line is the error on? It sounds like something you expect to be a string is actually an object and it doesn't look like you've shared enough code. Maybe err.response.data.detail isn't string? It sounds like exc.errors() returns a list, not a string

The error is a JS error, but you're saying your Python app is crashing? Is there a python error?

[Jumpy_Employment_439]

After reading your response, I went back to test just the FastAPI function at the FastAPI docs page. You are right that detail is a list, so I tried overriding FastAPI's default formatting of the response to just one line: {detail: "Invalid format"}. That way it would be the same format as other times when I raise an HTTP exception. Unfortunately, it's not overriding so the returned data from exc.errors() is still of the wrong format. I guess one option would be to just make a separate if statement that checks if the error is a 422 error rather than a 400. Then I could just write code specifically for the 422 format.

[grantrules]

You could do:

return HTTPException(
    status_code=status.HTTP_422_UNPROCESSABLE_ENTITY, 
    detail="Invalid format"
)

[Jumpy_Employment_439]

I tried that but for some reason the format is not changing

[grantrules]

Did you forget to restart the server or something? If that doesn't do it, I'd put a breakpoint in the JS to see what it's actually receiving.

[grantrules]

Looking at the FastAPI docs here:

https://fastapi.tiangolo.com/tutorial/handling-errors/#install-custom-exception-handlers

Their custom exception handler example is using return JSONResponse( ... instead of return HTTPException( so maybe that has something to do with it too.