feat(remix): Add Remix 2.x release support. by onurtemizkan · Pull Request #8940 · getsentry/sentry-javascript

onurtemizkan · 2023-09-04T13:38:01Z

Resolves: #8681
closes #9040

Summary:

Updated Node.JS version used on E2E tests to 18.x. (This is required for Remix v2.x, and 18.x is the current LTS so updated this for all) chore(e2e-tests): Use Node 18 for E2E tests. #8964
Updated create-remix-app E2E tests to cover client-side events and transactions.
Added create-remix-app-v2 E2E test application that uses 2.0.0 version.

Events:

Client-side captured event - Link
Client-side render error - Link
Server-side error - Link
pageload transaction - Link
navigation transaction - Link

github-actions · 2023-09-05T10:09:36Z

size-limit report 📦

Path	Size
@sentry/browser (incl. Tracing, Replay) - Webpack (gzipped)	75.58 KB (0%)
@sentry/browser (incl. Tracing) - Webpack (gzipped)	31.49 KB (0%)
@sentry/browser - Webpack (gzipped)	22.09 KB (0%)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (gzipped)	70.27 KB (-0.01% 🔽)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (gzipped)	28.59 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped)	20.66 KB (0%)
@sentry/browser (incl. Tracing, Replay) - ES6 CDN Bundle (minified & uncompressed)	222.15 KB (0%)
@sentry/browser (incl. Tracing) - ES6 CDN Bundle (minified & uncompressed)	86.64 KB (0%)
@sentry/browser - ES6 CDN Bundle (minified & uncompressed)	61.49 KB (0%)
@sentry/browser (incl. Tracing) - ES5 CDN Bundle (gzipped)	31.47 KB (0%)
@sentry/react (incl. Tracing, Replay) - Webpack (gzipped)	75.61 KB (0%)
@sentry/react - Webpack (gzipped)	22.12 KB (0%)
@sentry/nextjs Client (incl. Tracing, Replay) - Webpack (gzipped)	93.49 KB (0%)
@sentry/nextjs Client - Webpack (gzipped)	51.07 KB (0%)

AbhiPrasad

Can we open up a separate PR for the node version changes on the e2e test? That way this PR can only look at changes to remix.

AbhiPrasad · 2023-09-06T16:25:11Z

.github/workflows/build.yml

        uses: actions/setup-node@v3
        with:
-          node-version-file: 'package.json'
+          node-version: 18


Can we read the e2e-tests package.json here instead?

AbhiPrasad

One last thing before we merge - is there no way to get the remix version automatically? I would prefer not forcing folks to use the isRemixV2 flag.

onurtemizkan · 2023-09-08T14:07:00Z

One last thing before we merge - is there no way to get the remix version automatically? I would prefer not forcing folks to use the isRemixV2 flag.

Yes, I thought about it, there's no property including version available on client side (window.__remixContext), it's possible on server-side though. Is there a reliable way to pass that info on build time from server to client SDK?

Update: Passed remix version from server package.json to browser env while monkey-patching root loader.

huw · 2023-09-16T15:45:06Z

Just FYI after upgrading my own setup:

error instanceof Error doesn’t work anymore for distinguishing between true client-side and ‘hydrated’ errors; we have to check for the presence of error.stack
Remix exports ErrorResponse from all runtimes and isRouteErrorResponse from @remix-run/react works fine for detection in all runtimes
ErrorResponses in handleError should probably therefore be sent to captureRemixServerException in the recommended setup (Remix now correctly emits them for Remix-internal errors that don’t end up in the error boundary; we just have to test for status >= 500)
captureRemixServerException should check for ErrorResponse instead of Response; I don’t think there are any situations where it would be sent a Response in Remix v2 but am much less sure of this than the others.
ErrorResponses that are sent to captureRemixServerException often include errorResponse.error, which is a private field in TypeScript but can be unwrapped to get an ordinary error to send to Sentry. This isn’t true for loader/action ErrorResponses.

