Rewrite in functional style

.eslintrc.js

@@ -1,12 +1,18 @@
 module.exports = {
   root: true,
-  extends: ['airbnb-typescript/base'],
-  parserOptions: {
-    project: 'tsconfig.eslint.json',
-  },
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'import'],
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
   rules: {
-    'no-console': [1, { allow: ['warn', 'error'] }],
-    'import/prefer-default-export': 0,
-    'lines-between-class-members': 0,
-  }
+    'import/imports-first': 'error',
+    'import/newline-after-import': 'error',
+    'import/order': [
+      'error',
+      { 'newlines-between': 'always', alphabetize: { order: 'asc' } },
+    ],
+    'import/prefer-default-export': 'off',
+  },
 };

.gitignore

@@ -1,10 +1,4 @@
 # Directories
-/lib
-node_modules/
-tests/coverage/
-
-# Logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+lib
+node_modules
+tests/coverage

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always"
+}

CHANGELOG.md

@@ -2,6 +2,34 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.0.0](https://github.com/DiederikvandenB/apollo-link-sentry/compare/v2.1.0...v3.0.0) (2021-02-11)
+
+Check [UPGRADE.md](UPGRADE.md#v2-to-v3) for more information on how to upgrade.
+
+### ⚠ BREAKING CHANGES
+
+* Restructure options and describe upgrade process ([e1db20e](https://github.com/DiederikvandenB/apollo-link-sentry/commit/e1db20ea6aaef73062e5f497055026c3fc514e92))
+* Use native `ApolloOperation` instead of our own `Operation` type ([370b9b5](https://github.com/DiederikvandenB/apollo-link-sentry/commit/370b9b56974d4dc6935e1e0fba97dbb7d4257156))
+* Replace `OperationBreadcrumb` class with plain `GraphQLBreadcrumb` object ([036b746](https://github.com/DiederikvandenB/apollo-link-sentry/commit/036b746e8b0800bfa3243612cccb9c6cc19412d9))
+* Rename `response` key in breadcrumbs to `fetchResult`
+
+### Features
+
+* Change breadcrumb type to `http`
+* Add `operationName` key to breadcrumbs
+* Allow specifying `uri` to add `url` key to breadcrumbs
+
+### Fix
+
+* Handle queries without operation name gracefully
+* Indicate if errors occurred by setting the breadcrumb level
+
+### Chores
+
+* Clarify peer dependencies ([c8b43c3](https://github.com/DiederikvandenB/apollo-link-sentry/commit/c8b43c3237072b124d0c2e2f9ed7f59c80814b58))
+* Update tooling and dev dependencies ([79b6be6](https://github.com/DiederikvandenB/apollo-link-sentry/commit/79b6be6c01c587392751215f859a567fcaf89bd4))
+* Increase type, line and branch coverage
+
 ## [2.1.0](https://github.com/DiederikvandenB/apollo-link-sentry/compare/v2.0.2...v2.1.0) (2021-02-04)
 
 

README.md

@@ -39,79 +39,103 @@ const client = new ApolloClient({
 ```
 
 ## Options
-```js
-const defaultOptions = {
+```typescript
+export interface FullOptions {
+  /**
+   * Determines if the given operation should be handled or discarded.
+   *
+   * If undefined, all operations will be included.
+   */
+  shouldHandleOperation: undefined | ((operation: Operation) => boolean);
+
+  /**
+   * The uri of the GraphQL endpoint.
+   *
+   * Used to add context information, e.g. to breadcrumbs.
+   */
+  uri: undefined | string;
+
+  /**
+   * Set the Sentry transaction name to the GraphQL operation name.
+   *
+   * May be overwritten by other parts of your app.
+   */
+  setTransaction: true | false;
+
+  /**
+   * Narrow Sentry's fingerprint by appending the GraphQL operation name to the {{default}} key.
+   *
+   * Only the last executed operation will be added, not every operation that's been through the link.
+   * May be overwritten by other parts of your app.
+   */
+  setFingerprint: true | false;
+
+  /**
+   * Attach a breadcrumb for executed GraphQL operations.
+   *
+   * The following information will be included by default:
+   * {
+   *   type: 'http',
+   *   category: `graphql.${operationType}`,
+   *   message: operationName,
+   *   level: errors ? 'error' : 'info',
+   * }
+   */
+  attachBreadcrumbs: AttachBreadcrumbsOptions | false;
+}
+
+export type AttachBreadcrumbsOptions = {
+  /**
+   * Include the full query string?
+   */
+  includeQuery: false | true;
+
+  /**
+   * Include the variable values?
+   *
+   * Be careful not to leak sensitive information or send too much data.
+   */
+  includeVariables: false | true;
+
+  /**
+   * Include the fetched result (data, errors, extensions)?
+   *
+   * Be careful not to leak sensitive information or send too much data.
+   */
+  includeFetchResult: false | true;
+
   /**
-   * Set the Sentry `transaction` to the `operationName` of the query / mutation. Note that this
-   * only works if the transaction is not overwritten later in your app.
+   * Include the response error?
+   *
+   * Be careful not to leak sensitive information or send too much data.
    */
-  setTransaction: true,
+  includeError: false | true;
 
   /**
-   * Narrow Sentry's fingerprint by appending the operation's name to Sentry's {{default}} key.
-   * It works in such a way that only the last operation is added, not every operation that's been
-   * through the link. Note that if you override this somewhere else in your app, it is possible
-   * that the value set by `apollo-link-sentry` is overwritten.
+   * Include the contents of the Apollo Client cache?
+   *
+   * This is mostly useful for debugging purposes and not recommended for production environments,
+   * see "Be careful what you include", unless carefully combined with `beforeBreadcrumb`.
    */
-  setFingerprint: true,
-
-  breadcrumb: {
-    /**
-     * Set to false to disable attaching GraphQL operations as breadcrumbs. If only this breadcrumb
-     * option is toggled, the breadcrumb will only show the operation name and it's type.
-     */
-    enable: true,
-
-    /**
-     * Include the query / mutation string in the breadcrumb.
-     */
-    includeQuery: false,
-
-    /**
-     * Include the entire Apollo cache in the breadcrumb. It is not recommended to enable this
-     * option in production environment, for several reasons, see "Be careful what you include".
-     * This option is specifically useful for debugging purposes, but when applied in combination
-     * with `beforeBreadcrumb` can also be used in production.
-     */
-    includeCache: false,
-
-    /**
-     * Include the operation's variables in the breadcrumb. Again, be careful what you include,
-     * or apply a filter.
-     */
-    includeVariables: false,
-
-    /**
-     * Include the operation's fetch result in the breadcrumb.
-     */
-    includeResponse: false,
-
-    /**
-     * If an error is received, it can be included in the breadcrumb. Regardless of this option,
-     * the breadcrumb's type is set to error to reflect a failed operation in the Sentry UI.
-     */
-    includeError: false,
-
-    /**
-     * Include context keys as extra data in the breadcrumb. Accepts dot notation.
-     * The data is stringified and formatted. Can be used to include headers for instance.
-     */
-    includeContextKeys: [],
-  },
+  includeCache: false | true;
 
   /**
-   * Provide a callback function which receives an instance of this package's Operation class
-   * Only operations that pass the test are sent to Sentry. Leave undefined if you want all
-   * operations to pass. See PR #9 for more details.
+   * Include arbitrary data from the `ApolloContext`?
+   *
+   * Accepts a list of keys in dot notation, e.g. `foo.bar`. Can be useful to include extra
+   * information such as headers.
    */
-  filter: (operation) => true,
+  includeContext: false | NonEmptyArray<string>;
 
   /**
-   * Provide a callback function which receives an instance of this package's OperationBreadcrumb class
-   * Use it to modify the data that is added to the breadcrumb. Leave undefined if you want all
-   * data to be included. Very useful in combination with options like includeVariables and includeContextKeys.
+   * Modify the breadcrumb right before it is sent.
+   *
+   * Can be used to add additional data from the operation or clean up included data.
+   * Very useful in combination with options like `includeVariables` and `includeContextKeys`.
    */
-  beforeBreadcrumb: (breadcrumb) => breadcrumb,
+  transform:
+    | undefined
+    | ((breadcrumb: GraphQLBreadcrumb, operation: Operation) => Breadcrumb);
 };
 ```
 

UPGRADE.md

@@ -0,0 +1,36 @@
+# Upgrade guide
+
+This document provides guidance for upgrading between major versions of `apollo-link-sentry`.
+
+## v2 to v3
+
+### Adapt your configuration
+
+The configuration of `SentryLink` has changed.
+
+```diff
+import { SentryLink } from 'apollo-link-sentry';
+
+new SentryLink({
+- filter: (operation) => ...,
++ shouldHandleOperation: (operation) => ...,
++ uri: 'https://example.com/graphql',
+  setTransaction: true,
+  setFingerprint: true,
+
+- breadcrumb: {
+-   enable: true,
++ attachBreadcrumbs: {
+    includeQuery: false,
+    includeVariables: false,
+-   includeFetchResult: false,
++   includeFetchResult: false,
+    includeError: false,
+    includeCache: false,
+-   includeContext: ['example'],
++   includeContext: ['example'],
++   transform: (breadcrumb, operation) => ...,
+  },
+- beforeBreadcrumb: (breadcrumb) => ...,
+})
+```

jest.config.js

@@ -11,9 +11,7 @@ module.exports = {
   collectCoverage: false,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  collectCoverageFrom: [
-    'src/**/*',
-  ],
+  collectCoverageFrom: ['src/**/*'],
 
   // The directory where Jest should output its coverage files
   coverageDirectory: 'tests/coverage',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "apollo-link-sentry",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "license": "MIT",
   "author": "Diederik van den Burger <[email protected]>",
   "repository": "https://github.com/DiederikvandenB/apollo-link-sentry.git",
@@ -22,6 +22,8 @@
     "build": "tsc",
     "test": "jest",
     "test:coverage": "jest --coverage --watchAll=false",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "prerelease": "yarn test && yarn build",
     "release": "standard-version",
     "deploy": "yarn publish --non-interactive"
@@ -32,7 +34,8 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.2.3",
-    "@sentry/minimal": "^5.26.0",
+    "@sentry/browser": "^6.0.4",
+    "graphql": "^15.4.0",
     "zen-observable": "^0.8.15"
   },
   "devDependencies": {
@@ -41,23 +44,23 @@
     "@sentry/minimal": "^6.0.4",
     "@sentry/types": "^6.0.4",
     "@types/jest": "^26.0.14",
-    "@typescript-eslint/eslint-plugin": "^3.1.0",
-    "@typescript-eslint/parser": "^3.1.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb-base": "^14.1.0",
-    "eslint-config-airbnb-typescript": "^7.2.1",
-    "eslint-plugin-import": "^2.20.2",
+    "@typescript-eslint/eslint-plugin": "^4.14.2",
+    "@typescript-eslint/parser": "^4.14.2",
+    "eslint": "^7.19.0",
+    "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.3.1",
     "graphql": "^15.4.0",
-    "graphql-tag": "^2.10.3",
     "jest": "^26.5.3",
     "jest-spec-reporter": "^1.0.14",
+    "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
     "sentry-testkit": "^3.2.1",
     "standard-version": "^9.0.0",
     "ts-jest": "^26.4.1",
     "tsc-watch": "~4.2.9",
     "tslib": "^2.0.3",
-    "typescript": "^4.0.3",
+    "typescript": "^4.1.3",
     "zen-observable": "^0.8.15"
   }
 }