Sentry.io is an external monitoring and logging service which can help you identify and triage errors in your code.
These logs provide information such as a trace stack, breadcrumbs, and (assuming this is a web application) browser data. This can help you triage issues and resolve bugs faster, with less investigative overhead.
How to Create a Sentry Project
You can follow this walkthrough doc for creating Sentry project. Create new Sentry project
How to Add Sentry to yor Angular App
Follow this amazing guide to get you up and running with Sentry’s SDK in Angular App. Add Sentry to Angular App
How to log Graphql errors using Sentry
Best way to handle Graphql errors is using Error Links. Error Link allow you to log both GraphQL errors (errors returned as part of the response) as well as network errors (failed requests, invalid queries, etc.).
Use the onError link to perform custom logic when a GraphQL or network error occurs. You pass this link a function that’s executed if an operation returns one or more errors:
Inside onError link we can capture Graphql errors with Sentry Example use would be like this:
1import { onError } from "@apollo/client/link/error";2import * as Sentry from "@sentry/angular";34const errorHandlerLink = onError((err, ...param) => {5 const { graphQLErrors, networkError } = err;6 if (graphQLErrors)7 graphQLErrors.map(({ message, locations, path }) => {8 Sentry.captureMessage(message)9 }10 )11 if (networkError) {12 Sentry.captureException(networkError)13 }14});1516// Using errorHandlerLink while creating apollo instance17apollo.create({18 link: errorHandlerLink.concat(httpLink.create({ uri })),19});
A complete example Graphql module file
1import { NgModule } from '@angular/core';2import { APOLLO_OPTIONS } from 'apollo-angular';3import { InMemoryCache } from '@apollo/client/core';4import { HttpLink } from 'apollo-angular/http';5import { environment } from 'src/environments/environment';6import { onError } from "@apollo/client/link/error";7import * as Sentry from "@sentry/angular";89const uri = environment.apiEndpoint; // <-- add the URL of the GraphQL server here1011export function createApollo(httpLink: HttpLink) {1213 const errorHandlerLink = onError((err, ...param) => {14 const { graphQLErrors, networkError } = err;15 if (graphQLErrors)16 graphQLErrors.map(({ message, locations, path }) => {17 Sentry.captureMessage(message)18 }19 )20 if (networkError) {21 Sentry.captureException(networkError)22 }23 });2425 return {26 link: errorHandlerLink.concat(httpLink.create({ uri })),27 cache: new InMemoryCache({ addTypename: false }),28 };29}3031@NgModule({32 providers: [33 {34 provide: APOLLO_OPTIONS,35 useFactory: createApollo,36 deps: [HttpLink],37 },38 ],39})40export class GraphQLModule { }
You have now successfully integrated Sentry with your Angular project. You are now ready to start receiving error information, triaging issues, and improving your project’s stability.
