feat: add Error page and ErrorBoundary

[jordanarldt]

What/Why?

• Use the Error component from VIBES
• Modify existing error page to use this component
• Add an ErrorBoundary in (default) route to maintain layout structure when error occurs

Testing

[changeset-bot]

⚠️ No Changeset found

Latest commit: 02eced4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
catalyst-latest	❌ Failed (Inspect)		💬 Add feedback	Jan 3, 2025 7:01pm
catalyst-soul	❌ Failed (Inspect)			Jan 3, 2025 7:01pm

3 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
catalyst	⬜️ Ignored (Inspect)			Jan 3, 2025 7:01pm
catalyst-au	⬜️ Ignored (Inspect)	Visit Preview		Jan 3, 2025 7:01pm
catalyst-uk	⬜️ Ignored (Inspect)	Visit Preview		Jan 3, 2025 7:01pm

[migueloller]

Looks good. Do we have a way to test this?

[jordanarldt]

Looks good. Do we have a way to test this?

@migueloller I tested on my sandbox store, since my category pages are still returning 500 errors due to that weird nuqs error when I have no product filters 👍 That's how I got the screenshots.

If we were to make functional tests for this behavior though, not entirely sure how we'd go about testing - we'd have to force an internal error.

[migueloller]

Looks good. Do we have a way to test this?

@migueloller I tested on my sandbox store, since my category pages are still returning 500 errors due to that weird nuqs error when I have no product filters 👍 That's how I got the screenshots.

If we were to make functional tests for this behavior though, not entirely sure how we'd go about testing - we'd have to force an internal error.

We should be able to do this by passing a streamable prop that throws whenever we implement the test

[jordanarldt]

We should be able to do this by passing a streamable prop that throws whenever we implement the test

@migueloller Yeah, that's what I had in mind also. For a functional / E2E test though, not sure how we'd force the error there 💭

[jorgemoya]

LGTM. Having two error boundaries makes sense, even though we duplicate code, which seems off.

[github-actions]

⚡️🏠 Lighthouse report

Lighthouse ran against https://catalyst-latest-j00f6pyzu-bigcommerce-platform.vercel.app

🖥️ Desktop

We ran Lighthouse against the changes on a desktop and produced this report. Here's the summary:

Category	Score
🟢 Performance	99
🟢 Accessibility	92
🟢 Best practices	100
🟠 SEO	82

📱 Mobile

We ran Lighthouse against the changes on a mobile and produced this report. Here's the summary:

Category	Score
🟠 Performance	88
🟢 Accessibility	92
🟢 Best practices	100
🟠 SEO	85