Enable Sentry back

app/domain/env.ts

@@ -48,6 +48,11 @@ export const GA_TRACKING_ID =
 export const ADFS_PROFILE_URL =
   clientEnv?.ADFS_PROFILE_URL ?? process.env.ADFS_PROFILE_URL;
 
+export const SENTRY_DSN = clientEnv?.SENTRY_DSN ?? process.env.SENTRY_DSN ?? "";
+
+export const SENTRY_ENV =
+  clientEnv?.SENTRY_ENV ?? process.env.SENTRY_ENV ?? "development";
+
 /**
  * Server-side-only **RUNTIME** variables (not exposed through window)
  */

app/graphql/apollo-sentry-plugin.ts

@@ -0,0 +1,72 @@
+import * as Sentry from "@sentry/nextjs";
+import { ApolloServerPlugin, GraphQLRequest } from "apollo-server-plugin-base";
+
+const getDataCubeIri = (req: GraphQLRequest) => {
+  const { variables, operationName } = req;
+
+  if (
+    operationName === "DataCubePreview" ||
+    operationName === "DataCubeMetadata" ||
+    operationName === "DataCubeObservations" ||
+    operationName === "Components" ||
+    operationName === "ComponentsWithHierarchies" ||
+    operationName === "PossibleFilters"
+  ) {
+    return variables?.iri ?? variables?.cubeFilter?.iri;
+  } else if (operationName === "DimensionHierarchy") {
+    return variables?.cubeIri;
+  } else {
+    return variables?.dataCubeIri;
+  }
+};
+
+export const SentryPlugin: ApolloServerPlugin = {
+  async requestDidStart({ request }) {
+    const rootSpan = Sentry.startSpanManual(
+      {
+        op: "gql",
+        name: request.operationName
+          ? `GQL - ${request.operationName}`
+          : "GQL - Unnamed",
+      },
+      (span) => span
+    );
+
+    const dataCubeIri = getDataCubeIri(request);
+
+    if (dataCubeIri) {
+      Sentry.setTag("visualize.dataCubeIri", dataCubeIri);
+    }
+
+    if (request.variables?.sourceUrl) {
+      Sentry.setTag("visualize.sourceUrl", request.variables.sourceUrl);
+    }
+
+    return {
+      async willSendResponse() {
+        rootSpan.end();
+      },
+
+      async executionDidStart() {
+        return {
+          willResolveField({ info }) {
+            const description = `${info.parentType.name}.${info.fieldName}`;
+
+            const span = Sentry.startSpanManual(
+              {
+                op: "resolver",
+                name: description,
+                parentSpan: rootSpan,
+              },
+              (span) => span
+            );
+
+            return () => {
+              span.end();
+            };
+          },
+        };
+      },
+    };
+  },
+};

app/instrumentation-client.ts

@@ -0,0 +1,10 @@
+import * as Sentry from "@sentry/nextjs";
+
+import { BUILD_VERSION, SENTRY_DSN, SENTRY_ENV } from "./domain/env";
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  environment: SENTRY_ENV,
+  release: `visualization-tool@${BUILD_VERSION}`,
+  tracesSampleRate: process.env.NODE_ENV === "development" ? 1.0 : 0.1,
+});

app/instrumentation.edge.ts

@@ -0,0 +1,10 @@
+import * as Sentry from "@sentry/nextjs";
+
+import { BUILD_VERSION, SENTRY_DSN, SENTRY_ENV } from "./domain/env";
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  environment: SENTRY_ENV,
+  release: `visualization-tool@${BUILD_VERSION}`,
+  tracesSampleRate: process.env.NODE_ENV === "development" ? 1.0 : 0.1,
+});

app/instrumentation.node.ts

@@ -4,6 +4,9 @@ import { resourceFromAttributes } from "@opentelemetry/resources";
 import { NodeSDK } from "@opentelemetry/sdk-node";
 import { BatchSpanProcessor } from "@opentelemetry/sdk-trace-node";
 import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
+import * as Sentry from "@sentry/nextjs";
+
+import { BUILD_VERSION, SENTRY_DSN, SENTRY_ENV } from "./domain/env";
 
 // diag.setLogger(new DiagConsoleLogger(), DiagLogLevel.DEBUG);
 
