How to Add Sentry to your Angular project with Graphql
How to Add Sentry to your Angular project with Graphql

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 SentryExample 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.
 
👉
Follow me on twitter for more awesome stuff like this @pateldeep_eth Linkdin