Extracts the Problem Details (RFC 7807) object from an unsuccessful server response (fetch/HttpErrorResponse). Eases the extraction of the Problem Details from a non 200 response in a client application.
Response objects may lack problem details properties or have none at all, in which case they default to a problem
details object with status: 500 and title: "Server Error".
bash
npm i get-problem-details
`$3
`typescript
import {ProblemDetails} from "get-problem-details";
`$3
#### Extracting as many Problem Details properties from a failed fetch response
After parsing a response, create a new ProblemDetails class and pass the parsed response to
the constructor to map the ProblemDetails object from the backend server.
You can then log this object or display the failed response to the user.`typescript
if (!response.ok) {
const responseResult = await response.json() as unknown; const problemDetails = new ProblemDetails(responseResult);
// Do something with your problem details object,
// such as making a toast for your users to display a failed response.
problemToast(problemDetails); // Custom toast not provided.
}
`
#### Getting a Problem Details object from a produced exception while fetching`typescript
let response: Response | undefined;
try {
// Your fetch logic...
} catch (e) {
// Create your own getErrorMessage to extract error message or set a default error message.
const errMsg = getErrorMessage(e); const problemDetails = new ProblemDetails(response, errMsg);
problemToast(problemDetails); // Custom toast not provided.
}
`
#### Extracting Problem Details from a failed HttpErrorResponse in Angular
Catch the error from an HttpClient error and pass the error property to obtain the problem details object from your
server. You can then log this object and or display the failed response to the user.
`typescript
this.myHttpService.getData()
.pipe(
catchError(err => {
// Do something with your problem details object,
// such as making a toast for your users to display a failed HttpErrorResponse.
const problemDetails = new ProblemDetails(err.error)
console.error(problemDetails);
this.snackbarService.problemDetails(problemDetails); // Custom toast not provided.
// ...
})
);
`
Problem Details Object Properties
`typescript
interface ProblemDetailsI {
type?: string;
title: string;
status: number;
detail?: string;
traceId?: string;
instance?: string;
// Default problem details extention in ASP.NET
errors?: Record
}
``