How to Add Sentry to your Angular project with Graphql

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:

import { onError } from "@apollo/client/link/error";
import * as Sentry from "@sentry/angular";

const errorHandlerLink = onError((err, ...param) => {
  const { graphQLErrors, networkError } = err;
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) => {
      Sentry.captureMessage(message)
    }
  )
  if (networkError) {
    Sentry.captureException(networkError)
  }
});

// Using errorHandlerLink while creating apollo instance
apollo.create({
      link: errorHandlerLink.concat(httpLink.create({ uri })),
}); 

---

*A complete example Graphql module file *

import { NgModule } from '@angular/core';
import { APOLLO_OPTIONS } from 'apollo-angular';
import { InMemoryCache } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';
import { environment } from 'src/environments/environment';
import { onError } from "@apollo/client/link/error";
import * as Sentry from "@sentry/angular";

const uri = environment.apiEndpoint; // <-- add the URL of the GraphQL server here

export function createApollo(httpLink: HttpLink) {

  const errorHandlerLink = onError((err, ...param) => {
    const { graphQLErrors, networkError } = err;
    if (graphQLErrors)
      graphQLErrors.map(({ message, locations, path }) => {
        Sentry.captureMessage(message)
      }
      )
    if (networkError) {
      Sentry.captureException(networkError)
    }
  });

  return {
    link: errorHandlerLink.concat(httpLink.create({ uri })),
    cache: new InMemoryCache({ addTypename: false }),
  };
}

@NgModule({
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export 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.