introduce sentry to the FE (#709)

fern-api · Apr 26, 2024 · 337ffa6 · 337ffa6
1 parent e9a96c9
commit 337ffa6
Show file tree

Hide file tree

Showing 24 changed files with 634 additions and 152 deletions.
diff --git a/packages/ui/app/package.json b/packages/ui/app/package.json
@@ -36,7 +36,6 @@
   },
   "dependencies": {
     "@datadog/browser-logs": "^5.14.0",
-    "@datadog/browser-rum": "^5.14.0",
     "@fern-api/fdr-sdk": "workspace:*",
     "@fern-ui/core-utils": "workspace:*",
     "@fern-ui/fdr-utils": "workspace:*",
@@ -55,6 +54,7 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@sentry/nextjs": "^7.105.0",
     "@shikijs/transformers": "^1.2.2",
     "@types/nprogress": "^0.2.3",
     "algoliasearch": "^4.22.1",

diff --git a/packages/ui/app/src/analytics/datadog.ts b/packages/ui/app/src/analytics/datadog.ts
@@ -2,7 +2,7 @@
 "use client";
 
 import { datadogLogs } from "@datadog/browser-logs";
-import { datadogRum } from "@datadog/browser-rum";
+// import { datadogRum } from "@datadog/browser-rum";
 
 const clientToken = process?.env.NEXT_PUBLIC_DATADOG_CLIENT_TOKEN?.trim();
 // https://docs.datadoghq.com/logs/log_collection/javascript/#configuration
@@ -15,20 +15,20 @@ if (clientToken && process.env.NODE_ENV === "production") {
         env: process?.env.NEXT_PUBLIC_APPLICATION_ENVIRONMENT ?? "dev",
     });
 