Lms24 · 2023-09-18T09:38:45Z

packages/remix/src/utils/futureFlags.ts

+  const pkg = loadModule<{ version: string }>('@remix-run/react/package.json');
+  const version = pkg ? pkg.version : '0.0.0';


m: If we stick with this approach (see my other comment), let's add a debug log if we fail to load package.json

sergical · 2023-09-18T18:41:13Z

Remix V2 is out, would love to get this in 😅

onurtemizkan · 2023-09-19T10:03:19Z

Thanks for the trial @huw, it's been very helpful!

error instanceof Error doesn’t work anymore for distinguishing between true client-side and ‘hydrated’ errors; we have to check for the presence of error.stack

I was not able to reproduce this, but will take another look after the release.

ErrorResponses that are sent to captureRemixServerException often include errorResponse.error, which is a private field in TypeScript but can be unwrapped to get an ordinary error to send to Sentry. This isn’t true for loader/action ErrorResponses.

This may need a bit of discussion and new test cases.

We can revisit these two points as improvements in other PRs. The other 3 points @huw reported are now included in the first version.

Lms24

LGTM now! I agree with merging this in now and tackling the open questions in follow up tasks/PRs. Thanks Onur!

packages/e2e-tests/test-applications/create-remix-app-v2/app/entry.client.tsx

packages/e2e-tests/test-applications/create-remix-app-v2/playwright.config.ts

Co-authored-by: Lukas Stracke <lukas.stracke@sentry.io>

AbhiPrasad

Let's ship this as a first step - thanks Onur!

onurtemizkan force-pushed the onur/remix-v2-e2e-tests branch 3 times, most recently from 6efcf2c to 0149461 Compare September 4, 2023 15:00

onurtemizkan force-pushed the onur/remix-v2-e2e-tests branch 2 times, most recently from abb124e to b6ec1a3 Compare September 5, 2023 10:31

onurtemizkan changed the title ~~feat(remix): Add flags for Remix v2 usage.~~ feat(remix): Add flags for Remix 2.x usage. Sep 5, 2023

onurtemizkan force-pushed the onur/remix-v2-e2e-tests branch 3 times, most recently from aef6350 to ff4d574 Compare September 6, 2023 10:39

onurtemizkan marked this pull request as ready for review September 6, 2023 11:31

AbhiPrasad reviewed Sep 6, 2023

View reviewed changes

onurtemizkan mentioned this pull request Sep 7, 2023

chore(e2e-tests): Use Node 18 for E2E tests. #8964

Merged

onurtemizkan force-pushed the onur/remix-v2-e2e-tests branch 3 times, most recently from 9b935d0 to 67c3c4e Compare September 7, 2023 12:46

AbhiPrasad reviewed Sep 8, 2023

View reviewed changes

onurtemizkan force-pushed the onur/remix-v2-e2e-tests branch 4 times, most recently from e62e166 to 09a1425 Compare September 11, 2023 18:54

onurtemizkan marked this pull request as draft September 11, 2023 18:55

onurtemizkan force-pushed the onur/remix-v2-e2e-tests branch 7 times, most recently from 5eb3369 to 2ab1c11 Compare September 12, 2023 19:18

Lms24 reviewed Sep 18, 2023

View reviewed changes

onurtemizkan force-pushed the onur/remix-v2-e2e-tests branch from 081e762 to 88a7f23 Compare September 18, 2023 11:04

HazAT mentioned this pull request Sep 18, 2023

Upgrade to remix v2 #9040

Closed

onurtemizkan force-pushed the onur/remix-v2-e2e-tests branch from 5917bf9 to d6badeb Compare September 19, 2023 09:39

onurtemizkan requested a review from Lms24 September 19, 2023 10:03

onurtemizkan added 13 commits September 19, 2023 11:05

feat(remix): Add flags for Remix v2 usage.

61593b9

Fix linter.

