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 to storage, mapping URLs to file identifiers, smart refresh strategies (time-based expiration and on-demand), choosing optimal formats and sizes, handling dynamic content (including sleep strategies), and general recommendations 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 (≈279 lines). The file contains front-matter and a multipart article covering: stopping real-time regeneration, persisting screenshots to storage, URL-to-file-id tracking, smart refresh strategies (time-based expiration and on-demand), choosing formats and sizes, handling dynamic content with sleep, and final guidelines for robust screenshot workflows. 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 directly and clearly summarizes the main change: adding a blog post about best practices for handling screenshots 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.}

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch screenshot-best-practices

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.

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

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

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

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

Copilot

Pull request overview

Copilot reviewed 1 out of 2 changed files in this pull request and generated 4 comments.

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

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

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/routes/blog/post/screenshots-best-practices/`+page.markdoc:
- Line 246: Add a short server-side security caution after the line "For
authenticated pages, use the `headers` parameter to pass authorization tokens or
session cookies:" clarifying that tokens should never be embedded in client-side
or browser-exposed code; recommend sending auth tokens from server-side code
(e.g., in a load function or API route) and passing only necessary session data
to the client to avoid exposing secrets. Reference the `headers` parameter and
the phrase "authenticated pages" so the note is placed immediately afterward.

🧹 Nitpick comments (1)

src/routes/blog/post/screenshots-best-practices/+page.markdoc (1)
272-276: Avoid duplicate Screenshots API links.

The Screenshots API documentation is linked in the paragraph and again in “Further reading.” Consider removing the duplicate to reduce redundancy.
🧹 Minimal cleanup
- - [Screenshots API documentation](/docs/products/avatars/screenshots)

coderabbitai · 2026-01-29T12:51:29Z

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

+});
+```
+
+For authenticated pages, use the `headers` parameter to pass authorization tokens or session cookies:


⚠️ Potential issue | 🟡 Minor

Add a server-side security note for auth headers.

The sentence can be read as client-side guidance. Please add a short caution to keep tokens server-side to avoid exposing secrets in browser code.

🛡️ Suggested wording

-For authenticated pages, use the `headers` parameter to pass authorization tokens or session cookies: +For authenticated pages, use the `headers` parameter to pass authorization tokens or session cookies. Do this from a trusted backend/service to avoid exposing secrets in client-side code:

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

For authenticated pages, use the `headers` parameter to pass authorization tokens or session cookies:

For authenticated pages, use the `headers` parameter to pass authorization tokens or session cookies. Do this from a trusted backend/service to avoid exposing secrets in client-side code:

🤖 Prompt for AI Agents

In `@src/routes/blog/post/screenshots-best-practices/`+page.markdoc at line 246, Add a short server-side security caution after the line "For authenticated pages, use the `headers` parameter to pass authorization tokens or session cookies:" clarifying that tokens should never be embedded in client-side or browser-exposed code; recommend sending auth tokens from server-side code (e.g., in a load function or API route) and passing only necessary session data to the client to avoid exposing secrets. Reference the `headers` parameter and the phrase "authenticated pages" so the note is placed immediately afterward.

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

Co-authored-by: Aditya Oberai <adityaoberai1@gmail.com>

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

atharvadeosthale added 3 commits January 28, 2026 20:21

requested changes

9e7522e

more changes

4961949

date

2a73d53

atharvadeosthale requested a review from Copilot January 28, 2026 14:54

Copilot started reviewing on behalf of atharvadeosthale January 28, 2026 14:54 View session

Copilot AI reviewed Jan 28, 2026

View reviewed changes

atharvadeosthale requested a review from adityaoberai January 28, 2026 15:04

atharvadeosthale commented Jan 29, 2026

View reviewed changes

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

Apply suggestion from @atharvadeosthale

0f25e69

coderabbitai bot reviewed Jan 29, 2026

View reviewed changes

atharvadeosthale commented Jan 30, 2026

View reviewed changes

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

Apply suggestion from @atharvadeosthale

98ecb2f

adityaoberai reviewed Jan 30, 2026

View reviewed changes

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

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

ff5ae05

Co-authored-by: Aditya Oberai <adityaoberai1@gmail.com>

adityaoberai approved these changes Jan 30, 2026

View reviewed changes

atharvadeosthale merged commit de2c6f2 into main Jan 30, 2026
14 of 16 checks passed

atharvadeosthale deleted the screenshot-best-practices branch January 30, 2026 15:59

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

	For authenticated pages, use the `headers` parameter to pass authorization tokens or session cookies:
	For authenticated pages, use the `headers` parameter to pass authorization tokens or session cookies. Do this from a trusted backend/service to avoid exposing secrets in client-side code:

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

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!

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!

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!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

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