@@ -14,3 +17,10 @@ const sdk = new NodeSDK({
   spanProcessor: new BatchSpanProcessor(new OTLPTraceExporter()),
 });
 sdk.start();
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  environment: SENTRY_ENV,
+  release: `visualization-tool@${BUILD_VERSION}`,
+  tracesSampleRate: process.env.NODE_ENV === "development" ? 1.0 : 0.1,
+});

app/instrumentation.ts

@@ -1,5 +1,12 @@
+import * as Sentry from "@sentry/nextjs";
+
 export async function register() {
   if (process.env.NEXT_RUNTIME === "nodejs") {
     await import("./instrumentation.node");
   }
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("./instrumentation.edge");
+  }
 }
+
+export const onRequestError = Sentry.captureRequestError;

app/next.config.js

@@ -1,10 +1,12 @@
-// This file sets a custom webpack configuration to use your Next.js app.
+// This file sets a custom webpack configuration to use your Next.js app with Sentry.
 // https://nextjs.org/docs/api-reference/next.config.js/introduction
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 });
 const withMDX = require("@next/mdx")();
 const withPreconstruct = require("@preconstruct/next");
+const { withSentryConfig } = require("@sentry/nextjs");
 const { IgnorePlugin } = require("webpack");
 
 const pkg = require("../package.json");
@@ -64,11 +66,9 @@ module.exports = withPreconstruct(
           headers[0].headers.push({
             key: "Content-Security-Policy",
             value: [
-              `default-src 'self' 'unsafe-inline'${
-                process.env.NODE_ENV === "development" ? " 'unsafe-eval'" : ""
+              `default-src 'self' 'unsafe-inline'${process.env.NODE_ENV === "development" ? " 'unsafe-eval'" : ""
               } https://vercel.live/ https://vercel.com https://*.googletagmanager.com`,
-              `script-src 'self' 'unsafe-inline'${
-                process.env.NODE_ENV === "development" ? " 'unsafe-eval'" : ""
+              `script-src 'self' 'unsafe-inline'${process.env.NODE_ENV === "development" ? " 'unsafe-eval'" : ""
               } https://vercel.live/ https://vercel.com https://*.googletagmanager.com https://api.mapbox.com https://api.maptiler.com`,
               `style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.jsdelivr.net`,
               `font-src 'self'`,
@@ -103,7 +103,7 @@ module.exports = withPreconstruct(
         ignoreDuringBuilds: true,
       },
 
-      webpack(config, { dev }) {
+      webpack (config, { dev }) {
         config.module.rules.push({
           test: /\.(graphql|gql)$/,
           exclude: /node_modules/,
@@ -144,7 +144,7 @@ module.exports = withPreconstruct(
         return config;
       },
 
-      async redirects() {
+      async redirects () {
         return [
           {
             source: "/storybook",
@@ -156,3 +156,9 @@ module.exports = withPreconstruct(
     })
   )
 );
+
+module.exports = withSentryConfig(
+  module.exports,
+  { silent: true },
+  { hideSourcemaps: true }
+);

app/package.json

@@ -58,6 +58,7 @@
     "@rdfjs/data-model": "^2.0.2",
     "@rdfjs/namespace": "^2.0.1",
     "@reach/auto-id": "^0.15.3",
+    "@sentry/nextjs": "^10.45.0",
     "@testing-library/react": "^16.1.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@tpluscode/rdf-ns-builders": "2.0.1",

app/pages/api/graphql.ts

@@ -10,6 +10,8 @@ import {
 import depthLimit from "graphql-depth-limit";
 import { NextApiRequest, NextApiResponse } from "next";
 
+import { SentryPlugin } from "@/graphql/apollo-sentry-plugin";
+
 import { createContext, VisualizeGraphQLContext } from "../../graphql/context";
 import { resolvers } from "../../graphql/resolvers";
 import typeDefs from "../../graphql/schema.graphql";
@@ -50,7 +52,7 @@ const server = new ApolloServer({
   cache: "bounded",
   introspection: process.env.NODE_ENV !== "production",
   validationRules: [depthLimit(1)],
-  plugins: [ApolloServerPluginLandingPageGraphQLPlayground],
+  plugins: [ApolloServerPluginLandingPageGraphQLPlayground, SentryPlugin],
 });
 
 export const config = {