feat: POC for adding spotlight overlay for ssr-errors by Shubhdeep12 · Pull Request #364 · getsentry/spotlight

Shubhdeep12 · 2024-02-23T15:43:48Z

Before opening this PR:

I added a Changeset Entry with pnpm changeset:add
I referenced issues that this PR addresses
To have spotlight error page in case of SSR-error #363

https://vimeo.com/915998606/e0200955c6

Added a new option in sentry integration to display the first incoming error - showFirstIncomingError?: boolean
if passed as true, the first encountered error will be opened up automatically.
Also, I closed Astro's custom error overlay and made changes to the plugin created by @Lms24 in @spotlight/astro to open spotlight in ssr-error page

vercel · 2024-02-23T15:43:54Z

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

Name	Status	Preview	Comments	Updated (UTC)
spotlightjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 4, 2024 10:28pm

Lms24

Your video shows the problem here pretty well: We're showing the island error although we actually should be showing the "random error" (SSR error) when it occurs. So maybe showing the first error is not the way to go. Ideally, we rather want to show the most recent error. This should be more correct in general but I guess there's the timing problem again.

Can you check if the SSR error is already sent to the overlay by the time the error page is rendered? If yes, we should be good.

Another idea I just had (gonna note it down here so we don't completely forget):

We could try this (NO idea if it works).

We register an event processor on the server SDK that writes the most recent eventId to the global object.
- To try this, we can simply call something like this in an Astro test app:
```
Sentry.addEventProcessor(event => {
 if (!event.type) {
   globalThis.__Sentry_last_event_id = event.event_id;
 }
 return event;
})
```
- If this works, we add it to the Spotlight integration in the Sentry JS SDK.
In the vite plugin, we access the global object and get the id
We add an option to the overlay init (something like waitForEventId: string) and if it is defined, we immediately open spotlight and wait for the event with the id to come in and show it.

This requires the Vite plugin to run in the same process as the Astro dev server so that they actually share the global object. I believe this is the case but I never tried it out. Might be worth to explore though!

Shubhdeep12 · 2024-02-26T10:45:35Z

Yes its worth trying.

I'll try both the ideas out. 💡

Shubhdeep12 · 2024-03-02T10:31:07Z

@Lms24 looks like the SSR error is sent to overlay by the time the error page is rendered and we can open the last error received to overlay - which is approach 1
I've pushed the code for this approach

Shubhdeep12 · 2024-03-02T10:36:25Z

And @Lms24 when it comes to Approach 2, which is more logical in terms of error tracking, I tried this approach by adding Sentry.addEventProcessor in the Sentry.server.config.ts file in the demo app and tracked the event ID, as you suggested above.

I used that as the option in the Sentry integration while initializing the spotlight for the SSR-error page. This works for the first time, but I am not sure whether the Vite plugin caches the transform function created for the first time or something else, as it doesn't update the value retrieved from globalThis. Even if the value is updated, it always takes the value set for the first time.

packages/astro/src/snippets.ts

BYK · 2024-06-26T22:20:29Z

packages/astro/src/vite/error-page.ts

      });

-      const modifiedCode = `${code}\n${initSnippet}\n`;
+      // Checking if there is a ErrorOverlay class added by Astro


This definitely feels quite fragile. Do we do this kind of find/replace on actual JS/TS code somewhere?

yeah :|
as a POC i was trying this hack to close the ErrorOverlay of astro and replace it with the fullscreen of spotlight

packages/overlay/src/integrations/sentry/index.ts