-    datadogRum.init({
-        applicationId: process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID ?? "unset",
-        clientToken,
-        site: "datadoghq.com",
-        service: "docs-frontend",
-        env: process?.env.NEXT_PUBLIC_APPLICATION_ENVIRONMENT ?? "dev",
-        version: process.env.VERSION,
-        sessionSampleRate: 100,
-        sessionReplaySampleRate: 100,
-        trackUserInteractions: true,
-        trackResources: true,
-        trackLongTasks: true,
-        defaultPrivacyLevel: "mask-user-input",
-    });
+    // datadogRum.init({
+    //     applicationId: process.env.NEXT_PUBLIC_DATADOG_APPLICATION_ID ?? "unset",
+    //     clientToken,
+    //     site: "datadoghq.com",
+    //     service: "docs-frontend",
+    //     env: process?.env.NEXT_PUBLIC_APPLICATION_ENVIRONMENT ?? "dev",
+    //     version: process.env.VERSION,
+    //     sessionSampleRate: 100,
+    //     sessionReplaySampleRate: 100,
+    //     trackUserInteractions: true,
+    //     trackResources: true,
+    //     trackLongTasks: true,
+    //     defaultPrivacyLevel: "mask-user-input",
+    // });
 }
 
 export default function DatadogInit(): null {

diff --git a/packages/ui/app/src/analytics/datadogRum.ts b/packages/ui/app/src/analytics/datadogRum.ts
diff --git a/packages/ui/app/src/analytics/sentry.ts b/packages/ui/app/src/analytics/sentry.ts
@@ -0,0 +1,16 @@
+import * as Sentry from "@sentry/nextjs";
+
+interface FernUIErrorContext {
+    context: string;
+    errorSource: string;
+    errorDescription: string;
+    data?: Record<string, unknown>;
+}
+
+export function captureSentryError(e: unknown, context: FernUIErrorContext): void {
+    Sentry.captureException(e, context);
+}
+
+export function captureSentryErrorMessage(message: string): void {
+    Sentry.captureMessage(message);
+}
diff --git a/packages/ui/app/src/api-page/examples/getJsonLineNumbers.ts b/packages/ui/app/src/api-page/examples/getJsonLineNumbers.ts
@@ -1,6 +1,6 @@
 import { isPlainObject } from "@fern-ui/core-utils";
 import jp from "jsonpath";
-import { emitDatadogError } from "../../analytics/datadogRum";
+import { captureSentryError } from "../../analytics/sentry";
 import { JsonPropertyPath, JsonPropertyPathPart } from "./JsonPropertyPath";
 import { lineNumberOf } from "./utils";
 
@@ -22,7 +22,7 @@ export function getJsonLineNumbers(json: unknown, path: JsonPropertyPath, start
         // eslint-disable-next-line no-console
         console.error(e);
 
-        emitDatadogError(e, {
+        captureSentryError(e, {
             context: "ApiPage",
             errorSource: "getJsonLineNumbers",
             errorDescription:

diff --git a/packages/ui/app/src/api-page/examples/stringifyHttpRequestExampleToCurl.ts b/packages/ui/app/src/api-page/examples/stringifyHttpRequestExampleToCurl.ts
@@ -1,5 +1,5 @@
 import { visitDiscriminatedUnion } from "@fern-ui/core-utils";
-import { emitDatadogError } from "../../analytics/datadogRum";
+import { captureSentryError } from "../../analytics/sentry";
 import { unknownToString } from "../../util/unknownToString";
 import { HttpRequestExample } from "./HttpRequestExample";
 
@@ -14,7 +14,7 @@ export function stringifyHttpRequestExampleToCurl(request: HttpRequestExample):
         // eslint-disable-next-line no-console
         console.error(e);
 
-        emitDatadogError(e, {
+        captureSentryError(e, {
             context: "ApiPage",
             errorSource: "unsafeStringifyHttpRequestExampleToCurl",
             errorDescription:

diff --git a/packages/ui/app/src/api-playground/PlaygroundEndpoint.tsx b/packages/ui/app/src/api-playground/PlaygroundEndpoint.tsx
@@ -4,8 +4,8 @@ import { Loadable, failed, loaded, loading, notStartedLoading } from "@fern-ui/l
 import { PaperPlaneIcon } from "@radix-ui/react-icons";
 import { Dispatch, FC, ReactElement, SetStateAction, useCallback, useState } from "react";
 import { resolve } from "url";
-import { emitDatadogError } from "../analytics/datadogRum";
 import { capturePosthogEvent } from "../analytics/posthog";
+import { captureSentryError } from "../analytics/sentry";
 import { FernTooltipProvider } from "../components/FernTooltip";
 import { useDocsContext } from "../contexts/docs-context/useDocsContext";
 import { ResolvedEndpointDefinition, ResolvedTypeDefinition } from "../resolver/types";
@@ -227,7 +227,7 @@ export const PlaygroundEndpoint: FC<PlaygroundEndpointProps> = ({
             console.error(e);
             setResponse(failed(e));
 
-            emitDatadogError(e, {
+            captureSentryError(e, {
                 context: "ApiPlayground",
                 errorSource: "sendRequest",
                 errorDescription:

diff --git a/packages/ui/app/src/components/FernErrorBoundary.tsx b/packages/ui/app/src/components/FernErrorBoundary.tsx
@@ -2,7 +2,7 @@ import { memoize } from "lodash-es";
 import { useRouter } from "next/router";
 import React, { PropsWithChildren, ReactElement, useEffect } from "react";
 import { ErrorBoundary, FallbackProps } from "react-error-boundary";
-import { emitDatadogError, emitDatadogErrorLog } from "../analytics/datadogRum";
+import { captureSentryError, captureSentryErrorMessage } from "../analytics/sentry";
 
 export declare interface FernErrorBoundaryProps {
     component?: string; // component displayName where the error occurred
@@ -26,7 +26,7 @@ export function FernErrorTag({
     useEffect(() => {
         // eslint-disable-next-line no-console
         console.error(error);
-        emitDatadogError(error, {
+        captureSentryError(error, {
             context: component,
             errorSource: "FernErrorTag",
             errorDescription:
@@ -68,7 +68,7 @@ const FernErrorBoundaryInternal: React.FC<FernErrorBoundaryProps> = ({
     useEffect(() => {
         if (refreshOnError) {
             // eslint-disable-next-line no-console
-            emitDatadogErrorLog("Fern Docs crashed. Reloading the page might fix the issue.");
+            captureSentryErrorMessage("Fern Docs crashed. Reloading the page might fix the issue.");
             router.reload();
         }
     }, [refreshOnError, router]);

diff --git a/packages/ui/app/src/contexts/navigation-context/NavigationContextProvider.tsx b/packages/ui/app/src/contexts/navigation-context/NavigationContextProvider.tsx
@@ -5,7 +5,7 @@ import Head from "next/head";
 import { useRouter } from "next/router";
 import { PropsWithChildren, useEffect, useMemo, useState } from "react";
 import { renderToString } from "react-dom/server";
-import { emitDatadogError } from "../../analytics/datadogRum";
+import { captureSentryError } from "../../analytics/sentry";
 import { MdxContent } from "../../mdx/MdxContent";
 import { FernDocsFrontmatter } from "../../mdx/mdx";
 import { ResolvedPath } from "../../resolver/ResolvedPath";
@@ -306,7 +306,7 @@ function convertDescriptionToString(
         // eslint-disable-next-line no-console
         console.error("Error rendering MDX to string", e);
 
-        emitDatadogError(e, {
+        captureSentryError(e, {
             context: "NavigationContext",
             errorSource: "convertDescriptionToString",
             errorDescription:

diff --git a/packages/ui/app/src/mdx/mdx.ts b/packages/ui/app/src/mdx/mdx.ts
@@ -8,7 +8,7 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import remarkSmartypants from "remark-smartypants";
 import type { PluggableList } from "unified";
-import { emitDatadogError } from "../analytics/datadogRum";
+import { captureSentryError } from "../analytics/sentry";
 import { stringHasMarkdown } from "./common/util";
 import { rehypeFernCode } from "./plugins/rehypeFernCode";
 import { rehypeFernComponents } from "./plugins/rehypeFernComponents";
@@ -186,7 +186,7 @@ export async function maybeSerializeMdxContent(
         // eslint-disable-next-line no-console
         console.error(e);
 
-        emitDatadogError(e, {
+        captureSentryError(e, {
             context: "MDX",
             errorSource: "maybeSerializeMdxContent",
             errorDescription: "Failed to serialize MDX content",
@@ -229,7 +229,7 @@ export async function serializeMdxWithFrontmatter(
         // eslint-disable-next-line no-console
         console.error(e);
 
-        emitDatadogError(e, {
+        captureSentryError(e, {
             context: "MDX",
             errorSource: "maybeSerializeMdxContent",
             errorDescription: "Failed to serialize MDX content",

diff --git a/packages/ui/app/src/resolver/ApiDefinitionResolver.ts b/packages/ui/app/src/resolver/ApiDefinitionResolver.ts
@@ -10,7 +10,7 @@ import {
     FlattenedWebhookDefinition,
 } from "@fern-ui/fdr-utils";
 import { mapValues } from "lodash-es";
-import { emitDatadogError } from "../analytics/datadogRum";
+import { captureSentryError } from "../analytics/sentry";
 import { sortKeysByShape } from "../api-page/examples/sortKeysByShape";
 import { FernSerializeMdxOptions, maybeSerializeMdxContent, serializeMdxWithFrontmatter } from "../mdx/mdx";
 import { ApiTypeResolver } from "./ApiTypeResolver";
@@ -735,7 +735,7 @@ export class ApiDefinitionResolver {
             // eslint-disable-next-line no-console
             console.error("Failed to sort JSON keys by type shape", e);
 
-            emitDatadogError(e, {
+            captureSentryError(e, {
                 context: "ApiPage",
                 errorSource: "sortKeysByShape",
                 errorDescription:

diff --git a/packages/ui/app/src/services/useSearchService.ts b/packages/ui/app/src/services/useSearchService.ts
@@ -1,7 +1,7 @@
 import { atom, useAtom, useAtomValue } from "jotai";
 import { once } from "lodash-es";
 import { useEffect, useMemo } from "react";
-import { emitDatadogError } from "../analytics/datadogRum";
+import { captureSentryError } from "../analytics/sentry";
 import { useDocsContext } from "../contexts/docs-context/useDocsContext";
 import { getEnvConfig, type EnvironmentConfig } from "../env";
 import { REGISTRY_SERVICE } from "./registry";
@@ -34,7 +34,7 @@ function createSearchApiKeyLoader(envConfig: EnvironmentConfig, indexSegmentId:
             // eslint-disable-next-line no-console
             console.error(resp.error);
 
-            emitDatadogError(resp.error, {
+            captureSentryError(resp.error, {
                 context: "SearchService",
                 errorSource: "createSearchApiKeyLoader",
                 errorDescription: "[P0] Failed to fetch index segment api key.",
@@ -102,7 +102,7 @@ export function useCreateSearchService(currentVersionIndex: number | undefined):
             // eslint-disable-next-line no-console
             console.error("Failed to initialize search service", e);
 
-            emitDatadogError(e, {
+            captureSentryError(e, {
                 context: "SearchService",
                 errorSource: "useCreateSearchService",
                 errorDescription: "Failed to initialize search service",

diff --git a/packages/ui/app/src/syntax-highlighting/FernSyntaxHighlighter.tsx b/packages/ui/app/src/syntax-highlighting/FernSyntaxHighlighter.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, useMemo } from "react";
-import { emitDatadogError } from "../analytics/datadogRum";
+import { captureSentryError } from "../analytics/sentry";
 import { FernErrorBoundary } from "../components/FernErrorBoundary";
 import "./FernSyntaxHighlighter.css";
 import { FernSyntaxHighlighterTokens, ScrollToHandle } from "./FernSyntaxHighlighterTokens";
@@ -35,7 +35,7 @@ export const FernSyntaxHighlighter = forwardRef<HTMLPreElement, FernSyntaxHighli
         } catch (e) {
             // eslint-disable-next-line no-console
             console.error(e);
-            emitDatadogError(e, {
+            captureSentryError(e, {
                 context: "FernSyntaxHighlighter",
                 errorSource: "highlightTokens",
                 errorDescription: "Error occurred while highlighting tokens",

diff --git a/packages/ui/app/src/util/convertNavigatableToResolvedPath.ts b/packages/ui/app/src/util/convertNavigatableToResolvedPath.ts
@@ -8,7 +8,7 @@ import {
 } from "@fern-ui/fdr-utils";
 import grayMatter from "gray-matter";
 import type { MDXRemoteSerializeResult } from "next-mdx-remote";
-import { emitDatadogError } from "../analytics/datadogRum";
+import { captureSentryError } from "../analytics/sentry";
 import {
     FernDocsFrontmatter,
     FernSerializeMdxOptions,
@@ -48,7 +48,7 @@ async function getSubtitle(
     } catch (e) {
         // eslint-disable-next-line no-console
         console.error("Error occurred while parsing frontmatter", e);
-        emitDatadogError(e, {
+        captureSentryError(e, {
             context: "getStaticProps",
             errorSource: "getSubtitle",
             errorDescription: "Error occurred while parsing frontmatter to get the subtitle (aka excerpt)",

diff --git a/packages/ui/app/src/util/parseStringStyle.ts b/packages/ui/app/src/util/parseStringStyle.ts
@@ -1,6 +1,6 @@
 import { camelCase } from "lodash-es";
 import StyleToObject from "style-to-object";
-import { emitDatadogError } from "../analytics/datadogRum";
+import { captureSentryError } from "../analytics/sentry";
 
 export function parseStringStyle(value: unknown): Record<string, string> | undefined {
     if (typeof value !== "string") {
@@ -15,7 +15,7 @@ export function parseStringStyle(value: unknown): Record<string, string> | undef
         // eslint-disable-next-line no-console
         console.error("Failed to parse style", e);
 
-        emitDatadogError(e, {
+        captureSentryError(e, {
             context: "FernSyntaxHighlighter",
             errorSource: "parseStyle",
             errorDescription: "Failed to parse style originating from shiki",

diff --git a/packages/ui/docs-bundle/.gitignore b/packages/ui/docs-bundle/.gitignore
@@ -0,0 +1,3 @@
+
+# Sentry Config File
+.sentryclirc
diff --git a/packages/ui/docs-bundle/next.config.js b/packages/ui/docs-bundle/next.config.js
@@ -120,3 +120,48 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
 });
 
 module.exports = withBundleAnalyzer(nextConfig);
+
+// Injected content via Sentry wizard below
+
+const { withSentryConfig } = require("@sentry/nextjs");
+
+module.exports = withSentryConfig(
+    module.exports,
+    {
+        // For all available options, see:
+        // https://github.com/getsentry/sentry-webpack-plugin#options
+
+        // Suppresses source map uploading logs during build
+        silent: true,
+        org: "fern-api",
+        project: "docs-frontend",
+    },
+    {
+        // For all available options, see:
+        // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+        // Upload a larger set of source maps for prettier stack traces (increases build time)
+        widenClientFileUpload: true,
+
+        // Transpiles SDK to be compatible with IE11 (increases bundle size)
+        transpileClientSDK: true,
+
+        // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+        // This can increase your server load as well as your hosting bill.
+        // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+        // side errors will fail.
+        tunnelRoute: "/monitoring",
+
+        // Hides source maps from generated client bundles
+        hideSourceMaps: true,
+
+        // Automatically tree-shake Sentry logger statements to reduce bundle size
+        disableLogger: true,
+
+        // Enables automatic instrumentation of Vercel Cron Monitors.
+        // See the following for more information:
+        // https://docs.sentry.io/product/crons/
+        // https://vercel.com/docs/cron-jobs
+        automaticVercelMonitors: true,
+    },
+);
diff --git a/packages/ui/docs-bundle/package.json b/packages/ui/docs-bundle/package.json
@@ -46,6 +46,7 @@
     "@fern-ui/core-utils": "workspace:*",
     "@fern-ui/fdr-utils": "workspace:*",
     "@fern-ui/ui": "workspace:*",
+    "@sentry/nextjs": "^7.105.0",
     "@vercel/edge-config": "^1.1.0",
     "@workos-inc/node": "^6.1.0",
     "cssnano": "^6.0.3",