Не работает вывод ошибок через next(e) на frontend react.ts

Рейтинг: 0Ответов: 0Опубликовано: 25.04.2023

Не работает вывод ошибок через next(e) на frontend frontend react.ts с использованием mobx. Backend написан на typescript express Прилагаю код с exceptions/api-error.ts

export class ApiError extends Error {
    status : number;
    errors: any[];

    constructor(status:number, message:string, errors=[]){
        super(message)
        this.status = status
        this.errors = errors

        Object.setPrototypeOf(this, ApiError.prototype)
    }

    static UnauthorizedError(){
        return new ApiError(401, 'Пользователь не авторизован')
    }

    static BadRequest(message:string, errors = []){
        return new ApiError(400, message)
    }
}

Также код error-middleware

import {ApiError} from '../exception/api-error'
import express, { Request, Response, NextFunction } from 'express';

export default function errorMiddleware(err:any, req:Request, res:Response, next:Function){
    if(err instanceof ApiError){
        return res.status(err.status).json({message: err.message, errors:err.errors})
    }
    return res.status(500).json({message:'Непредвиденная ошибка'})
}

Код контроллера:

import { ApiError } from '../exception/api-error'
import AuthService from '../service/auth-service'

class AuthController{
    async login(req:any, res:any, next:any){
        try {
            const {email, password} = req.body
            const userData = await AuthService.login(email, password)
            res.cookie('refreshToken', userData.refreshToken, {maxAge: 30 * 24 * 60 * 60 * 1000, httpOnly: true})
            return res.send(userData)
        } catch (e) {
            next(e)
        }
    }
}
export default new AuthController()

В index.ts всё подключено

import errorMiddleware from './middleware/error-middleware'
app.use(errorMiddleware)

Далее показываю код с frontend, а именно AuthService.ts

import api from "../http";
import {AxiosResponse} from 'axios'
import { AuthRespose } from "../model/AuthResponse";
export default class AuthService{
    static async login(email: string, password: string): Promise<AxiosResponse<AuthRespose>>{
        return api.post<AuthRespose>('auth/login', {email, password})
    }

}

А также сам Store

import { makeAutoObservable } from "mobx"
import { User } from "../model/User"
import AuthService from "../service/AuthService"
import axios from "axios"
import { AuthRespose } from "../model/AuthResponse"
import { API_URL } from "../http"

export default class Store{
    user = {} as User
    isAuth = false
    isLoading = false
    constructor(){
        makeAutoObservable(this)
    }

    setAuth(bool:boolean){
        this.isAuth = bool
    }
    setUser(user: User){
        this.user = user
    }
    setLoading(bool: boolean){
        this.isLoading = bool
    }
    async login(email: string, password:string){
        try {
            await AuthService.login(email, password).then((response)=>{
                console.log(response)
                localStorage.setItem('token', response.data.accessToken)
                this.setAuth(true)
                this.setUser(response.data.user)
                console.log(response.data.user)
            })
        } catch (e) {
            console.log(e)
        }
    }
}

Результатом работы с фронта является: введите сюда описание изображения

А результатом работы с postman (всё выводиться корректно): введите сюда описание изображения

Ответы

Ответов пока нет.