simple cache tag to dedupe

apps/server/src/api/v2/dashboards/[id]/GET.ts

@@ -247,7 +247,7 @@ export async function getDashboardHandler(
     workspace_member_count: workspaceMemberCount,
   };
 
-  const tag = `take-dashboard-screenshot-${dashboardId}-${versionNumber}`;
+  const tag = `take-dashboard-screenshot-${dashboardId}`;
   if (
     await shouldTakeScreenshot({
       tag,

apps/server/src/api/v2/metric_files/[id]/data/GET.ts

@@ -29,7 +29,7 @@ const app = new Hono()
         password
       );
 
-      const tag = `take-metric-screenshot-${id}-${version_number}`;
+      const tag = `take-metric-screenshot-${id}`;
       if (
         await shouldTakeScreenshot({
           tag,

apps/server/src/api/v2/reports/[id]/GET.ts

@@ -91,7 +91,7 @@ const app = new Hono()
         password
       );
 
-      const tag = `take-report-screenshot-${reportId}-${versionNumber}`;
+      const tag = `take-report-screenshot-${reportId}`;
 
       if (
         await shouldTakeScreenshot({

apps/server/src/shared-helpers/screenshots.ts

@@ -5,6 +5,9 @@ import type { Context } from 'hono';
 // This helper ensures that we do not run multiple trigger jobs for the same screenshot task concurrently.
 // It checks if a job for the given tag and key is already running or queued before starting a new one.
 
+const currentlyCheckingTags = new Set<string>();
+const CACHE_TAG_EXPIRATION_TIME = 1000 * 15; // 15 seconds
+
 export const shouldTakeScreenshot = async ({
   tag,
   key,
@@ -16,10 +19,13 @@ export const shouldTakeScreenshot = async ({
 }): Promise<boolean> => {
   const hasReferrer = !!context.req.header('referer');
 
-  if (!hasReferrer) {
+  if (!hasReferrer || currentlyCheckingTags.has(tag)) {
     return false;
   }
 
+  currentlyCheckingTags.add(tag);
+
+  try {
     const lastTask = await runs
       .list({
         status: ['EXECUTING', 'QUEUED'],
@@ -30,4 +36,12 @@ export const shouldTakeScreenshot = async ({
       .then((res) => res.data[0]);
 
     return !lastTask;
+  } catch (error) {
+    console.error('Error checking if screenshot should be taken', { error });
+    throw error;
+  } finally {
+    setTimeout(() => {
+      currentlyCheckingTags.delete(tag);
+    }, CACHE_TAG_EXPIRATION_TIME);
+  }
 };

apps/web/src/routes/screenshots/reports.$reportId.content.tsx

@@ -8,12 +8,14 @@ export const Route = createFileRoute('/screenshots/reports/$reportId/content')({
   component: RouteComponent,
   validateSearch: GetReportScreenshotQuerySchema,
   ssr: true,
-  beforeLoad: async ({ context, params, search }) => {
-    const report = await prefetchGetReport(
-      context.queryClient,
-      params.reportId,
-      search.version_number
-    );
+  beforeLoad: ({ search }) => {
+    return {
+      version_number: search.version_number,
+    };
+  },
+  loader: async ({ context, params }) => {
+    const { version_number } = context;
+    const report = await prefetchGetReport(context.queryClient, params.reportId, version_number);
 
     if (!report) {
       throw redirect({
@@ -23,7 +25,7 @@ export const Route = createFileRoute('/screenshots/reports/$reportId/content')({
 
     const allMetrics = Object.entries(report?.metrics || {});
 
-    await Promise.all(
+    const res = await Promise.all(
       allMetrics.map(([metricId, metric]) => {
         return ensureMetricData(context.queryClient, {
           id: metricId,
@@ -32,6 +34,10 @@ export const Route = createFileRoute('/screenshots/reports/$reportId/content')({
       })
     );
 
+    res.forEach((metric) => {
+      console.log('metric', metric.data?.length);
+    });
+
     return { report };
   },
 });