…rybook-8-compatibility * origin/HEAD: fix: Overhaul envelope parsing to be spec compliant (getsentry#439) fix: Always trim befor trying to JSON.parse (getsentry#438) Highlighted active span and event (getsentry#437) ref: Use new event helpers (getsentry#433) fix: Remove forgotton console.log statement feat: POC for adding spotlight overlay for ssr-errors (getsentry#364) ref: More concise event helpers (getsentry#431) fix: Fix CI issues (getsentry#432) fix: Send something immediately to trigger open event (getsentry#429) ref: More robust client init code generation (getsentry#426) docs: Add note about Volta - pnpm support (getsentry#425) Added Search in Trace detail (getsentry#424) Added Trace Info (getsentry#423) chore(deps-dev): bump vite from 4.5.2 to 4.5.3 (getsentry#392) chore(deps): bump braces from 3.0.2 to 3.0.3 (getsentry#415) docs: Add build step to initial setup (getsentry#418)

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and publish to npm yourself or [setup this action to publish automatically](https://github.com/changesets/action#with-publishing). If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @spotlightjs/astro@2.1.0 ### Minor Changes - A new Vite plugin under the main `@spotlightjs/spotlight` package that automatically injects spotlight for dev mode. It ([#434](#434)) also replaces Vite's error page shown on compilation errors with Spotlight. - 1. Altered the ssr-page vite plugin in @spotlight/astro to run spotlight overlay in fullscreen mode in ssr-error page. ([#364](#364)) 2. Closed astro erro overlay. 3. Added a option in sentry integration to open first error encountered in spotlight automatically. ### Patch Changes - Updated dependencies \[[`a8c09cd8629677ab3eed4bf7000de4c7068538ee`](a8c09cd)]: - @spotlightjs/spotlight@2.1.0 ## @spotlightjs/overlay@2.1.0 ### Minor Changes - 1. Altered the ssr-page vite plugin in @spotlight/astro to run spotlight overlay in fullscreen mode in ssr-error page. ([#364](#364)) 2. Closed astro erro overlay. 3. Added a option in sentry integration to open first error encountered in spotlight automatically. ### Patch Changes - Added search bar in trace ([#424](#424)) - - Show active span item in trace when span info is opened. ([#437](#437)) - Show active event in DeveloperInfo tab when event is info is opened. - added traceInfo ([#423](#423)) - Overhaul envelope parsing to be spec compliant ([#439](#439)) ## @spotlightjs/sidecar@1.5.0 ### Minor Changes - A new Vite plugin under the main `@spotlightjs/spotlight` package that automatically injects spotlight for dev mode. It ([#434](#434)) also replaces Vite's error page shown on compilation errors with Spotlight. ## @spotlightjs/spotlight@2.1.0 ### Minor Changes - A new Vite plugin under the main `@spotlightjs/spotlight` package that automatically injects spotlight for dev mode. It ([#434](#434)) also replaces Vite's error page shown on compilation errors with Spotlight. ### Patch Changes - Updated dependencies \[[`01321f8824ae133dc02a1d829c25952c884bf631`](01321f8), [`a8c09cd8629677ab3eed4bf7000de4c7068538ee`](a8c09cd), [`3792a5e742b3888a980a0b865fd23be941809040`](3792a5e), [`b5249aa761c783739543dc7bf27cdd8d0fe8cebe`](b5249aa), [`1c7896e02a2b81715c4e5c47cbb2fd6145868ab1`](1c7896e), [`41d90455fa94df0a01e93fd90574974dfca96764`](41d9045)]: - @spotlightjs/overlay@2.1.0 - @spotlightjs/sidecar@1.5.0 ## @spotlightjs/electron@1.0.1 ### Patch Changes - Updated dependencies \[[`01321f8824ae133dc02a1d829c25952c884bf631`](01321f8), [`a8c09cd8629677ab3eed4bf7000de4c7068538ee`](a8c09cd), [`3792a5e742b3888a980a0b865fd23be941809040`](3792a5e), [`b5249aa761c783739543dc7bf27cdd8d0fe8cebe`](b5249aa), [`1c7896e02a2b81715c4e5c47cbb2fd6145868ab1`](1c7896e), [`41d90455fa94df0a01e93fd90574974dfca96764`](41d9045)]: - @spotlightjs/overlay@2.1.0 - @spotlightjs/sidecar@1.5.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

@Lms24

Closes #363 . https://vimeo.com/915998606/e0200955c6 - Added a new option in sentry integration to display the first incoming error - `openLastError?: boolean` - if set to true, the first encountered error will be opened up automatically. - Also, I closed Astro's custom error overlay and made changes to the plugin created by @Lms24 in @spotlight/astro to open spotlight in ssr-error page --------- Co-authored-by: Burak Yigit Kaya <byk@sentry.io>

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and publish to npm yourself or [setup this action to publish automatically](https://github.com/changesets/action#with-publishing). If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @spotlightjs/astro@2.1.0 ### Minor Changes - A new Vite plugin under the main `@spotlightjs/spotlight` package that automatically injects spotlight for dev mode. It ([#434](#434)) also replaces Vite's error page shown on compilation errors with Spotlight. - 1. Altered the ssr-page vite plugin in @spotlight/astro to run spotlight overlay in fullscreen mode in ssr-error page. ([#364](#364)) 2. Closed astro erro overlay. 3. Added a option in sentry integration to open first error encountered in spotlight automatically. ### Patch Changes - Updated dependencies \[[`a8c09cd8629677ab3eed4bf7000de4c7068538ee`](a8c09cd)]: - @spotlightjs/spotlight@2.1.0 ## @spotlightjs/overlay@2.1.0 ### Minor Changes - 1. Altered the ssr-page vite plugin in @spotlight/astro to run spotlight overlay in fullscreen mode in ssr-error page. ([#364](#364)) 2. Closed astro erro overlay. 3. Added a option in sentry integration to open first error encountered in spotlight automatically. ### Patch Changes - Added search bar in trace ([#424](#424)) - - Show active span item in trace when span info is opened. ([#437](#437)) - Show active event in DeveloperInfo tab when event is info is opened. - added traceInfo ([#423](#423)) - Overhaul envelope parsing to be spec compliant ([#439](#439)) ## @spotlightjs/sidecar@1.5.0 ### Minor Changes - A new Vite plugin under the main `@spotlightjs/spotlight` package that automatically injects spotlight for dev mode. It ([#434](#434)) also replaces Vite's error page shown on compilation errors with Spotlight. ## @spotlightjs/spotlight@2.1.0 ### Minor Changes - A new Vite plugin under the main `@spotlightjs/spotlight` package that automatically injects spotlight for dev mode. It ([#434](#434)) also replaces Vite's error page shown on compilation errors with Spotlight. ### Patch Changes - Updated dependencies \[[`01321f8824ae133dc02a1d829c25952c884bf631`](01321f8), [`a8c09cd8629677ab3eed4bf7000de4c7068538ee`](a8c09cd), [`3792a5e742b3888a980a0b865fd23be941809040`](3792a5e), [`b5249aa761c783739543dc7bf27cdd8d0fe8cebe`](b5249aa), [`1c7896e02a2b81715c4e5c47cbb2fd6145868ab1`](1c7896e), [`41d90455fa94df0a01e93fd90574974dfca96764`](41d9045)]: - @spotlightjs/overlay@2.1.0 - @spotlightjs/sidecar@1.5.0 ## @spotlightjs/electron@1.0.1 ### Patch Changes - Updated dependencies \[[`01321f8824ae133dc02a1d829c25952c884bf631`](01321f8), [`a8c09cd8629677ab3eed4bf7000de4c7068538ee`](a8c09cd), [`3792a5e742b3888a980a0b865fd23be941809040`](3792a5e), [`b5249aa761c783739543dc7bf27cdd8d0fe8cebe`](b5249aa), [`1c7896e02a2b81715c4e5c47cbb2fd6145868ab1`](1c7896e), [`41d90455fa94df0a01e93fd90574974dfca96764`](41d9045)]: - @spotlightjs/overlay@2.1.0 - @spotlightjs/sidecar@1.5.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Shubhdeep12 added 4 commits February 10, 2024 12:07

To open spotlight overlay instead of error page in astro for ssr error

e9a14a6

minor style update

86efe1b

Merge branch 'upstream-main' into feat/astro-spotlight-ssr

5b595e9

feat(astro): to add spotlight as error overlay incase of SSR-error

82b9a08

Shubhdeep12 requested review from HazAT, Lms24 and dcramer and removed request for dcramer February 24, 2024 06:01

Merge branch 'upstream-main' into feat/astro-ssr-spotlight

dbbe286

vercel bot deployed to Preview February 24, 2024 06:16 View deployment

Lms24 reviewed Feb 26, 2024

View reviewed changes

Shubhdeep12 changed the title ~~feat: POC for adding spotlight overlay for ssr-errors~~ [DO-NOT-MERGE] feat: POC for adding spotlight overlay for ssr-errors Feb 26, 2024

showRecentError instead of first error

e912ee3

vercel bot deployed to Preview March 2, 2024 10:32 View deployment

Shubhdeep12 changed the title ~~[DO-NOT-MERGE] feat: POC for adding spotlight overlay for ssr-errors~~ feat: POC for adding spotlight overlay for ssr-errors Mar 2, 2024

Shubhdeep12 requested a review from Lms24 March 2, 2024 10:36

BYK requested changes Jun 26, 2024

View reviewed changes

Shubhdeep12 added 2 commits July 4, 2024 20:21

Merge branch 'upstream-master' into feat/astro-ssr-spotlight

a89f6b4

fixed review comment

4f10fed

vercel bot deployed to Preview July 4, 2024 14:54 View deployment

updated pnpm lock file

7ac5743

vercel bot deployed to Preview July 4, 2024 15:05 View deployment

BYK added 2 commits July 4, 2024 22:41

Merge branch 'main' into feat/astro-ssr-spotlight

08c7750

move logic out of render

7528d5b

vercel bot deployed to Preview July 4, 2024 22:28 View deployment

BYK enabled auto-merge (squash) July 4, 2024 22:31

BYK approved these changes Jul 4, 2024

View reviewed changes

BYK merged commit 3792a5e into main Jul 4, 2024

BYK deleted the feat/astro-ssr-spotlight branch July 4, 2024 22:32

github-actions bot mentioned this pull request Jul 22, 2024

meta(changelog): Update package versions #444

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: POC for adding spotlight overlay for ssr-errors #364

feat: POC for adding spotlight overlay for ssr-errors #364
BYK merged 11 commits intomainfrom
feat/astro-ssr-spotlight

Shubhdeep12 commented Feb 23, 2024

Uh oh!

vercel bot commented Feb 23, 2024 •

edited

Loading

Uh oh!

Lms24 left a comment •

edited

Loading

Uh oh!

Shubhdeep12 commented Feb 26, 2024

Uh oh!

Shubhdeep12 commented Mar 2, 2024

Uh oh!

Shubhdeep12 commented Mar 2, 2024

Uh oh!

Uh oh!

BYK Jun 26, 2024

Uh oh!

Shubhdeep12 Jul 4, 2024 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

Shubhdeep12 commented Feb 23, 2024

Uh oh!

vercel bot commented Feb 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Lms24 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Shubhdeep12 commented Feb 26, 2024

Uh oh!

Shubhdeep12 commented Mar 2, 2024

Uh oh!

Shubhdeep12 commented Mar 2, 2024

Uh oh!

Uh oh!

BYK Jun 26, 2024

Choose a reason for hiding this comment

Uh oh!

Shubhdeep12 Jul 4, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel bot commented Feb 23, 2024 •

edited

Loading

Lms24 left a comment •

edited

Loading

Shubhdeep12 Jul 4, 2024 •

edited

Loading