Angular Graphql Catch Error is not showing the proper message

Once again, I need your help. Basically, I'm using graphql for all aspects of my application which is under development.

On the front end side, I would like to capture properly any error that I'm sending back to the front end via the interceptor.

At the end, I will use a notification system to get it displayed. On the back end side, for instance, I set the status to 401 and passing the message (Done via nextjs)

See below the exception filter on nextjs

import { GqlContextType, GqlExceptionFilter } from '@nestjs/graphql';
import { GraphQLError } from 'graphql';

@Catch()
export class HttpExceptionFilter<T> implements GqlExceptionFilter {
private handleException(exception: unknown) {
//Handle the exception and return status and message
const status = exception instanceof HttpException ? exception.getStatus() : HttpStatus.INTERNAL_SERVER_ERROR
const message = exception instanceof HttpException ? exception.message : 'Internal Server Error'
if (exception instanceof HttpException)
console.log('HTTPException', exception.message)
return { status, message }
}

catch(exception: unknown, host: ArgumentsHost) {
const contextType = host.getType<GqlContextType>();
const { status, message } = this.handleException(exception);
if (contextType === 'graphql')
return new GraphQLError(message, { extensions: { code: status } })
// biome-ignore lint/style/noUselessElse: <explanation>
else {
const ctx = host.switchToHttp()
const response = ctx.getResponse()
const request = ctx.getRequest()
response.status(status).json({
statusCode: status,
timestamp: new Date().toISOString(),
path: request.url,
message
})
}
}
}


See below my interceptor:

if (jwtToken) {
const cloned = req.clone({
setHeaders: {
Authorization: `Bearer ${jwtToken}`,
},
});
return next(cloned).pipe(
catchError((err: any) => {
if (err instanceof HttpErrorResponse) {
console.log('AuthInterceptor', err.status, err.statusText, err.type, err.message)
switch (err.status) {
case 401:
if (req.body.operationName.toLowerCase() !== 'signin') {
return authService.refreshToken().pipe(
switchMap(() => {
const jwtToken = authService.getToken();
const newCloned = req.clone({
setHeaders: {
Authorization: `Bearer ${jwtToken}`,
},
});
return next(newCloned);
}),
);
}
}
}
return throwError(() => err);
}),
);
}
return next(req);


Unfortunately, the only message that I get from the HTTPInterceptor is the status code (Which is good) but not the error message that I wanted to pass..... only showing "Http failure response for http://localhost:3100/graphql: 404 Not Found"

Thanks in advance for your precious help

Continue reading...