Blog: Best practices for handling screenshots in your app #2714

atharvadeosthale · 2026-01-26T01:12:35Z

Summary by CodeRabbit

Documentation
- Added a comprehensive blog post on screenshot best practices: stopping real-time regeneration, persisting screenshots, URL-to-file-id mapping, smart refresh strategies (time-based expiration & on-demand), format and size guidance, handling dynamic content with sleep strategies, and overall guidance for robust screenshot workflows.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2026-01-26T01:13:18Z

Walkthrough

A new documentation page was added at src/routes/blog/post/screenshots-best-practices/+page.markdoc. The file (~289 inserted lines) includes front-matter metadata and a multipart article covering stopping realtime regeneration, persisting screenshots in storage, URL-to-file-id tracking, refresh strategies (time-based expiration and on-demand), format and size selection, handling dynamic content (sleep), and final guidelines. No executable code, tests, or public/exported API declarations were modified.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and specifically describes the main change: adding a blog post about screenshot handling best practices in applications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

atharvadeosthale · 2026-01-26T01:33:55Z

@coderabbitai review

coderabbitai · 2026-01-26T01:34:05Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copilot

Pull request overview

Adds a new blog post documenting best practices for efficiently capturing, storing, and refreshing webpage screenshots in an app.

Changes:

Added a new Markdoc blog post: “Best practices for handling screenshots in your app”
Included code examples for persistence (Storage), lookup (TablesDB), refresh strategies, and screenshot parameter tuning

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-26T09:30:17Z

src/routes/blog/post/screenshots-best-practices/+page.markdoc

+        }
+
+        // Screenshot expired, regenerate and update the row
+        const newFileId = await captureAndStore(url);


This TTL refresh example calls captureAndStore(url), but that helper isn’t defined anywhere in the post. Define it (e.g., as the screenshot capture + Storage upload logic) or replace this call with an existing helper shown earlier.

Suggested change

const newFileId = await captureAndStore(url);

const newFileId = await createScreenshot(url);

@atharvadeosthale where is this function called from?

Copilot · 2026-01-26T09:30:17Z

src/routes/blog/post/screenshots-best-practices/+page.markdoc

+    }
+
+    // No existing screenshot, create new one
+    return await createScreenshot(url);


This function returns createScreenshot(url), but createScreenshot isn’t defined anywhere in the post. Either define it or reuse the earlier screenshot creation logic so the snippet is complete.

Suggested change

return await createScreenshot(url);

const fileId = await captureAndStore(url);

return storage.getFileView('screenshots', fileId);

@atharvadeosthale

src/routes/blog/post/screenshots-best-practices/+page.markdoc

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

coderabbitai

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/routes/blog/post/screenshots-best-practices/`+page.markdoc:
- Around line 74-79: The snippet uses client but never defines it; add a brief
initialization before using Client/Storage/TablesDB/Avatars (e.g., create and
configure a Client instance and assign it to the variable client) or add a
one-line note that client is assumed to be defined earlier; ensure the symbol
client is present and configured before the lines referencing new
Storage(client), new TablesDB(client), and new Avatars(client) so the snippet
can be copied and run independently.
- Around line 121-153: The example uses undefined helper functions
captureAndStore and createScreenshot in getScreenshot, making the snippet
non-runnable; add brief placeholder implementations or a clarifying note.
Specifically, either add short helper descriptions or minimal implementations
for captureAndStore(url) and createScreenshot(url) (and ensure they return a
fileId or call storage.getFileView as used), or prepend a comment to the
getScreenshot example stating these are stubs/placeholders that must be
implemented (referencing the function name getScreenshot so readers can locate
it). Ensure the helpers' return shapes match the rest of the snippet (fileId or
storage view) so the updateRow and storage.getFileView calls work.

🧹 Nitpick comments (1)

src/routes/blog/post/screenshots-best-practices/+page.markdoc (1)
255-264: Add a server-side safety note for auth headers.

The Authorization/Cookie headers example should explicitly state this must be executed server-side (to avoid exposing secrets, and because browsers block setting the Cookie header). A short caution line would prevent misuse.
💡 Suggested addition
+// Run this server-side; do not expose tokens or cookies in client-side code.
 const authenticatedScreenshot = avatars.getScreenshot({

src/routes/blog/post/screenshots-best-practices/+page.markdoc

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

…ts everywhere

adityaoberai · 2026-01-27T17:57:28Z

src/routes/blog/post/screenshots-best-practices/+page.markdoc

+        }
+
+        // Screenshot expired, regenerate and update the row
+        const newFileId = await captureAndStore(url);


@atharvadeosthale where is this function called from?

adityaoberai · 2026-01-27T17:58:52Z

src/routes/blog/post/screenshots-best-practices/+page.markdoc

+    }
+
+    // No existing screenshot, create new one
+    return await createScreenshot(url);


@atharvadeosthale

adityaoberai · 2026-01-27T18:02:00Z

src/routes/blog/post/screenshots-best-practices/+page.markdoc

+});
+```
+
+For pages with heavy JavaScript, 2-3 seconds is usually sufficient. For simple static pages, you can skip the delay entirely.


We should improve that first part and include a mention of loading

Also, pages with heavy JavaScript is a little too informal

best practices for screenshots blog

36fba30

atharvadeosthale requested a review from Copilot January 26, 2026 09:25

Copilot started reviewing on behalf of atharvadeosthale January 26, 2026 09:25 View session

Copilot AI reviewed Jan 26, 2026

View reviewed changes

atharvadeosthale and others added 2 commits January 27, 2026 15:06

use object as func param

5120c67

Update src/routes/blog/post/screenshots-best-practices/+page.markdoc

ea4bb1f

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

coderabbitai bot reviewed Jan 27, 2026

View reviewed changes

src/routes/blog/post/screenshots-best-practices/+page.markdoc Show resolved Hide resolved

src/routes/blog/post/screenshots-best-practices/+page.markdoc Show resolved Hide resolved

atharvadeosthale and others added 5 commits January 27, 2026 15:20

Update src/routes/blog/post/screenshots-best-practices/+page.markdoc

687893a

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

remove imports, don't feel it's necessary for tutorials to have impor…

772d578

…ts everywhere

remove imports, don't feel it's necessary for tutorials to have impor…

a4ea586

…ts everywhere

fix code snippets

619e64d

cover and update date

e5f3659

adityaoberai requested changes Jan 27, 2026

View reviewed changes

	const newFileId = await captureAndStore(url);
	const newFileId = await createScreenshot(url);

	return await createScreenshot(url);
	const fileId = await captureAndStore(url);
	return storage.getFileView('screenshots', fileId);

Blog: Best practices for handling screenshots in your app #2714

Are you sure you want to change the base?

Blog: Best practices for handling screenshots in your app #2714

Uh oh!

Conversation

atharvadeosthale commented Jan 26, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Uh oh!

atharvadeosthale commented Jan 26, 2026

Uh oh!

coderabbitai bot commented Jan 26, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

adityaoberai Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

adityaoberai Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

adityaoberai Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

adityaoberai Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

adityaoberai Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

atharvadeosthale commented Jan 26, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 26, 2026 •

edited

Loading