https://github.com/maraisr/relay-sentry

⚛ Relay log function that enriches Sentry with Relay life cycles and GraphQL data
https://github.com/maraisr/relay-sentry

error graphql relay sentry

Last synced: 3 months ago
JSON representation

⚛ Relay log function that enriches Sentry with Relay life cycles and GraphQL data

• Host: GitHub
• URL: https://github.com/maraisr/relay-sentry
• Owner: maraisr
• License: mit
• Created: 2020-10-22T01:14:09.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-01-19T02:13:08.000Z (12 months ago)
• Last Synced: 2024-10-12T05:28:11.710Z (3 months ago)
• Topics: error, graphql, relay, sentry
• Language: TypeScript
• Homepage:
• Size: 332 KB
• Stars: 32
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

• awesome-list - relay-sentry

README

        




# relay-sentry



**Relay log function that enriches Sentry with Relay lifecycle's and GraphQL data**








	





  





	





	





	







## ⚙️ Install

```sh

yarn add relay-sentry

```

## 🧱 Usage

```ts

import { logFunction } from 'relay-sentry';

import { Environment } from 'relay-runtime';

const environment = new Environment({

  log: logFunction(),

  network,

  store,

});

```

If you want to also include the [GraphQL `errors` array](http://spec.graphql.org/draft/#sec-Errors) to the Sentry

exception context. You can throw a _ custom_ `Error` class that contains a property called `graphqlErrors`. Internally

we look for that key on the error object, and send it.

Under the hood it uses `@sentry/minimal` so there is no discrepancy between Node/Browser runtimes.

TypeScript users, we export an interface to help:

```ts

import type { ErrorWithGraphQLErrors } from 'relay-sentry';

declare global {

  interface Error extends ErrorWithGraphQLErrors {}

}

```

## 🎢 What does it look like?

![breadcrumbs](assets/breadcrumbs.jpg)

Leaves a debug/info breadcrumb trail for all intermediate life cycle events.

> At this stage it doesn't filter any variables, but if there's a need for it—submit a PR 🕺

## 🔎 API

### `logFunction(options?: Options): LogFunction`

`Options`

| Option                                           | Description                                        | Default     |

| ------------------------------------------------ | -------------------------------------------------- | ----------- |

| `filterEvents?: (logEvent: LogEvent) => boolean` | Use to filter log events from creating breadcrumbs | `undefined` |

## ⁉ Help

How can I log something custom?

```ts

import { logFunction } from 'relay-sentry';

import { Environment } from 'relay-runtime';

const environment = new Environment({

  log: (logEvent) => {

    logFunction(logEvent);

    // Do your logs

  },

  network,

  store,

});

```

The error's context looks like [ [Object] ]

When you're running `Sentry.init` set the

[`normalizeDepth`](https://docs.sentry.io/platforms/javascript/configuration/options/#normalize-depth) to something

bigger, maybe 10.

My fetchFn is throwing an exception but it isn't appearing in Sentry?

`relay-sentry` used to also manually capture an exception thorough the `captureException` Sentry api. However, through

user feedback and further exploration we found it best to leave that to the consumer through the use of an

[async-boundary](https://github.com/maraisr/async-boundary) or alike. This avoided the double error emission (or event)

for an error that would have also been emitted by those boundaries.

## License

MIT © [Marais Rossouw](https://marais.io)