Enhanced Usage Dashboard and Backend Refinements

[ben-fornefeld]

This PR introduces several improvements to the dashboard, particularly around usage statistics and data presentation, along with some backend enhancements for robustness and developer experience.

Key Changes:

1. Dashboard & UI Enhancements:

• cost-card.tsx & vcpu-card.tsx & ram-card.tsx:
  • Refactored to use a Suspense boundary with a ChartPlaceholder for better loading states.
  • Data fetching logic moved to CostCardContentResolver, VCPUCardContentResolver and RamCardContentResolver respectively, which now utilize getUsageThroughReactCache to avoid request duplication.
  • Error handling for data fetching is now more robust, throwing an error if data loading fails, which will be caught by an Error Boundary.
• sandboxes-started-chart.tsx:
  • Introduced grouping options (Month/Week) for sandboxes started data, allowing users to visualize data at different granularities.
  • The chart now dynamically adjusts its start date based on the available data and a minimum display period (6 months or 12 weeks).
  • Enhanced X and Y axis tick formatters for better readability (e.g., "1M" for 1,000,000).
  • Improved tooltip content to display the date range for the selected data point (month or week).
• chart-placeholder.tsx (New File):
  • A new component to display a placeholder for charts during loading or when data is unavailable.
  • Features an animated loading state and a static background for when no data is present.
  • Includes fading gradients for a smoother visual appearance.
• error.tsx:
  • Added hideFrame prop to ErrorBoundary and CatchErrorBoundary to allow for more flexible error display (e.g., within chart components without the default frame).
  • CatchErrorBoundary can now accept classNames for better styling control of the error boundary and its wrapper.
• card.tsx:
  • Cards now have a default rounded-sm style.
• chart.tsx (Primitives):
  • ChartTooltipContent now uses cardVariants({ variant: 'layer' }) for consistent styling with other layered UI elements.
• select.tsx (Primitives):
  • SelectTrigger can now accept classNames prop to customize the trigger and icon elements.

2. Backend & Data Handling:

• pg.ts (lib/clients):
  • Improved PostgreSQL client instantiation to use a global instance in development (global.pgClient) to prevent multiple connections during hot reloading.
  • Added connect_timeout: 10000 for the production PostgreSQL client.
• get-sandboxes-started.ts (New File - server/usage):
  • New server action to fetch aggregated daily counts of sandboxes started for a specific team.
  • Includes authorization checks to ensure the user has access to the team's data.
• get-usage.ts (server/usage):
  • Refactored getUsage to getUsageThroughReactCache. The core fetching logic is now in _fetchTeamUsageDataLogic and wrapped with React.cache via getAndCacheTeamUsageData.
• types.ts (server/usage):
  • Added SandboxesStartedData and SandboxesStartedDelta types for the new sandboxes started data.
• server.ts (lib/utils):
  • Minor documentation update for forceDynamicRendering.

Purpose & Impact:

• Improved User Experience: The dashboard provides better loading states, more flexible data visualization for sandboxes started, and clearer presentation of usage costs and vCPU hours.
• Enhanced Security & Privacy: Redacting sensitive information from server action logs improves security.
• Better Developer Experience: Global PG client in development prevents connection issues during hot reloads.
• More Robust Data Fetching: Centralized and cached usage data fetching with clearer error handling.

[linear]

E2B-2187 Show graph for started sandboxes under usage page

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 10, 2025 3:01pm
web-juliett	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 10, 2025 3:01pm

[sentry-io]

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

• ‼️ Error: An Unexpected Error Occurred, please try again. If the problem persists, please contact support. /dashboard/[teamIdOrSlug]/usage View Issue
• ‼️ Error: An Unexpected Error Occurred, please try again. If the problem persists, please contact support. /dashboard/[teamIdOrSlug]/usage View Issue
• ‼️ Error: An Unexpected Error Occurred, please try again. If the problem persists, please contact support. /dashboard/[teamIdOrSlug]/usage View Issue

_{Did you find this useful? React with a 👍 or 👎}

[ben-fornefeld]

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

• ‼️ Error: An Unexpected Error Occurred, please try again. If the problem persists, please contact support. /dashboard/[teamIdOrSlug]/usage View Issue
• ‼️ Error: An Unexpected Error Occurred, please try again. If the problem persists, please contact support. /dashboard/[teamIdOrSlug]/usage View Issue
• ‼️ Error: An Unexpected Error Occurred, please try again. If the problem persists, please contact support. /dashboard/[teamIdOrSlug]/usage View Issue

Did you find this useful? React with a 👍 or 👎

The errors reported here got introduced in this pr which is correct, but are false positives. These occured in a localhost production build & root cause is the error handling of sandboxes usage card errors. The thrown error is catched by sentry because we do not have an error boundary around it as for the other 3 cards.