diff --git a/apps/studio/components/interfaces/Reports/ReportChart.tsx b/apps/studio/components/interfaces/Reports/ReportChart.tsx index 831c3ff7b8c9d..5b9a4b38cdc50 100644 --- a/apps/studio/components/interfaces/Reports/ReportChart.tsx +++ b/apps/studio/components/interfaces/Reports/ReportChart.tsx @@ -7,6 +7,7 @@ * This component acts as a bridge between the data-fetching logic and the * presentational chart component. */ +import { useFillTimeseriesSorted } from 'hooks/analytics/useFillTimeseriesSorted' import LogChartHandler from 'components/ui/Charts/LogChartHandler' import { useChartData } from 'hooks/useChartData' import type { UpdateDateRange } from 'pages/project/[ref]/reports/database' @@ -60,6 +61,28 @@ const ReportChart = ({ : chart.showMaxValue, }) + const isTopListChart = chart.id === 'top-api-routes' || chart.id === 'top-rpc-functions' + + const chartDataArray = Array.isArray(data) ? data : [] + + const { data: filledData, isError: isFillError } = useFillTimeseriesSorted( + chartDataArray, + 'period_start', + (chartAttributes.length > 0 ? chartAttributes : chart.attributes).map( + (attr: any) => attr.attribute + ), + 0, + startDate, + endDate, + undefined, + interval + ) + + const finalData = + chartDataArray.length > 0 && chartDataArray.length < 20 && !isFillError && !isTopListChart + ? filledData + : chartDataArray + const getExpDemoChartData = () => new Array(20).fill(0).map((_, index) => ({ period_start: new Date(startDate).getTime() + index * 1000, @@ -129,7 +152,7 @@ const ReportChart = ({ attributes={ (chartAttributes.length > 0 ? chartAttributes : chart.attributes) as MultiAttribute[] } - data={data} + data={finalData} isLoading={isLoadingChart || isLoading} highlightedValue={highlightedValue as any} updateDateRange={updateDateRange} diff --git a/apps/studio/components/interfaces/Reports/Reports.constants.ts b/apps/studio/components/interfaces/Reports/Reports.constants.ts index ff12e3fdfee84..69edacca9cb66 100644 --- a/apps/studio/components/interfaces/Reports/Reports.constants.ts +++ b/apps/studio/components/interfaces/Reports/Reports.constants.ts @@ -36,38 +36,38 @@ export const REPORTS_DATEPICKER_HELPERS: ReportsDatetimeHelper[] = [ }, { text: REPORT_DATERANGE_HELPER_LABELS.LAST_60_MINUTES, - calcFrom: () => dayjs().subtract(1, 'hour').startOf('day').toISOString(), + calcFrom: () => dayjs().subtract(1, 'hour').toISOString(), calcTo: () => dayjs().toISOString(), default: true, availableIn: ['free', 'pro', 'team', 'enterprise'], }, { text: REPORT_DATERANGE_HELPER_LABELS.LAST_3_HOURS, - calcFrom: () => dayjs().subtract(3, 'hour').startOf('day').toISOString(), + calcFrom: () => dayjs().subtract(3, 'hour').toISOString(), calcTo: () => dayjs().toISOString(), availableIn: ['free', 'pro', 'team', 'enterprise'], }, { text: REPORT_DATERANGE_HELPER_LABELS.LAST_24_HOURS, - calcFrom: () => dayjs().subtract(1, 'day').startOf('day').toISOString(), + calcFrom: () => dayjs().subtract(1, 'day').toISOString(), calcTo: () => dayjs().toISOString(), availableIn: ['free', 'pro', 'team', 'enterprise'], }, { text: REPORT_DATERANGE_HELPER_LABELS.LAST_7_DAYS, - calcFrom: () => dayjs().subtract(7, 'day').startOf('day').toISOString(), + calcFrom: () => dayjs().subtract(7, 'day').toISOString(), calcTo: () => dayjs().toISOString(), availableIn: ['pro', 'team', 'enterprise'], }, { text: REPORT_DATERANGE_HELPER_LABELS.LAST_14_DAYS, - calcFrom: () => dayjs().subtract(14, 'day').startOf('day').toISOString(), + calcFrom: () => dayjs().subtract(14, 'day').toISOString(), calcTo: () => dayjs().toISOString(), availableIn: ['team', 'enterprise'], }, { text: REPORT_DATERANGE_HELPER_LABELS.LAST_28_DAYS, - calcFrom: () => dayjs().subtract(28, 'day').startOf('day').toISOString(), + calcFrom: () => dayjs().subtract(28, 'day').toISOString(), calcTo: () => dayjs().toISOString(), availableIn: ['team', 'enterprise'], }, diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts index d1f9fbc227326..2a32d88cc81c5 100644 --- a/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts +++ b/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts @@ -474,8 +474,12 @@ export const fillTimeseries = ( defaultValue: number, min?: string, max?: string, - minPointsToFill: number = 20 + minPointsToFill: number = 20, + interval?: string ) => { + if (timeseriesData.length === 0 && !(min && max)) { + return [] + } // If we have more points than minPointsToFill, just normalize timestamps and return if (timeseriesData.length > minPointsToFill) { return timeseriesData.map((datum) => { @@ -493,41 +497,61 @@ export const fillTimeseries = ( // const truncationSample = timeseriesData.length > 0 ? timeseriesData[0][timestampKey] : min || max const truncationSamples = timeseriesData.length > 0 ? dates : [minDate, maxDate] - const truncation = getTimestampTruncation(truncationSamples as Dayjs[]) + let truncation: 'second' | 'minute' | 'hour' | 'day' + let step = 1 + + if (interval) { + const match = interval.match(/^(\d+)(m|h|d|s)$/) + if (match) { + step = parseInt(match[1], 10) + const unitChar = match[2] as 'm' | 'h' | 'd' | 's' + const unitMap = { s: 'second', m: 'minute', h: 'hour', d: 'day' } as const + truncation = unitMap[unitChar] + } else { + // Fallback for invalid format + truncation = getTimestampTruncation(truncationSamples as Dayjs[]) + } + } else { + truncation = getTimestampTruncation(truncationSamples as Dayjs[]) + } const newData = timeseriesData.map((datum) => { - const iso = dayjs.utc(datum[timestampKey]).toISOString() + const timestamp = datum[timestampKey] + const iso = isUnixMicro(timestamp) + ? unixMicroToIsoTimestamp(timestamp) + : dayjs.utc(timestamp).toISOString() datum[timestampKey] = iso return datum }) - const diff = maxDate.diff(minDate, truncation as dayjs.UnitType) - // Intentional throwing of error here to be caught by Sentry, as this would indicate a bug since charts shouldn't be rendering more than 10k data points - if (diff > 10000) { - throw new Error( - 'The selected date range will render more than 10,000 data points within the charts, which will degrade browser performance. Please select a smaller date range.' - ) - } - - for (let i = 0; i <= diff; i++) { - const dateToMaybeAdd = minDate.add(i, truncation as dayjs.ManipulateType) - - const keys = typeof valueKey === 'string' ? [valueKey] : valueKey - - const toMerge = keys.reduce( - (acc, key) => ({ - ...acc, - [key]: defaultValue, - }), - {} - ) - - if (!dates.find((d) => isEqual(d, dateToMaybeAdd))) { + let currentDate = minDate + while (currentDate.isBefore(maxDate) || currentDate.isSame(maxDate)) { + const found = dates.find((d) => { + const d_date = d as Dayjs + return ( + d_date.year() === currentDate.year() && + d_date.month() === currentDate.month() && + d_date.date() === currentDate.date() && + d_date.hour() === currentDate.hour() && + d_date.minute() === currentDate.minute() + ) + }) + if (!found) { + const keys = typeof valueKey === 'string' ? [valueKey] : valueKey + + const toMerge = keys.reduce( + (acc, key) => ({ + ...acc, + [key]: defaultValue, + }), + {} + ) newData.push({ - [timestampKey]: dateToMaybeAdd.toISOString(), + [timestampKey]: currentDate.toISOString(), ...toMerge, }) } + currentDate = currentDate.add(step, truncation) } return newData diff --git a/apps/studio/components/ui/Charts/ComposedChart.utils.tsx b/apps/studio/components/ui/Charts/ComposedChart.utils.tsx index 6fa1dbbe8b5f0..d22f69fed6a91 100644 --- a/apps/studio/components/ui/Charts/ComposedChart.utils.tsx +++ b/apps/studio/components/ui/Charts/ComposedChart.utils.tsx @@ -131,6 +131,7 @@ export const calculateTotalChartAggregate = ( const CustomTooltip = ({ active, payload, + label, attributes, isPercentage, format, @@ -139,7 +140,6 @@ const CustomTooltip = ({ isActiveHoveredChart, }: TooltipProps) => { if (active && payload && payload.length) { - const timestamp = payload[0].payload.timestamp const maxValueAttribute = isMaxAttribute(attributes) const maxValueData = maxValueAttribute && payload?.find((p: any) => p.dataKey === maxValueAttribute.attribute) @@ -203,7 +203,7 @@ const CustomTooltip = ({ !isActiveHoveredChart && 'opacity-0' )} > -

{dayjs(timestamp).format(DateTimeFormats.FULL_SECONDS)}

+

{label}

{payload .reverse() diff --git a/apps/studio/hooks/misc/useReportDateRange.ts b/apps/studio/hooks/misc/useReportDateRange.ts index de0cd99df358f..af9502de12411 100644 --- a/apps/studio/hooks/misc/useReportDateRange.ts +++ b/apps/studio/hooks/misc/useReportDateRange.ts @@ -175,10 +175,12 @@ export const useReportDateRange = ( const handleIntervalGranularity = useCallback((from: string, to: string) => { const diffInDays = dayjs(to).diff(from, 'day', true) + const diffInHours = dayjs(to).diff(from, 'hour', true) const conditions = { - '1m': dayjs(to).diff(from, 'hour') < 3, // less than 3 hours - '10m': dayjs(to).diff(from, 'hour') < 6, // less than 6 hours - '30m': dayjs(to).diff(from, 'hour') < 18, // less than 18 hours + '1m': diffInHours < 1.1, // less than 1.1 hours + '5m': diffInHours < 3.1, // less than 3.1 hours + '10m': diffInHours < 6.1, // less than 6.1 hours + '30m': diffInHours < 25, // less than 25 hours '1h': diffInDays < 10, // less than 10 days '1d': diffInDays >= 10, // more than 10 days } @@ -186,6 +188,8 @@ export const useReportDateRange = ( switch (true) { case conditions['1m']: return '1m' + case conditions['5m']: + return '5m' case conditions['10m']: return '10m' case conditions['30m']: diff --git a/apps/www/_blog/2025-07-15-stripe-engine-as-sync-library.mdx b/apps/www/_blog/2025-07-15-stripe-engine-as-sync-library.mdx new file mode 100644 index 0000000000000..8f4d964139115 --- /dev/null +++ b/apps/www/_blog/2025-07-15-stripe-engine-as-sync-library.mdx @@ -0,0 +1,134 @@ +--- +title: 'Stripe-To-Postgres Sync Engine as standalone Library' +description: 'Sync Stripe webhook data directly to Postgres using standalone TypeScript library.' +categories: + - product + - launch-week +tags: + - launch-week + - stripe +date: '2025-07-15:15:00' +toc_depth: 3 +author: kevcodez +image: launch-week-15/day-2-stripe-engine/og.jpg +thumb: launch-week-15/day-2-stripe-engine/thumb.png +launchweek: 15 +--- + +We're excited to announce that [`stripe-sync-engine`](https://github.com/supabase/stripe-sync-engine) is now available as a standalone npm package: [`@supabase/stripe-sync-engine`](https://www.npmjs.com/package/@supabase/stripe-sync-engine)! + +Previously distributed only as a Docker image (`supabase/stripe-sync-engine`), you can now plug this into any backend project—whether you're using Node.js, running Express on a server, or even deploying on Supabase Edge Functions. + +Stripe-Sync-Engine is a webhook listener that transforms Stripe webhooks into structured Postgres inserts/updates. It listens to Stripe webhook events (like `invoice.payment_failed`, `customer.subscription.updated`, etc), normalizes and stores them in a relational format in Postgres. + +Stripe Sync Engine Diagram + +## Why sync Stripe data to Postgres? + +While Supabase offers a convenient [foreign data wrapper](https://supabase.com/partners/integrations/supabase_wrapper_stripe) (FDW) for Stripe, sometimes you want your Stripe data _locally available_ in your Postgres database for: + +- **Lower latency**: Avoid round-trips to the Stripe API. +- **Better joins**: Query subscriptions, invoices, and charges together. +- **Custom logic**: Build fraud checks, billing dashboards, and dunning workflows directly from your own database. + +## New: Use it as an npm package + +You can now install and run the Stripe sync engine directly inside your backend: + +```bash +npm install @supabase/stripe-sync-engine +``` + +And use it like this: + +```tsx +import { StripeSync } from '@supabase/stripe-sync-engine' + +const sync = new StripeSync({ + databaseUrl: 'postgres://user:pass@host:port/db', + stripeSecretKey: 'sk_test_...', + stripeWebhookSecret: 'whsec_...', +}) + +// Example: process a Stripe webhook +await sync.processWebhook(payload, signature) +``` + +For a full list of configuration options, refer to our [stripe-sync-engine README](https://github.com/supabase/stripe-sync-engine/blob/main/packages/sync-engine/README.md). + +## Use via Supabase Edge Function + +To use the Stripe-Sync-Engine in an [Edge Function](https://supabase.com/edge-functions), you first have to ensure that the schema and tables exist. While you can technically do this inside the Edge Function, it is recommended to run the schema migrations outside of that. You can do a one-off migration via + +```tsx +import { runMigrations } from '@supabase/stripe-sync-engine' +;(async () => { + await runMigrations({ + databaseUrl: 'postgresql://postgres:..@db..supabase.co:5432/postgres', + schema: 'stripe', + logger: console, + }) +})() +``` + +or include the [migration files](https://github.com/supabase/stripe-sync-engine/tree/main/packages/sync-engine/src/database/migrations) in your regular migration workflow. + +Once the schema and tables are in place, you can start syncing your Stripe data using an Edge Function: + +```tsx +import 'jsr:@supabase/functions-js/edge-runtime.d.ts' +import { StripeSync } from 'npm:@supabase/stripe-sync-engine@0.39.0' + +// Load secrets from environment variables +const databaseUrl = Deno.env.get('DATABASE_URL')! +const stripeWebhookSecret = Deno.env.get('STRIPE_WEBHOOK_SECRET')! +const stripeSecretKey = Deno.env.get('STRIPE_SECRET_KEY')! + +// Initialize StripeSync +const stripeSync = new StripeSync({ + databaseUrl, + stripeWebhookSecret, + stripeSecretKey, + backfillRelatedEntities: false, + autoExpandLists: true, +}) + +Deno.serve(async (req) => { + // Extract raw body as Uint8Array (buffer) + const rawBody = new Uint8Array(await req.arrayBuffer()) + + const stripeSignature = req.headers.get('stripe-signature') + + await stripeSync.processWebhook(rawBody, stripeSignature) + + return new Response(null, { + status: 202, + headers: { 'Content-Type': 'application/json' }, + }) +}) +``` + +1. Deploy your Edge Function initially using `supabase functions deploy` +2. Set up a Stripe webhook with the newly deployed Supabase Edge Function url +3. Create a new .env file in the `supabase` directory + +``` +# Use Dedicated pooler if available +DATABASE_URL="postgresql://postgres:..@db..supabase.co:6532/postgres" +STRIPE_WEBHOOK_SECRET="whsec_" +STRIPE_SECRET_KEY="sk_test_..." +``` + +1. Load the secrets using `sh supabase secrets set --env-file ./supabase/.env` + +As webhooks come in, the data is automatically persisted in the `stripe` schema. For a full guide, please refer to our [repository docs](https://supabase.github.io/stripe-sync-engine/). + +## Final thoughts + +If you're building with Stripe and Supabase, [`stripe-sync-engine`](https://github.com/supabase/stripe-sync-engine) gives you a reliable, scalable way to bring your billing data closer to your database and application. Whether you want better analytics, faster dunning workflows, or simpler integrations—this package is built to make that seamless. diff --git a/apps/www/components/LaunchWeek/15/data/lw15_build_stage.tsx b/apps/www/components/LaunchWeek/15/data/lw15_build_stage.tsx index 8cebca4f51a19..9e554bb8bc2a7 100644 --- a/apps/www/components/LaunchWeek/15/data/lw15_build_stage.tsx +++ b/apps/www/components/LaunchWeek/15/data/lw15_build_stage.tsx @@ -52,13 +52,13 @@ export const days: BuildDay[] = [ ], }, { - title: '', + title: 'Introducing stripe-sync-engine npm package', description: '', - id: '', - is_shipped: false, + id: 'stripe-engine', + is_shipped: true, links: [ { - url: '/blog/', + url: '/blog/stripe-engine-as-sync-library', label: 'Blog post', target: '_blank', }, diff --git a/apps/www/public/images/blog/launch-week-15/day-2-stripe-engine/og.png b/apps/www/public/images/blog/launch-week-15/day-2-stripe-engine/og.png new file mode 100644 index 0000000000000..8e43a1e1cb82a Binary files /dev/null and b/apps/www/public/images/blog/launch-week-15/day-2-stripe-engine/og.png differ diff --git a/apps/www/public/images/blog/launch-week-15/day-2-stripe-engine/stripe-sync-engine-dark.png b/apps/www/public/images/blog/launch-week-15/day-2-stripe-engine/stripe-sync-engine-dark.png new file mode 100644 index 0000000000000..30f27d1334cca Binary files /dev/null and b/apps/www/public/images/blog/launch-week-15/day-2-stripe-engine/stripe-sync-engine-dark.png differ diff --git a/apps/www/public/images/blog/launch-week-15/day-2-stripe-engine/stripe-sync-engine-light.png b/apps/www/public/images/blog/launch-week-15/day-2-stripe-engine/stripe-sync-engine-light.png new file mode 100644 index 0000000000000..4303b9d8eeae8 Binary files /dev/null and b/apps/www/public/images/blog/launch-week-15/day-2-stripe-engine/stripe-sync-engine-light.png differ diff --git a/apps/www/public/images/blog/launch-week-15/day-2-stripe-engine/thumb.png b/apps/www/public/images/blog/launch-week-15/day-2-stripe-engine/thumb.png new file mode 100644 index 0000000000000..c37c6e86bf2d1 Binary files /dev/null and b/apps/www/public/images/blog/launch-week-15/day-2-stripe-engine/thumb.png differ diff --git a/apps/www/public/rss.xml b/apps/www/public/rss.xml index 27b187b64d58e..f5326e66969f6 100644 --- a/apps/www/public/rss.xml +++ b/apps/www/public/rss.xml @@ -8,6 +8,13 @@ Tue, 15 Jul 2025 00:00:00 -0700 + https://supabase.com/blog/stripe-engine-as-sync-library + Stripe-To-Postgres Sync Engine as standalone Library + https://supabase.com/blog/stripe-engine-as-sync-library + Sync Stripe webhook data directly to Postgres using standalone TypeScript library. + Tue, 15 Jul 2025 00:00:00 -0700 + + https://supabase.com/blog/analytics-buckets Supabase Analytics Buckets with Iceberg Support https://supabase.com/blog/analytics-buckets