dashboard: remove sentry as a dependency of dashboard-common (#34096)

- Replaces dashboard-common's sentry dependency by passing through relevant functions through `DeploymentInfoContext`
- In some places, I chose to completely remove calls to `captureMessage` if they didn't seem useful
- Cleans up some other dead code / packages

GitOrigin-RevId: c86d7a65cbe1a381f5f237c4f6c3a1aedc9b78d2

npm-packages/dashboard-common/package.json

@@ -23,7 +23,6 @@
     "@monaco-editor/react": "4.5.1",
     "@radix-ui/react-icons": "~1.3.0",
     "@radix-ui/react-tooltip": "~1.1.0",
-    "@sentry/nextjs": "7.120.2",
     "@tanstack/react-table": "~8.20.6",
     "acorn": "~8.8.1",
     "base64-js": "^1.5.1",

npm-packages/dashboard-common/src/elements/BigChart.tsx

@@ -1,5 +1,4 @@
-import { captureException } from "@sentry/nextjs";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import {
   CartesianGrid,
   Legend,
@@ -14,6 +13,7 @@ import { LoadingTransition } from "@common/elements/Loading";
 import { ChartData, ChartDataSource } from "@common/lib/charts/types";
 import { Callout } from "@common/elements/Callout";
 import { ChartTooltip } from "@common/elements/ChartTooltip";
+import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 
 export function BigChart({
   dataSources,
@@ -33,6 +33,8 @@ export function BigChart({
   const [startDate] = useState(initStartDate);
   const [endDate] = useState(initEndDate);
 
+  const { captureException } = useContext(DeploymentInfoContext);
+
   useEffect(() => {
     async function getChartData() {
       if (startDate < endDate) {
@@ -55,7 +57,7 @@ export function BigChart({
       }
     }
     void getChartData();
-  }, [dataSources, startDate, endDate]);
+  }, [dataSources, startDate, endDate, captureException]);
 
   return (
     <div className="flex flex-col gap-6 pt-4">

npm-packages/dashboard-common/src/elements/ObjectEditor/ObjectEditor.tsx

@@ -11,7 +11,6 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import isArray from "lodash/isArray";
 import isPlainObject from "lodash/isPlainObject";
 import { UNDEFINED_PLACEHOLDER } from "system-udfs/convex/_system/frontend/patchDocumentsFields";
-import { captureMessage } from "@sentry/nextjs";
 import { useMount } from "react-use";
 import { useRouter } from "next/router";
 import { stringifyValue } from "@common/lib/stringifyValue";
@@ -333,7 +332,6 @@ function setErrorMarkers(
     .getModels()
     ?.find((m) => path.replace(":", "_") === m.uri.path.slice(1));
   if (!model) {
-    captureMessage(`Model not found in Monaco editor for path: ${path}`);
     return;
   }
   monaco.editor.setModelMarkers(model, "", markers);

npm-packages/dashboard-common/src/elements/ObjectEditor/useIdDecorations.tsx

@@ -7,7 +7,6 @@ import { useRouter } from "next/router";
 import { cn } from "@common/lib/cn";
 import { GenericDocument } from "convex/server";
 import { SourceLocation } from "acorn";
-import { captureMessage } from "@sentry/nextjs";
 import type { editor } from "monaco-editor/esm/vs/editor/editor.api";
 import { stringifyValue } from "@common/lib/stringifyValue";
 import {
@@ -69,7 +68,6 @@ export function useIdDecorations(
       .getModels()
       ?.find((m) => path.replace(":", "_") === m.uri.path.slice(1));
     if (!model) {
-      captureMessage(`Model not found in Monaco editor for path: ${path}`);
       return;
     }
 

npm-packages/dashboard-common/src/features/data/components/DataToolbar/ClearTableConfirmation.tsx

@@ -1,10 +1,10 @@
-import { captureException } from "@sentry/nextjs";
 import { Cursor } from "convex/server";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { useMountedState } from "react-use";
 import { useInvalidateShapes } from "@common/features/data/lib/api";
 import { ConfirmationDialog } from "@common/elements/ConfirmationDialog";
 import { toast } from "@common/lib/utils";
+import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 
 export function ClearTableConfirmation({
   numRows,
@@ -49,6 +49,8 @@ export function ClearTableConfirmation({
 
   const invalidateShapes = useInvalidateShapes();
 
+  const { captureException } = useContext(DeploymentInfoContext);
+
   return (
     <ConfirmationDialog
       onClose={closeWithConfirmation}

npm-packages/dashboard-common/src/features/data/components/DataToolbar/DataToolbar.test.tsx

@@ -9,54 +9,9 @@ import {
   DataToolbar,
   DataToolbarProps,
 } from "@common/features/data/components/DataToolbar/DataToolbar";
-import {
-  DeploymentInfo,
-  DeploymentInfoContext,
-} from "@common/lib/deploymentContext";
+import { DeploymentInfoContext } from "@common/lib/deploymentContext";
 import { FunctionsContext } from "@common/lib/functions/FunctionsProvider";
-
-const deploymentInfo: DeploymentInfo = {
-  ok: true,
-  deploymentUrl: process.env.NEXT_PUBLIC_DEPLOYMENT_URL!,
-  adminKey: process.env.NEXT_PUBLIC_ADMIN_KEY!,
-  useCurrentTeam: () => ({
-    id: 0,
-    name: "Team",
-    slug: "team",
-  }),
-  useTeamMembers: () => [],
-  useTeamEntitlements: () => ({
-    auditLogsEnabled: true,
-  }),
-  useCurrentUsageBanner: () => null,
-  useCurrentProject: () => ({
-    id: 0,
-    name: "Project",
-    slug: "project",
-    teamId: 0,
-  }),
-  useLogDeploymentEvent: () => () => {},
-  useCurrentDeployment: () => ({
-    id: 0,
-    name: "local",
-    deploymentType: "prod",
-    projectId: 0,
-    kind: "local",
-    previewIdentifier: null,
-  }),
-  useHasProjectAdminPermissions: () => true,
-  useIsDeploymentPaused: () => false,
-  useProjectEnvironmentVariables: () => ({ configs: [] }),
-  CloudImport: ({ sourceCloudBackupId }: { sourceCloudBackupId: number }) => (
-    <div>{sourceCloudBackupId}</div>
-  ),
-  TeamMemberLink: () => <div />,
-  useTeamUsageState: () => "Default",
-  teamsURI: "/",
-  projectsURI: "/",
-  deploymentsURI: "/",
-  isSelfHosted: true,
-};
+import { mockDeploymentInfo } from "@common/lib/mockDeploymentInfo";
 
 jest.mock("convex/react", () => ({
   useQuery: jest.fn(),
@@ -121,7 +76,9 @@ describe("DataToolbar", () => {
     // @ts-expect-error
     useRouter.mockReturnValue({ query, replace: jest.fn() });
     return render(
-      <Toolbar componentProps={componentProps} hookProps={hookProps} />,
+      <DeploymentInfoContext.Provider value={mockDeploymentInfo}>
+        <Toolbar componentProps={componentProps} hookProps={hookProps} />,
+      </DeploymentInfoContext.Provider>,
     );
   };
 
@@ -156,35 +113,34 @@ describe("DataToolbar", () => {
       activeSchema: null,
       ...hookProps,
     });
+
     return (
-      <DeploymentInfoContext.Provider value={deploymentInfo}>
-        <FunctionsContext.Provider value={useMemo(() => new Map(), [])}>
-          {popupState.popupEl}
-          <DataToolbar
-            popupState={popupState}
-            hasFilters={hasFilters}
-            filters={filters}
-            setShowFilters={jest.fn()}
-            showFilters={false}
-            tableName={tableName}
-            numRowsLoaded={0}
-            isProd={false}
-            isLoadingMore={false}
-            tableSchemaStatus={{
-              tableName,
-              isDefined: false,
-              referencedByTable: undefined,
-              isValidationRunning: false,
-            }}
-            deleteRows={jest.fn()}
-            selectedRowsIds={new Set()}
-            allRowsSelected={false}
-            selectedDocument={undefined}
-            {...hookProps}
-            {...componentProps}
-          />
-        </FunctionsContext.Provider>
-      </DeploymentInfoContext.Provider>
+      <FunctionsContext.Provider value={useMemo(() => new Map(), [])}>
+        {popupState.popupEl}
+        <DataToolbar
+          popupState={popupState}
+          hasFilters={hasFilters}
+          filters={filters}
+          setShowFilters={jest.fn()}
+          showFilters={false}
+          tableName={tableName}
+          numRowsLoaded={0}
+          isProd={false}
+          isLoadingMore={false}
+          tableSchemaStatus={{
+            tableName,
+            isDefined: false,
+            referencedByTable: undefined,
+            isValidationRunning: false,
+          }}
+          deleteRows={jest.fn()}
+          selectedRowsIds={new Set()}
+          allRowsSelected={false}
+          selectedDocument={undefined}
+          {...hookProps}
+          {...componentProps}
+        />
+      </FunctionsContext.Provider>
     );
   }
 

npm-packages/dashboard-common/src/features/data/components/Table/TableContextMenu.test.tsx

@@ -9,6 +9,8 @@ import {
   TableContextMenuProps,
 } from "@common/features/data/components/Table/TableContextMenu";
 import { mockConvexReactClient } from "@common/lib/mockConvexReactClient";
+import { DeploymentInfoContext } from "@common/lib/deploymentContext";
+import { mockDeploymentInfo } from "@common/lib/mockDeploymentInfo";
 
 jest.mock("next/router", () => jest.requireActual("next-router-mock"));
 
@@ -72,9 +74,11 @@ describe("TableContextMenu", () => {
 
   const renderWithProvider = (props: Partial<TableContextMenuProps> = {}) =>
     render(
-      <ConvexProvider client={mockClient}>
-        <TableContextMenu {...defaultProps} {...props} />
-      </ConvexProvider>,
+      <DeploymentInfoContext.Provider value={mockDeploymentInfo}>
+        <ConvexProvider client={mockClient}>
+          <TableContextMenu {...defaultProps} {...props} />
+        </ConvexProvider>
+      </DeploymentInfoContext.Provider>,
     );
 
   beforeEach(() => {