ogimage no longer working

[wesbos]

serverless function is crashing.

https://wesbos.com/.netlify/functions/ogimage?title=Wes+Bos&url=https%3A%2F%2Fwesbos.com%2F*

@Asjas Do you think you could take a look at this for me? Will DM you

[wesbos]

Just upgraded chrome-aws-lambda, and for that I need to stick puppeteer-core to 10.1.0 until this is merged: alixaxel/chrome-aws-lambda#264

Not sure if that will fix it but worth a shot

[wesbos]

that upgrade fixed the rendering, but they are blank.

likely related to the Error on this page, which the ogimages are screenshotted from:

https://wesbos.com/thumbnail?title=test

Maybe the location.href is null?

const url = new URL(location.href);

[Asjas]

@wesbos I did a test in the browser console and I think title needs to be used instead of url? Unless url is used in the codebase and title is just an example you posted here.

This code here

const link = url.searchParams.get('url');

needs to be

const link = url.searchParams.get('title');

[Asjas]

Adding a debugger statement in Firefox does show that location.href exists here.

const url = new URL(location.href);

[wesbos]

Ohh yeah I was just throwing title in there for a test. Let me get a fully working URL to test

[wesbos]

just replace the .netlify/functions/ogimage with thumbnail on any of the ogimage urls

https://wesbos.com/thumbnail?title=Uses&url=http%3A%2F%2Flocalhost%3A8888%2Fuses&thumbnail=%2Fstatic%2F0005c028a536c87975eb84ae3d32ae57%2Faeron.jpg

Pretty sure thumbnail page is working fine, but look at this:

the URL: https://wesbos.com/.netlify/functions/ogimage?title=Uses&url=https%3A%2F%2Fwesbos.com%2Fuses&thumbnail=%2Fstatic%2F0005c028a536c87975eb84ae3d32ae57%2Faeron.jpg

Blank

BUT if I change the URL to replace & with &, it works:

https://wesbos.com/.netlify/functions/ogimage?title=Uses&url=https%3A%2F%2Fwesbos.com%2Fuses&thumbnail=%2Fstatic%2F0005c028a536c87975eb84ae3d32ae57%2Faeron.jpg

So I bet I am encoding the URL incorrectly. Give me 2 mins

[wesbos]

Seems to only twitter:

https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fwesbos.com%2Fuses

[Asjas]

I don't have facebook so I can't see what is there 😅

But yeah I'm wondering if it's Twitter again, if it's the same issue as what caused the Course Marketing Pages to fail to render?

[wesbos]

ohhh maybe, what was the issue with that one again?

[Asjas]

The full HTTPS URL path was missing from the Twitter OG Image tag, only the relative path to the image was used.

[wesbos]

Ohhh yeah, I think this is formatted properly. IF you run $([name="twitter:image"]).content on any page it should give you a URL, click it, and it renders.

I just deployed a cache bust to the image to see if that fixes it

[wesbos]

It's working :D It was a cache bust!

[Asjas]

Awesome! Haha 😄

[wesbos]

IN summary, upgrading the deps and then flushing out cached broken images fixed it. Thanks for the help @Asjas