comments

2026-03-09 14:20:15 +01:00
parent 0f9e5f6e93
commit df0258f532
12 changed files with 186 additions and 76 deletions
--- a/apps/api/src/controllers/gsc-oauth-callback.controller.ts
+++ b/apps/api/src/controllers/gsc-oauth-callback.controller.ts
@@ -4,6 +4,22 @@ import type { FastifyReply, FastifyRequest } from 'fastify';
 import { z } from 'zod';
 import { LogError } from '@/utils/errors';

+const OAUTH_SENSITIVE_KEYS = ['code', 'state'];
+
+function sanitizeOAuthQuery(
+  query: Record<string, unknown> | null | undefined
+): Record<string, string> {
+  if (!query || typeof query !== 'object') {
+    return {};
+  }
+  return Object.fromEntries(
+    Object.entries(query).map(([k, v]) => [
+      k,
+      OAUTH_SENSITIVE_KEYS.includes(k) ? '<redacted>' : String(v),
+    ])
+  );
+}
+
 export async function gscGoogleCallback(
  req: FastifyRequest,
  reply: FastifyReply
@@ -16,10 +32,10 @@ export async function gscGoogleCallback(

    const query = schema.safeParse(req.query);
    if (!query.success) {
-      throw new LogError('Invalid GSC callback query params', {
-        error: query.error,
-        query: req.query,
-      });
+      throw new LogError(
+        'Invalid GSC callback query params',
+        sanitizeOAuthQuery(req.query as Record<string, unknown>)
+      );
    }

    const { code, state } = query.data;
@@ -27,16 +43,24 @@ export async function gscGoogleCallback(
    const codeVerifier = req.cookies.gsc_code_verifier ?? null;
    const projectId = req.cookies.gsc_project_id ?? null;

-    if (!storedState || !codeVerifier || !projectId) {
+    const hasStoredState = storedState !== null;
+    const hasCodeVerifier = codeVerifier !== null;
+    const hasProjectId = projectId !== null;
+    const hasAllCookies = hasStoredState && hasCodeVerifier && hasProjectId;
+    if (!hasAllCookies) {
      throw new LogError('Missing GSC OAuth cookies', {
-        storedState: storedState === null,
-        codeVerifier: codeVerifier === null,
-        projectId: projectId === null,
+        storedState: !hasStoredState,
+        codeVerifier: !hasCodeVerifier,
+        projectId: !hasProjectId,
      });
    }

    if (state !== storedState) {
-      throw new LogError('GSC OAuth state mismatch', { state, storedState });
+      throw new LogError('GSC OAuth state mismatch', {
+        hasState: true,
+        hasStoredState: true,
+        stateMismatch: true,
+      });
    }

    const tokens = await googleGsc.validateAuthorizationCode(
@@ -91,6 +115,9 @@ export async function gscGoogleCallback(
    return reply.redirect(redirectUrl);
  } catch (error) {
    req.log.error(error);
+    reply.clearCookie('gsc_oauth_state');
+    reply.clearCookie('gsc_code_verifier');
+    reply.clearCookie('gsc_project_id');
    return redirectWithError(reply, error);
  }
 }
--- a/apps/start/src/components/page/gsc-breakdown-table.tsx
+++ b/apps/start/src/components/page/gsc-breakdown-table.tsx
@@ -43,6 +43,7 @@ export function GscBreakdownTable({ projectId, value, type }: GscBreakdownTableP

  const breakdownKey = type === 'page' ? 'query' : 'page';
  const breakdownLabel = type === 'page' ? 'Query' : 'Page';
+  const pluralLabel = type === 'page' ? 'queries' : 'pages';

  const maxClicks = Math.max(
    ...(breakdownRows as { clicks: number }[]).map((r) => r.clicks),
@@ -52,7 +53,7 @@ export function GscBreakdownTable({ projectId, value, type }: GscBreakdownTableP
  return (
    <div className="card overflow-hidden">
      <div className="border-b p-4">
-        <h3 className="font-medium text-sm">Top {breakdownLabel.toLowerCase()}s</h3>
+        <h3 className="font-medium text-sm">Top {pluralLabel}</h3>
      </div>
      {isLoading ? (
        <OverviewWidgetTable
--- a/apps/start/src/components/page/gsc-cannibalization.tsx
+++ b/apps/start/src/components/page/gsc-cannibalization.tsx
@@ -1,6 +1,7 @@
+import type { IChartRange, IInterval } from '@openpanel/validation';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import { AlertCircleIcon, ChevronsUpDownIcon } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Pagination } from '@/components/pagination';
 import { useAppContext } from '@/hooks/use-app-context';
 import { useTRPC } from '@/integrations/trpc/react';
@@ -9,8 +10,8 @@ import { cn } from '@/utils/cn';

 interface GscCannibalizationProps {
  projectId: string;
-  range: string;
-  interval: string;
+  range: IChartRange;
+  interval: IInterval;
  startDate?: string;
  endDate?: string;
 }
@@ -30,7 +31,13 @@ export function GscCannibalization({

  const query = useQuery(
    trpc.gsc.getCannibalization.queryOptions(
-      { projectId, range: range as any, interval: interval as any },
+      {
+        projectId,
+        range,
+        interval,
+        startDate,
+        endDate,
+      },
      { placeholderData: keepPreviousData }
    )
  );
@@ -50,6 +57,9 @@ export function GscCannibalization({
  const items = query.data ?? [];

  const pageCount = Math.ceil(items.length / pageSize) || 1;
+  useEffect(() => {
+    setPage((p) => Math.max(0, Math.min(p, pageCount - 1)));
+  }, [items, pageSize, pageCount]);
  const paginatedItems = useMemo(
    () => items.slice(page * pageSize, (page + 1) * pageSize),
    [items, page, pageSize]
@@ -99,7 +109,6 @@ export function GscCannibalization({
          ))}
        {paginatedItems.map((item) => {
          const isOpen = expanded.has(item.query);
-          const winner = item.pages[0];
          const avgCtr =
            item.pages.reduce((s, p) => s + p.ctr, 0) / item.pages.length;

--- a/apps/start/src/components/pages/page-sparkline.tsx
+++ b/apps/start/src/components/pages/page-sparkline.tsx
@@ -8,7 +8,7 @@ interface SparklineBarsProps {
  data: { date: string; pageviews: number }[];
 }

-const gap = 1;
+const defaultGap = 1;
 const height = 24;
 const width = 100;

@@ -38,7 +38,16 @@ function SparklineBars({ data }: SparklineBarsProps) {
  }
  const max = Math.max(...data.map((d) => d.pageviews), 1);
  const total = data.length;
-  const barW = Math.max(2, Math.floor((width - gap * (total - 1)) / total));
+  // Compute bar width to fit SVG width; reduce gap if needed so barW >= 1 when possible
+  let gap = defaultGap;
+  let barW = Math.floor((width - gap * (total - 1)) / total);
+  if (barW < 1 && total > 1) {
+    gap = 0;
+    barW = Math.floor((width - gap * (total - 1)) / total);
+  }
+  if (barW < 1) {
+    barW = 1;
+  }
  const trend = getTrendDirection(data);
  const trendColor =
    trend === '↑'
@@ -71,9 +80,9 @@ function SparklineBars({ data }: SparklineBarsProps) {
      <Tooltiper
        content={
          trend === '↑'
-            ? 'Upgoing trend'
+            ? 'Upward trend'
            : trend === '↓'
-              ? 'Downgoing trend'
+              ? 'Downward trend'
              : 'Stable trend'
        }
      >
--- a/apps/start/src/components/pages/table/columns.tsx
+++ b/apps/start/src/components/pages/table/columns.tsx
@@ -103,6 +103,16 @@ export function useColumns({
          if (prev == null) {
            return <span className="text-muted-foreground">—</span>;
          }
+          if (prev === 0) {
+            return (
+              <div className="flex items-center gap-2">
+                <span className="font-mono text-sm tabular-nums">
+                  {number.short(row.original.sessions)}
+                </span>
+                <span className="text-muted-foreground">new</span>
+              </div>
+            );
+          }

          const pct = ((row.original.sessions - prev) / prev) * 100;
          const isPos = pct >= 0;
@@ -112,15 +122,12 @@ export function useColumns({
              <span className="font-mono text-sm tabular-nums">
                {number.short(row.original.sessions)}
              </span>
-              {prev === 0 && <span className="text-muted-foreground">new</span>}
-              {prev > 0 && (
-                <span
-                  className={`font-mono text-sm tabular-nums ${isPos ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}
-                >
-                  {isPos ? '+' : ''}
-                  {pct.toFixed(1)}%
-                </span>
-              )}
+              <span
+                className={`font-mono text-sm tabular-nums ${isPos ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}`}
+              >
+                {isPos ? '+' : ''}
+                {pct.toFixed(1)}%
+              </span>
            </div>
          );
        },
--- a/apps/start/src/components/pages/table/index.tsx
+++ b/apps/start/src/components/pages/table/index.tsx
@@ -26,7 +26,12 @@ export function PagesTable({ projectId }: PagesTableProps) {

  const pagesQuery = useQuery(
    trpc.event.pages.queryOptions(
-      { projectId, cursor: 1, take: 1000, search: undefined, range, interval },
+      {
+        projectId,
+        search: debouncedSearch ?? undefined,
+        range,
+        interval,
+      },
      { placeholderData: keepPreviousData },
    ),
  );
@@ -44,7 +49,7 @@ export function PagesTable({ projectId }: PagesTableProps) {
        range,
        startDate: startDate ?? undefined,
        endDate: endDate ?? undefined,
-        limit: 1000,
+        limit: 10_000,
      },
      { enabled: isGscConnected },
    ),
@@ -88,22 +93,11 @@ export function PagesTable({ projectId }: PagesTableProps) {
    }));
  }, [pagesQuery.data, gscMap]);

-  const filteredData = useMemo(() => {
-    if (!debouncedSearch) return rawData;
-    const q = debouncedSearch.toLowerCase();
-    return rawData.filter(
-      (p) =>
-        p.path.toLowerCase().includes(q) ||
-        p.origin.toLowerCase().includes(q) ||
-        (p.title ?? '').toLowerCase().includes(q),
-    );
-  }, [rawData, debouncedSearch]);
-
  const columns = useColumns({ projectId, isGscConnected, previousMap });

  const { table } = useTable({
    columns,
-    data: filteredData,
+    data: rawData,
    loading: pagesQuery.isLoading,
    pageSize: 50,
    name: 'pages',
@@ -133,7 +127,9 @@ export function PagesTable({ projectId }: PagesTableProps) {
            : 'Integrate our web SDK to your site to get pages here.',
        }}
        onRowClick={(row) => {
-          if (!isGscConnected) return;
+          if (!isGscConnected) {
+            return;
+          }
          const page = row.original;
          pushModal('PageDetails', {
            type: 'page',
--- a/apps/start/src/modals/gsc-details.tsx
+++ b/apps/start/src/modals/gsc-details.tsx
@@ -23,33 +23,65 @@ import { SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { useTRPC } from '@/integrations/trpc/react';
 import { getChartColor } from '@/utils/theme';

-type GscChartData = { date: string; clicks: number; impressions: number };
+interface GscChartData {
+  date: string;
+  clicks: number;
+  impressions: number;
+}
+interface GscViewsChartData {
+  date: string;
+  views: number;
+}

 const { TooltipProvider, Tooltip: GscTooltip } = createChartTooltip<
-  GscChartData,
+  GscChartData | GscViewsChartData,
  Record<string, unknown>
 >(({ data }) => {
  const item = data[0];
  if (!item) {
    return null;
  }
+  if (!('date' in item)) {
+    return null;
+  }
+  if ('views' in item && item.views != null) {
+    return (
+      <>
+        <ChartTooltipHeader>
+          <div>{item.date}</div>
+        </ChartTooltipHeader>
+        <ChartTooltipItem color={getChartColor(0)}>
+          <div className="flex justify-between gap-8 font-medium font-mono">
+            <span>Views</span>
+            <span>{item.views.toLocaleString()}</span>
+          </div>
+        </ChartTooltipItem>
+      </>
+    );
+  }
+  const clicks = 'clicks' in item ? item.clicks : undefined;
+  const impressions = 'impressions' in item ? item.impressions : undefined;
  return (
    <>
      <ChartTooltipHeader>
        <div>{item.date}</div>
      </ChartTooltipHeader>
-      <ChartTooltipItem color={getChartColor(0)}>
-        <div className="flex justify-between gap-8 font-medium font-mono">
-          <span>Clicks</span>
-          <span>{item.clicks.toLocaleString()}</span>
-        </div>
-      </ChartTooltipItem>
-      <ChartTooltipItem color={getChartColor(1)}>
-        <div className="flex justify-between gap-8 font-medium font-mono">
-          <span>Impressions</span>
-          <span>{item.impressions.toLocaleString()}</span>
-        </div>
-      </ChartTooltipItem>
+      {clicks != null && (
+        <ChartTooltipItem color={getChartColor(0)}>
+          <div className="flex justify-between gap-8 font-medium font-mono">
+            <span>Clicks</span>
+            <span>{clicks.toLocaleString()}</span>
+          </div>
+        </ChartTooltipItem>
+      )}
+      {impressions != null && (
+        <ChartTooltipItem color={getChartColor(1)}>
+          <div className="flex justify-between gap-8 font-medium font-mono">
+            <span>Impressions</span>
+            <span>{impressions.toLocaleString()}</span>
+          </div>
+        </ChartTooltipItem>
+      )}
    </>
  );
 });
@@ -93,10 +125,25 @@ export default function GscDetails(props: Props) {
    )
  );

-  const pagesTimeseriesQuery = useQuery(
-    trpc.event.pagesTimeseries.queryOptions(
-      { projectId, ...dateInput },
-      { enabled: type === 'page' }
+  const { origin: pageOrigin, path: pagePath } =
+    type === 'page'
+      ? (() => {
+          try {
+            const url = new URL(value);
+            return { origin: url.origin, path: url.pathname + url.search };
+          } catch {
+            return {
+              origin: typeof window !== 'undefined' ? window.location.origin : '',
+              path: value,
+            };
+          }
+        })()
+      : { origin: '', path: '' };
+
+  const pageTimeseriesQuery = useQuery(
+    trpc.event.pageTimeseries.queryOptions(
+      { projectId, ...dateInput, origin: pageOrigin, path: pagePath },
+      { enabled: type === 'page' && !!pagePath }
    )
  );

@@ -105,7 +152,7 @@ export default function GscDetails(props: Props) {
    type === 'page' ? pageQuery.isLoading : queryQuery.isLoading;

  const timeseries = data?.timeseries ?? [];
-  const pagesTimeseries = pagesTimeseriesQuery.data ?? [];
+  const pageTimeseries = pageTimeseriesQuery.data ?? [];
  const breakdownRows =
    type === 'page'
      ? ((data as { queries?: unknown[] } | undefined)?.queries ?? [])
@@ -131,13 +178,14 @@ export default function GscDetails(props: Props) {
        {type === 'page' && (
          <div className="card p-4">
            <h3 className="mb-4 font-medium text-sm">Views & Sessions</h3>
-            {isLoading ? (
+            {isLoading || pageTimeseriesQuery.isLoading ? (
              <Skeleton className="h-40 w-full" />
            ) : (
              <GscViewsChart
-                data={pagesTimeseries
-                  .filter((r) => r.origin + r.path === value)
-                  .map((r) => ({ date: r.date, views: r.pageviews }))}
+                data={pageTimeseries.map((r) => ({
+                  date: r.date,
+                  views: r.pageviews,
+                }))}
              />
            )}
          </div>
--- a/apps/start/src/modals/page-details.tsx
+++ b/apps/start/src/modals/page-details.tsx
@@ -21,14 +21,17 @@ export default function PageDetails({ type, projectId, value }: Props) {
      <div className="col gap-6">
        {type === 'page' &&
          (() => {
-            let origin = value;
-            let path = '/';
+            let origin: string;
+            let path: string;
            try {
              const url = new URL(value);
              origin = url.origin;
              path = url.pathname + url.search;
            } catch {
-              // value might already be just a path
+              // value is path-only (e.g. "/docs/foo")
+              origin =
+                typeof window !== 'undefined' ? window.location.origin : '';
+              path = value;
            }
            return (
              <PageViewsChart
--- a/packages/db/src/gsc.ts
+++ b/packages/db/src/gsc.ts
@@ -407,7 +407,8 @@ export const getGscCannibalization = cacheable(
      if (existing) {
        existing.clicks += row.clicks;
        existing.impressions += row.impressions;
-        existing.ctr = (existing.ctr + row.ctr) / 2;
+        existing.ctr =
+          existing.impressions > 0 ? existing.clicks / existing.impressions : 0;
        existing.position = Math.min(existing.position, row.position);
      } else {
        entry.pages.push({
--- a/packages/db/src/services/pages.service.ts
+++ b/packages/db/src/services/pages.service.ts
@@ -8,6 +8,7 @@ export interface IGetPagesInput {
  endDate: string;
  timezone: string;
  search?: string;
+  limit?: number;
 }

 export interface IPageTimeseriesRow {
@@ -37,6 +38,7 @@ export class PagesService {
    endDate,
    timezone,
    search,
+    limit,
  }: IGetPagesInput): Promise<ITopPage[]> {
    // CTE: Get titles from the last 30 days for faster retrieval
    const titlesCte = clix(this.client, timezone)
@@ -92,12 +94,18 @@ export class PagesService {
        clix.datetime(endDate, 'toDateTime'),
      ])
      .when(!!search, (q) => {
-        q.where('e.path', 'LIKE', `%${search}%`);
+        const term = `%${search}%`;
+        q.whereGroup()
+          .where('e.path', 'LIKE', term)
+          .orWhere('e.origin', 'LIKE', term)
+          .orWhere('pt.title', 'LIKE', term)
+          .end();
      })
      .groupBy(['e.origin', 'e.path', 'pt.title'])
-      .orderBy('sessions', 'DESC')
-      .limit(1000);
-
+      .orderBy('sessions', 'DESC');
+    if (limit !== undefined) {
+      query.limit(limit);
+    }
    return query.execute();
  }

--- a/packages/trpc/src/routers/event.ts
+++ b/packages/trpc/src/routers/event.ts
@@ -320,7 +320,7 @@ export const eventRouter = createTRPCRouter({
      z.object({
        projectId: z.string(),
        cursor: z.number().optional(),
-        take: z.number().default(20),
+        take: z.number().min(1).optional(),
        search: z.string().optional(),
        range: zRange,
        interval: zTimeInterval,
@@ -335,6 +335,7 @@ export const eventRouter = createTRPCRouter({
        endDate,
        timezone,
        search: input.search,
+        limit: input.take,
      });
    }),

--- a/packages/trpc/src/routers/gsc.ts
+++ b/packages/trpc/src/routers/gsc.ts
@@ -185,7 +185,7 @@ export const gscRouter = createTRPCRouter({
  getPages: protectedProcedure
    .input(
      zGscDateInput.extend({
-        limit: z.number().min(1).max(1000).optional().default(100),
+        limit: z.number().min(1).max(10_000).optional().default(100),
      })
    )
    .query(async ({ input, ctx }) => {