ade7af7

Remove leftover ember typedefs.

ce1627c

Fix linter.

ab7cafe

Clean up

d572887

Add route-handlers tests back.

7ead961

Add flag to client-side.

dca623a

Wrap App on render time.

25a543e

Read Remix version from dependency module.

b0041d4

Update Remix to v2.0.0 on e2e-tests.

c911cbc

Get Remix version from build object.

c791ee8

Remove use of Response on v2 e2e tests.

34733bb

Switch to isRouteErrorResponse on Remix v2.

7164807

onurtemizkan force-pushed the onur/remix-v2-e2e-tests branch from d6badeb to 7164807 Compare September 19, 2023 10:05

Switch to isRouteErrorResponse on Remix v2.

1cfd576

Lms24 approved these changes Sep 19, 2023

View reviewed changes

packages/e2e-tests/test-applications/create-remix-app-v2/app/entry.client.tsx Outdated Show resolved Hide resolved

packages/e2e-tests/test-applications/create-remix-app-v2/playwright.config.ts Outdated Show resolved Hide resolved

Apply suggestions from code review

bf7ec96

Co-authored-by: Lukas Stracke <lukas.stracke@sentry.io>

AbhiPrasad approved these changes Sep 19, 2023

View reviewed changes

AbhiPrasad merged commit 69b308d into develop Sep 19, 2023

AbhiPrasad deleted the onur/remix-v2-e2e-tests branch September 19, 2023 13:21

chohner mentioned this pull request Sep 19, 2023

Upgrade to remix v2 digitalservicebund/a2j-rechtsantragstelle#309

Merged

2 tasks

Prithvirajkumar mentioned this pull request Sep 19, 2023

Request for Hydrogen + Sentry demo repo with best-in-class instrumentation/context #9055

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(remix): Add Remix 2.x release support.#8940

feat(remix): Add Remix 2.x release support.#8940
AbhiPrasad merged 15 commits intodevelopfrom
onur/remix-v2-e2e-tests

onurtemizkan commented Sep 4, 2023 •

edited by Lms24

Loading

Uh oh!

github-actions bot commented Sep 5, 2023 •

edited

Loading

Uh oh!

AbhiPrasad left a comment

Uh oh!

AbhiPrasad Sep 6, 2023

Uh oh!

AbhiPrasad left a comment

Uh oh!

onurtemizkan commented Sep 8, 2023 •

edited

Loading

Uh oh!

huw commented Sep 16, 2023 •

edited

Loading

Uh oh!

Lms24 Sep 18, 2023

Uh oh!

sergical commented Sep 18, 2023

Uh oh!

onurtemizkan commented Sep 19, 2023

Uh oh!

Lms24 left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

AbhiPrasad left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

		const pkg = loadModule<{ version: string }>('@remix-run/react/package.json');
		const version = pkg ? pkg.version : '0.0.0';

Uh oh!

Conversation

onurtemizkan commented Sep 4, 2023 • edited by Lms24 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Sep 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

AbhiPrasad left a comment

Choose a reason for hiding this comment

Uh oh!

AbhiPrasad Sep 6, 2023

Choose a reason for hiding this comment

Uh oh!

AbhiPrasad left a comment

Choose a reason for hiding this comment

Uh oh!

onurtemizkan commented Sep 8, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

huw commented Sep 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Lms24 Sep 18, 2023

Choose a reason for hiding this comment

Uh oh!

sergical commented Sep 18, 2023

Uh oh!

onurtemizkan commented Sep 19, 2023

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!

Uh oh!

Uh oh!

AbhiPrasad left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

onurtemizkan commented Sep 4, 2023 •

edited by Lms24

Loading

github-actions bot commented Sep 5, 2023 •

edited

Loading

onurtemizkan commented Sep 8, 2023 •

edited

Loading

huw commented Sep 16, 2023 •

edited

Loading

Lms24 left a comment •

edited

Loading