Не работает вывод ошибок через next(e) на frontend react.ts
Не работает вывод ошибок через 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)
}
}
}
Источник: Stack Overflow на русском