feat(remix): Add wizard for Remix. #387

onurtemizkan · 2023-07-31T14:42:55Z

Resolves: #364
Resolves: getsentry/sentry-javascript#8556
Resolves: getsentry/sentry-javascript#5486

Adds a wizard for auto-instrumenting Remix applications / generating and uploading sourcemaps.

Creates .sentryclirc
Updates build script in package.json to generate and upload sourcemaps.
Instruments root.tsx / root.jsx for Remix versions 1 and 2.
Instruments entry.client and entry.server for Remix versions 1 and 2.

Used recast for parts that magicast does not support yet.

github-actions · 2023-07-31T14:44:00Z

	Fails
🚫	Please consider adding a changelog entry for the next release.

	Messages
📖	Do not forget to update Sentry-docs with your feature once the pull request gets approved.

Instructions and example for changelog

Please add an entry to CHANGELOG.md to the "Unreleased" section. Make sure the entry includes this PR's number.

Example:

## Unreleased

- Add wizard for Remix ([#387](https://github.com/getsentry/sentry-wizard/pull/387))

If none of the above apply, you can opt out of this check by adding #skip-changelog to the PR description.

Generated by 🚫 dangerJS against 9ac5e6f

src/remix/remix-wizard.ts

AbhiPrasad · 2023-08-09T13:32:30Z

src/remix/sdk-setup.ts

+ * Copied from sveltekit wizard
+ * We want to insert the init call on top of the file but after all import statements
+ */
+function getInitCallInsertionIndex(originalHooksModAST: Program): number {


If this is from the sveltekit wizard, @Lms24 do you think it's appropriate if we extract into a util?

src/remix/sdk-setup.ts

src/remix/remix-wizard.ts

AbhiPrasad · 2023-08-09T13:36:59Z

src/remix/sdk-setup.ts

+    return remixConfigModule?.default || {};
+  } catch (e: unknown) {
+    clack.log.error(
+      `Couldn't load ${REMIX_CONFIG_FILE}. Please make sure, you're running this wizard with Node 14 or newer`,


The wizard should we Node 14+ - is the another error message we can write?

Just removed it, but can't think of any other possible common issues to point out here.

AbhiPrasad

Round 2 - thanks for sticking with this!

AbhiPrasad · 2023-08-09T17:38:25Z

src/remix/sdk-setup.ts

+  const copiedBodyNodes = [...originalHooksModAST.body];
+  const lastImportDeclaration = copiedBodyNodes
+    .reverse()
+    .find((node) => node.type === 'ImportDeclaration');
+
+  const initCallInsertionIndex = lastImportDeclaration
+    ? originalHooksModAST.body.indexOf(lastImportDeclaration) + 1
+    : 0;
+  return initCallInsertionIndex;


can we just run this in a for loop? More efficient than cloning, and iterating through twice.

for (let x = originalHooksModAST.body.length - 1; x >= 0; x--) { if (originalHooksModAST.body[x].type === 'ImportDeclaration') { return x + 1; } } return 0;

AbhiPrasad · 2023-08-09T17:39:27Z

src/remix/sdk-setup.ts

+  dsn: string,
+  originalHooksMod: ProxifiedModule<any>,
+) {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment


can we disable this lint rule for the entire file?

AbhiPrasad · 2023-08-09T17:39:55Z

src/remix/sdk-setup.ts

+  originalHooksModAST.body.splice(
+    initCallInsertionIndex,
+    0,
+    // @ts-ignore - string works here because the AST is proxified by magicast


let's make all these @ts-expect-error

src/remix/sdk-setup.ts

AbhiPrasad · 2023-08-09T17:42:34Z

src/remix/sdk-setup.ts

+
+  if (hasSentryContent(originalEntryClient, originalEntryClientMod.$code)) {
+    // Bail out
+    clack.log.warn(


Since hasSentryContent already logs out, do we need to log out again here?

src/remix/sdk-setup.ts

AbhiPrasad · 2023-08-09T17:43:27Z

src/remix/sdk-setup.ts

+  } else {
+    if (


Can this become else if?

AbhiPrasad · 2023-08-09T17:44:34Z

src/remix/sdk-setup.ts

@@ -0,0 +1,509 @@
+import type { ExportNamedDeclaration, Program } from '@babel/types';


Could we split up some of the utils in this file into their own files? Specifically I think anything using recast should live in their own file.

Moved under codemods folder 👍

Co-authored-by: Abhijeet Prasad <[email protected]>

AbhiPrasad

lgtm! lets wait till @Lms24 double checks though

Lms24

Looks great, thanks for figuring all of this out Onur! Really like the usage of recast whenever magicast doesn't work.

I still had a few comments but I think we're almost ready to get this in.

I also have a follow-up request but this should be done in a separate PR: SvelteKit and Next wizards automatically create a sample page that throws some client/server errors. Can we do something like this in the Remix wizard, too? If you think this is doable, I'll create an issue to track it.

lib/Steps/Integrations/Remix.ts

src/remix/remix-wizard.ts

src/remix/codemods/root-v1.ts

src/remix/sdk-setup.ts

src/remix/codemods/root-v2.ts

Lms24 · 2023-08-11T07:46:45Z

src/remix/remix-wizard.ts

+      await instrumentRootRoute(isV2, isTS);
+    } catch (e) {
+      clack.log.warn(`Could not instrument root route.
+  Please do it manually using instructions from https://docs.sentry.io/platforms/javascript/guides/remix/`);


I think for now this is fine. Once we put the wizard instructions into docs, I think it's likely that we'll refactor the remix docs so that the manual setup will be in its own page (similarly to Next and Svelte). We just have to adjust the links then. I added a task in the follow-up issue (getsentry/sentry#54615)

src/remix/remix-wizard.ts

Lms24

Damn, almost missed that you also already created a sourcemaps wizard flow. Thanks a lot!

src/sourcemaps/tools/remix.ts

Lms24

I just ran the wizard in a small remix app and found some more things (thanks for sticking with us here!):

Can we log out a clack.log.success for each file we touched/inserted code? I think this increases transparency for users so that they are informed what the wizard is doing (especially for those who ran it without being in a version controlled environment).
Let's make sure we're adding the file ending in this log:

Co-authored-by: Lukas Stracke <[email protected]>

onurtemizkan · 2023-08-14T13:38:23Z

@Lms24, @AbhiPrasad -- thanks for the reviews! Updated the PR.

Lms24

Thanks for applying our feedback, Onur! Had one last comment then we can merge!

In preparation to merging, would you mind adding a note to CHANGELOG.md? In this repo, changelogs are semi-automatically generated. For each user-facing PR. we add an entry to CHANGELOG.md under (##Unreleased) and our release process will add it to the version entry for the version to be released. I think for this change, a small usage example would be nice. See the entry for the SvelteKit wizard.

Lms24 · 2023-08-16T08:33:42Z

src/sourcemaps/tools/remix.ts

+${chalk.dim(`
+...
+"scripts": {
+  "build": "remix build --sourcemap && sentry-upload-sourcemaps"
+}
+...`)}


Let's please directly use console.log here and adjust the colors to make the build line stand out. For reference, feel free to take a look at the other tools flows of the sourcemap wizard (for example, tsc).
Reason: By directly using console.log, users can more easily copy/paste the code as no clack UI border characters are in the line.

Lms24

Perfect, thanks Onur!

onurtemizkan marked this pull request as draft July 31, 2023 14:44

onurtemizkan force-pushed the onur/remix-wizard branch from 30b6fad to 09bc1fb Compare July 31, 2023 14:47

feat(remix): Add wizard for Remix.

5dfb6fb

onurtemizkan force-pushed the onur/remix-wizard branch from 09bc1fb to 5dfb6fb Compare July 31, 2023 18:40

onurtemizkan added 5 commits July 31, 2023 21:32

Instrument Remix v2 handleError

03f7923

Check v2 from package.json

fee472e

Add sourcemap-upload to build script.

5be1b23

Clean up

78e14c4

Add org and project to .sentryclirc

48b27f2

onurtemizkan force-pushed the onur/remix-wizard branch from 787b7f0 to 900c8c2 Compare August 1, 2023 11:34

Remove unused template.

edf5a51

onurtemizkan force-pushed the onur/remix-wizard branch from 900c8c2 to edf5a51 Compare August 8, 2023 14:59

Support JS projects.

787dd02

onurtemizkan marked this pull request as ready for review August 9, 2023 10:52

onurtemizkan requested a review from Lms24 August 9, 2023 10:52

Rename package.json update function.

c476ad9

AbhiPrasad reviewed Aug 9, 2023

View reviewed changes

Address review comments.

819855c

AbhiPrasad reviewed Aug 9, 2023

View reviewed changes

onurtemizkan and others added 2 commits August 9, 2023 19:09

Apply suggestions from code review

d6a173b

Co-authored-by: Abhijeet Prasad <[email protected]>

Address review comments.

2ce03a2

onurtemizkan force-pushed the onur/remix-wizard branch from 9bd4715 to 2ce03a2 Compare August 9, 2023 23:10

Wrap wizard steps in traceSteps.

08fe9aa

AbhiPrasad approved these changes Aug 10, 2023

View reviewed changes

smeubank mentioned this pull request Aug 11, 2023

Update Remix Onboarding with SDK wizard getsentry/sentry#54615

Closed

Lms24 reviewed Aug 11, 2023

View reviewed changes

src/sourcemaps/tools/remix.ts Outdated Show resolved Hide resolved

src/sourcemaps/tools/remix.ts Show resolved Hide resolved

Lms24 reviewed Aug 11, 2023

View reviewed changes

Apply suggestions from code review

df8502d

Co-authored-by: Lukas Stracke <[email protected]>

onurtemizkan added 3 commits August 14, 2023 11:11

Inform users about telemetry collection in welcome message.

6216d35

Add an outro message.

fb925c7

Address review comments.

f4be4c9

onurtemizkan force-pushed the onur/remix-wizard branch from 65fab1e to f4be4c9 Compare August 14, 2023 13:27

Lms24 reviewed Aug 16, 2023

View reviewed changes

onurtemizkan added 3 commits August 17, 2023 12:48

Add changelog entry.

5015224

Convert manual script update snippet to console.log.

9d6cf4f

Merge branch 'master' into onur/remix-wizard

9ac5e6f

Lms24 approved these changes Aug 18, 2023

View reviewed changes

Lms24 merged commit 9b401a9 into master Aug 18, 2023

Lms24 deleted the onur/remix-wizard branch August 18, 2023 08:09

		@@ -0,0 +1,509 @@
		import type { ExportNamedDeclaration, Program } from '@babel/types';

Uh oh!

feat(remix): Add wizard for Remix. #387

feat(remix): Add wizard for Remix. #387

Uh oh!

Conversation

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

Uh oh!

Uh oh!

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

Uh oh!

Instructions and example for changelog

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AbhiPrasad left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AbhiPrasad left a comment

Choose a reason for hiding this comment

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!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Lms24 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Lms24 left a comment

Choose a reason for hiding this comment

Uh oh!

onurtemizkan commented Aug 14, 2023 • 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!

Choose a reason for hiding this comment

Uh oh!

Lms24 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

onurtemizkan commented Jul 31, 2023 •

edited

Loading

github-actions bot commented Jul 31, 2023 •

edited

Loading

Lms24 left a comment •

edited

Loading

onurtemizkan commented Aug 14, 2023 •

edited

Loading

Lms24 left a comment •

edited

Loading