docs(suspensive.org): add examples to the ErrorBoundary documentation using sandpack

[kangju2000]

related #7

Overview

Add examples to the ErrorBoundary documentation using sandpack.

Changes

• Change template from vite-ts to react-ts
• Hide react-error-overlay
• Implement custom ErrorOverlay for Sandpack

Details

Changed the template from vite-ts to react-ts to improve initial loading speed.

The react-ts template is based on Create React App (CRA), which shows the react-error-overlay when an error occurs. This overlay prevents the fallback UI from being displayed immediately. To fix this, I set the react-error-overlay to display: none.

Additionally, Sandpack has its own error overlay. To handle errors more effectively and ensure the fallback UI is displayed correctly, I customized the ErrorOverlay to not appear when an error is thrown.

The rest of the logic was taken from Sandpack's source code: Sandpack.tsx.

PR Checklist

• [x] I did below actions if need

1. I read the Contributing Guide
2. I added documents and tests.

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 27, 2024 5:25pm
v1.suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 27, 2024 5:25pm
visualization.suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 27, 2024 5:25pm

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 4c789e606fb830835cf8afef13bc18123830fa2d

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

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #995 will create unknown performance changes

_{Comparing improve-sandpack (4c789e6) with main (990058f)}

Summary

:warning: No benchmarks were detected in both the base of the PR and the PR.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 80.88%. Comparing base (990058f) to head (4c789e6).

Additional details and impacted files

[](https://app.codecov.io/gh/toss/suspensive/pull/995?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) ```diff @@ Coverage Diff @@ ## main #995 +/- ## ======================================= Coverage 80.88% 80.88% ======================================= Files 38 38 Lines 450 450 Branches 99 98 -1 ======================================= Hits 364 364 Misses 77 77 Partials 9 9 ``` | [Components](https://app.codecov.io/gh/toss/suspensive/pull/995/components?src=pr&el=components&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | Coverage Δ | | |---|---|---| | [@suspensive/react](https://app.codecov.io/gh/toss/suspensive/pull/995/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `97.03% <ø> (ø)` | | | [@suspensive/react-query](https://app.codecov.io/gh/toss/suspensive/pull/995/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `∅ <ø> (∅)` | | | [@suspensive/react-query-4](https://app.codecov.io/gh/toss/suspensive/pull/995/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <ø> (ø)` | | | [@suspensive/react-query-5](https://app.codecov.io/gh/toss/suspensive/pull/995/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <ø> (ø)` | | | [@suspensive/react-await](https://app.codecov.io/gh/toss/suspensive/pull/995/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `100.00% <ø> (ø)` | | | [@suspensive/react-image](https://app.codecov.io/gh/toss/suspensive/pull/995/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `23.52% <ø> (ø)` | |