How do you implement error handling on Astro.glob(), or continue page load even with errors?

[dull comet]

As it wraps meta.glob and then converts I checked the Vite docs but couldn't figure this out

I just want to do nothing at all if the glob returns no matches found
Any help appreciated

[dull comet]

How do you implement error handling on Astro.glob(), or continue page load even with errors?

[dull comet]

Repo: https://github.com/Isaac-Pollack/WWW.ISAACPOLLACK.DEV error is throwing in a non-build displayed page at the moment
Error:

[next pollen]

You could try putting it inside a try/catch statement```js
try {

} catch(error) {

}

[dull comet]

I did give that a shot but that stops me from being able to access variable values from within the HTML (e.g conditional HTML such as gallery.length >= 1 && (HTML))

[next pollen]

Did you try defining the variable outside the try/catch statement? something like this: ```js
const images;
try {
images = await Astro.glob("../../public/project_images//.png")
.map((img) => img.default.replace("/public", ""))
.filter((img) => img.includes(frontmatter.image.gallery))
} catch(error) {

}

[dull comet]

I only tried setting to blanks and overriding them but i suppose nothing is better, I'll give it a shot, 1 sec

Getting an error back that it needs to be initialised @next pollen

Inferring any type also doesn't solve it const images: any[];

[next pollen]

maybe try setting a default value like const images = [];

[dull comet]

Yep, so when I do that It reaches the code, but it's like it is no longer asynchronous

try {
  const bigGlob = await Astro.glob("../../public/project_images/*/*.png");
  const images = bigGlob
    .map((img) => img.default.replace("/public", ""))
    .filter((img) => img.includes(frontmatter.image.gallery));
  console.log(images);
} catch(error) {}```

the HTML is not displayed, even when true

It prints the two images I have in the folder, and this is the conditional code that isn't displaying:

{
images.length >= 1 &&
<div>
  <div class="grid items-stretch gap-12 md:grid-cols-2 lg:grid-cols-3 mx-6 content-center place-items-center">
    {
    images.map((img) => (
    <img src={img} class="rounded-md transition duration-500 hover:scale-125" alt={img} />
    ))
    }
  </div>
</div>
}```

I'm not sure if this is something I can work around, and just need to learn or if It is supposed to work @next pollen 😵

[next pollen]

Sorry I used const in my example but you need to use var or let like this ```js
let images;
try {
images = await Astro.glob("../../public/project_images//.png")
.map((img) => img.default.replace("/public", ""))
.filter((img) => img.includes(frontmatter.image.gallery))
} catch(error) {

}

[next pollen]

Then replace images.length >= 1 && with just images &&

And it should all work

I tested it out on your repo and its working

[dull comet]

I can't seem to get it to log the result at all? And it's not displaying with images && either

let images;

try {
  images = await Astro.glob("../../public/project_images/*/*.png")
    .map((img) => img.default.replace("/public", ""))
    .filter((img) => img.includes(frontmatter.image.gallery));
  console.log(images);
} catch(error) {}```

[next pollen]

Try this out https://github.com/Isaac-Pollack/WWW.ISAACPOLLACK.DEV/pull/1

[dull comet]

Still nothing under Takeaways section

Which is where the Gallery should appear

[dull comet]

Not sure what I'm doing wrong if it works on your end lol

[grave tartan]

@dull comet does something appear in your dev console or browser console?

[dull comet]

Absolutely nil

Just the refresh (x5) messages @grave tartan

Also it requires an image in the 'template' folder, since I pulled I just cleared my changes but just pasting any other image in that folder should display it or atleast log it back

You probably noticed but, figured I'd mention it

[next pollen]

I got the galleries to display while also having error protection on Astro.glob https://github.com/Isaac-Pollack/WWW.ISAACPOLLACK.DEV/pull/2

[dull comet]

Thanks! May I ask if you know what I was doing wrong? And thankyou for the added protection 🙂

[next pollen]

I added Astro.glob to try/catch blocks to stop it from throwing errors and the images variable now also has a fallback ([]) so if glob returns nothing then images defaults to []

[dull comet]

Ah, genius use of that. Didn't even come to mind!

I think seperating the Astro.glob() so it was alone might have done the trick on my end, whatever was causing it to not work. But either way thank you kindly!! @next pollen

[next pollen]

Sorry for so many PRs but I got one more here https://github.com/Isaac-Pollack/WWW.ISAACPOLLACK.DEV/pull/3 it fixes my last PR for creating galleries using directories, now a .md file can target a directory inside the public folder as a gallery like gallery: '/chopchop/'. Good luck with your website

[dull comet]

Thanks again, and thats fine!!

Just while I'm in the thread, is there any easy way to add additional file types to that glob without too much work? It's fine if not! @next pollen

I could just * at the end of /*/*.png and make sure I only put in compatible files but, safety is important 😄