DEVPROD-356: Add Sentry grouping

src/components/ErrorHandling/Sentry.tsx

@@ -4,9 +4,11 @@ import {
   getCurrentHub,
   init,
   Replay,
+  setTags,
   withScope,
 } from "@sentry/react";
 import type { Scope, SeverityLevel } from "@sentry/react";
+import type { Context, Primitive } from "@sentry/types";
 import { environmentVariables } from "utils";
 import ErrorFallback from "./ErrorFallback";
 
@@ -38,21 +40,41 @@ const initializeSentry = () => {
 
 const isInitialized = () => !!getCurrentHub().getClient();
 
-const sendError = (
-  err: Error,
-  severity: SeverityLevel,
-  metadata?: { [key: string]: any },
-) => {
+export type ErrorInput = {
+  err: Error;
+  fingerprint?: string[];
+  context?: Context;
+  severity: SeverityLevel;
+  tags?: { [key: string]: Primitive };
+};
+
+const sendError = ({
+  context,
+  err,
+  fingerprint,
+  severity,
+  tags,
+}: ErrorInput) => {
   withScope((scope) => {
-    setScope(scope, { level: severity, context: metadata });
+    setScope(scope, { level: severity, context });
+
+    if (fingerprint) {
+      // A custom fingerprint allows for more intelligent grouping
+      scope.setFingerprint(fingerprint);
+    }
+
+    if (tags) {
+      // Apply tags, which are a searchable/filterable property
+      setTags(tags);
+    }
 
     captureException(err);
   });
 };
 
 type ScopeOptions = {
   level?: SeverityLevel;
-  context?: { [key: string]: any };
+  context?: Context;
 };
 
 const setScope = (scope: Scope, { context, level }: ScopeOptions = {}) => {

src/gql/GQLWrapper.tsx

@@ -144,10 +144,17 @@ const authLink = (logout: () => void): ApolloLink =>
 const logErrorsLink = onError(({ graphQLErrors, operation }) => {
   if (Array.isArray(graphQLErrors)) {
     graphQLErrors.forEach((gqlErr) => {
+      const fingerprint = [operation.operationName];
+      if (gqlErr?.path?.length) {
+        fingerprint.push(...gqlErr.path);
+      }
       reportError(new Error(gqlErr.message), {
-        gqlErr,
-        operationName: operation.operationName,
-        variables: operation.variables,
+        fingerprint,
+        tags: { operationName: operation.operationName },
+        context: {
+          gqlErr,
+          variables: operation.variables,
+        },
       }).warning();
     });
   }

src/utils/errorReporting.test.ts

@@ -34,7 +34,7 @@ describe("error reporting", () => {
     expect(Sentry.captureException).not.toHaveBeenCalled();
   });
 
-  it("should report errors to Sentry when in production", () => {
+  it("reports errors to Sentry when in production", () => {
     mockEnv("NODE_ENV", "production");
     jest.spyOn(Sentry, "captureException").mockImplementation(jest.fn());
 
@@ -46,21 +46,40 @@ describe("error reporting", () => {
     expect(Sentry.captureException).toHaveBeenCalledWith(err);
   });
 
-  it("supports metadata field", () => {
+  it("supports context field", () => {
     mockEnv("NODE_ENV", "production");
     jest.spyOn(Sentry, "captureException").mockImplementation(jest.fn());
     const err = {
       message: "GraphQL Error",
       name: "Error Name",
     };
 
-    const metadata = { customField: "foo" };
-    const result = reportError(err, metadata);
+    const context = { anything: "foo" };
+    const result = reportError(err, { context });
     result.severe();
     expect(Sentry.captureException).toHaveBeenCalledWith(err);
     result.warning();
     expect(Sentry.captureException).toHaveBeenCalledWith(err);
   });
+
+  it("supports tags", () => {
+    mockEnv("NODE_ENV", "production");
+    jest.spyOn(Sentry, "captureException").mockImplementation(jest.fn());
+    jest.spyOn(Sentry, "setTags").mockImplementation(jest.fn());
+    const err = {
+      message: "GraphQL Error",
+      name: "Error Name",
+    };
+
+    const tags = { spruce: "true" };
+    const result = reportError(err, { tags });
+    result.severe();
+    expect(Sentry.captureException).toHaveBeenCalledWith(err);
+    expect(Sentry.setTags).toHaveBeenCalledWith(tags);
+    result.warning();
+    expect(Sentry.captureException).toHaveBeenCalledWith(err);
+    expect(Sentry.setTags).toHaveBeenCalledWith(tags);
+  });
 });
 
 describe("breadcrumbs", () => {

src/utils/errorReporting.ts

@@ -1,33 +1,54 @@
 import { addBreadcrumb, Breadcrumb } from "@sentry/react";
-import { sendError as sentrySendError } from "components/ErrorHandling/Sentry";
+import {
+  ErrorInput,
+  sendError as sentrySendError,
+} from "components/ErrorHandling/Sentry";
 import { isProductionBuild } from "./environmentVariables";
 
 interface reportErrorResult {
   severe: () => void;
   warning: () => void;
 }
 
+type ErrorMetadata = {
+  fingerprint?: ErrorInput["fingerprint"];
+  tags?: ErrorInput["tags"];
+  context?: ErrorInput["context"];
+};
+
 const reportError = (
   err: Error,
-  metadata?: { [key: string]: any },
+  { context, fingerprint, tags }: ErrorMetadata = {},
 ): reportErrorResult => {
   if (!isProductionBuild()) {
     return {
       severe: () => {
-        console.error({ err, severity: "severe", metadata });
+        console.error({ err, severity: "severe", context, fingerprint, tags });
       },
       warning: () => {
-        console.error({ err, severity: "warning", metadata });
+        console.error({ err, severity: "warning", context, fingerprint, tags });
       },
     };
   }
 
   return {
     severe: () => {
-      sentrySendError(err, "error", metadata);
+      sentrySendError({
+        context,
+        err,
+        fingerprint,
+        severity: "error",
+        tags,
+      });
     },
     warning: () => {
-      sentrySendError(err, "warning", metadata);
+      sentrySendError({
+        context,
+        err,
+        fingerprint,
+        severity: "warning",
+        tags,
+      });
     },
   };
 };