This is not a post about a solution but rather a blog about the problem which I began to solve and in the journey, the challenges I had to face so that you can avoid them.

The PROBLEM I faced

(never thought it would be a big one☠️)

So I working on this project named 'snippets'.

Basically, this is a website to store your little nextjs components, see them live, play with them & share them with public (Live Link). I thought of adding a preview feature. Basically, if anyone adds or edits a snippet, I would save the preview of their component and show that on the list view for easy navigation(and it's a cool thing too😜).

Solution 1: Screenshot URL API (This was it, at least that's what I thought)

It's a very basic idea. Few days back, I got to know about this tool named 'microlink' which is a free Browser-as-API sdk. One of its feature was that you provide it a url and it will give you a screenshot of that particular page.

But as soon as I wrote the first iteration, I got to know that it wasn't a cakewalk. The page I was trying to capture screenshot of did not render the preview as soon as it loaded. I am using Sandpack by codesandbox to render react/nextjs components and it takes around 35-40 seconds to load up the preview(it runs every thing on machine[WASM baby], such a 😎 cool tech).

Then I added option in the sdk to wait for loading to end but it was my bad fate😔 to know that the maximum timeout of the sdk was 28 seconds(acc to their docs, the error message showed 27 btw).

SO I HAD TO GIVE UP ON THIS SOLUTION😭.

Solution 2: Take screenshot when user opens it (I am smartest🧠, at least that's what I thought)

As soon as I gave up on solution 1, I thought that I could not give up too soon. So I thought of another solution.

My new approach: Whenever user will open the preview and it would load completely, I will take a screenshot programatically using html2canvas library and later store in the db. I wrote code and it worked as I thought except for one part. Everything was fine in the screenshot, except the preview part. IT WAS BLANK, LIKE COMPLETELY BLANK. Oh my god! How is this possible? What on earth is wrong that every solution I coming up has its own problem attached with it.

But WHAT was the problem in it.

After researching alot (github issues, reddit and what not), I got to know that YOU CAN NOT TAKE SCREENSHOTS of content inside IFRAME if it is of CROSS DOMAIN. 😭 Why this happens with me GOD!

Solution 3: Printing it (I am going to give up, at least that's what I thought)

Cmd+Shift+P (print dialog) was printing it correctly. I thought that I would do it programatically, later convert pdf to png(that a different problem). Long story short, it didn't work either. It opened a print dialog for user instead.

Conclusion

I haven't solved it yet. Let me know what you would do to solve it or what am I doing wrong.

For now, I am signing off.
This is VAIB