feat(nuxt): Add "Deployment Provider Setup" #11486

s1gr1d · 2024-10-04T11:47:57Z

DESCRIBE YOUR PR

Adds a new menu item to describe the deployment setup for Nuxt as this is different for every provider and still in an experimental state.

IS YOUR CHANGE URGENT?

Help us prioritize incoming PRs by letting us know when the change needs to go live.

Urgent deadline (GA date, etc.):
[x ] Other deadline: 4. Oct or 7. Oct would be nice
None: Not urgent, can wait up to 1 week+

SLA

Teamwork makes the dream work, so please add a reviewer to your PRs.
Please give the docs team up to 1 week to review your PR unless you've added an urgent due date to it.
Thanks in advance for your help!

PRE-MERGE CHECKLIST

Make sure you've checked the following before merging your changes:

Checked Vercel preview for correctness, including links
PR was reviewed and approved by any necessary SMEs (subject matter experts)
PR was reviewed and approved by a member of the Sentry docs team

vercel · 2024-10-04T11:48:01Z

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

Name	Status	Preview	Comments	Updated (UTC)
changelog	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 7, 2024 11:34am
sentry-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 7, 2024 11:34am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
develop-docs	⬜️ Ignored (Inspect)	Visit Preview		Oct 7, 2024 11:34am

codecov · 2024-10-04T11:50:04Z

Bundle Report

Changes will increase total bundle size by 921 bytes (0.01%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
sentry-docs-server-cjs	7.45MB	930 bytes (0.01%) ⬆️
sentry-docs-edge-server-array-push	257.07kB	3 bytes (-0.0%) ⬇️
sentry-docs-client-array-push	6.42MB	6 bytes (-0.0%) ⬇️

smeubank

great work! we can add more from here in other PRs. Only wouldn't put it above source maps for now

smeubank · 2024-10-04T12:07:11Z

docs/platforms/javascript/common/deployment-provider-setup/index.mdx

@@ -0,0 +1,9 @@
+---
+title: Deployment Provider Setup
+sidebar_order: 2


Suggested change

sidebar_order: 2

sidebar_order: 4

i'd suggest below source maps at least

Changed it 👍

mydea · 2024-10-07T12:40:52Z

docs/platforms/javascript/common/deployment-provider-setup/general.mdx

+Internally, Sentry uses a specific ESM loader hook "[import-in-the-middle/hook.mjs](https://www.npmjs.com/package/import-in-the-middle)" which is
+automatically added when you add the Sentry server-side config file with `--import`. This will automatically instrument all modules in your application.


l: I am not sure if we need to/should include this - this is very much internal stuff that users don't really need to know/understand, and also could possibly change. IMHO it is enough to have the paragraph above, which states that sentry has to be initialized via --import ?

I tend to agree. I think wherever possible, we should only give the users the information they need most and avoid going too deep :)

mydea · 2024-10-07T12:41:58Z

docs/platforms/javascript/common/deployment-provider-setup/index.mdx

@@ -0,0 +1,9 @@
+---
+title: Deployment Provider Setup


L: This is very much bike shedding, but what about just calling this Deploying Nuxt with Sentry or something like this?

Or, if we want to keep it generic, e.g. "Deploying your application" or something like this?

@s1gr1d @mydea could we just call this "Alternate Installation Methods"? or "Alternate Ways to Set Up"?

mydea · 2024-10-07T12:42:55Z

docs/platforms/javascript/common/deployment-provider-setup/general.mdx

+As described above, there are some prerequisites for adding Sentry to a Nuxt project in ESM syntax:
+
+1. The possibility to add the node `--import` CLI flag.
+2. Knowing the correct path to your Sentry server config file within your deployment environment (to add the path to the `--import` CLI flag).


Suggested change

2. Knowing the correct path to your Sentry server config file within your deployment environment (to add the path to the `--import` CLI flag).

2. Knowing the correct path to your Sentry server config file within your deployment environment (as you need to pass it to the `--import` CLI flag).

mydea · 2024-10-07T12:44:08Z

docs/platforms/javascript/common/deployment-provider-setup/general.mdx

+1. The possibility to add the node `--import` CLI flag.
+2. Knowing the correct path to your Sentry server config file within your deployment environment (to add the path to the `--import` CLI flag).
+3. The `hook.mjs` file is available under `node_modules/import-in-the-middle/hook.mjs` wherever your server-side code is executed.
+4. Running Node.js version 18.19.0 or higher (support for `--import`).


Suggested change

4. Running Node.js version 18.19.0 or higher (support for `--import`).

4. Running Node.js version 18.19.0 or higher

mydea · 2024-10-07T12:45:30Z

docs/platforms/javascript/common/deployment-provider-setup/general.mdx

+If you get a warning that the `hook.mjs` file is not found, please report this in [the Sentry JS GitHub repo](https://github.com/getsentry/sentry-javascript/issues) or file an issue at your deployment provider.
+
+Nitro (which is used by Nuxt and SolidStart on the server side) uses [`@vercel/nft`](https://github.com/vercel/nft) during the build. `@vercel/nft` includes files that are added with `module.register()` from version 0.27.4 onwards.
+In case you get a runtime error along the lines `Cannot find module '/node_modules/import-in-the-middle/hook.mjs'`, make sure to add a resolution (yarn) or an override (npm/pnpm) for `@vercel/nft`:


Suggested change

In case you get a runtime error along the lines `Cannot find module '/node_modules/import-in-the-middle/hook.mjs'`, make sure to add a resolution (yarn) or an override (npm/pnpm) for `@vercel/nft`:

If you get a runtime error along the lines of `Cannot find module '/node_modules/import-in-the-middle/hook.mjs'`, be sure to add an override (npm/pnpm) or a resolution (yarn) for `@vercel/nft`:

we should probably mention npm first (generally)

mydea · 2024-10-07T12:45:51Z

docs/platforms/javascript/common/deployment-provider-setup/general.mdx

+Nitro (which is used by Nuxt and SolidStart on the server side) uses [`@vercel/nft`](https://github.com/vercel/nft) during the build. `@vercel/nft` includes files that are added with `module.register()` from version 0.27.4 onwards.
+In case you get a runtime error along the lines `Cannot find module '/node_modules/import-in-the-middle/hook.mjs'`, make sure to add a resolution (yarn) or an override (npm/pnpm) for `@vercel/nft`:
+
+```json {tabTitle:yarn} {filename: package.json}


should we flip these around, npm first, then yarn?

mydea · 2024-10-07T12:46:12Z

docs/platforms/javascript/common/deployment-provider-setup/general.mdx

+
+

Suggested change

extra new lines here

mydea · 2024-10-07T12:47:14Z

docs/platforms/javascript/common/deployment-provider-setup/index.mdx

+---
+title: Deployment Provider Setup
+sidebar_order: 4
+description: "Review our alternate installation methods."


this is probably left over from copying this file ;)

mydea · 2024-10-07T12:49:00Z

docs/platforms/javascript/common/deployment-provider-setup/netlify.mdx

+  The path to the function is depending on your setup. When building the preset locally, the file is available at: `.netlify/functions-internal/server/sentry.server.config.mjs`.
+
+  <Alert level="warning">
+    The docs for this are still vague and we will update them as soon as we know more about which exact path to use for the `--import` flag.


I guess what you want to say here is that the docs are not really ready/done here yet? "vague" implies for me that everything works but is not documented well 🤔 Maybe rather:

Suggested change

The docs for this are still vague and we will update them as soon as we know more about which exact path to use for the `--import` flag.

The docs for this are still a work in progress. We'll update them as soon as we know more about which exact path to use for the `--import` flag.

Also, does this work as of today? If it does not actually work we should not document it, and/or call out very specifically that it does not work!

+1 to @mydea. I think it's best not to document it if we know it doesn't work.

lizokm

I think we should rethink what we name these new docs to avoid it sounding too vague. @s1gr1d let me know if you want to chat about it more and we can set up a call :)

lizokm · 2024-10-07T22:09:56Z

docs/platforms/javascript/common/deployment-provider-setup/index.mdx

@@ -0,0 +1,9 @@
+---
+title: Deployment Provider Setup


@s1gr1d @mydea could we just call this "Alternate Installation Methods"? or "Alternate Ways to Set Up"?

lizokm · 2024-10-07T22:12:47Z

docs/platforms/javascript/common/deployment-provider-setup/index.mdx

+---
+title: Deployment Provider Setup
+sidebar_order: 4
+description: "Review our alternate installation methods."


Suggested change

description: "Review our alternate installation methods."

description: "Here are a few other ways to set up Sentry in your application."

lizokm · 2024-10-07T22:13:27Z

docs/platforms/javascript/common/deployment-provider-setup/general.mdx

@@ -0,0 +1,97 @@
+---
+title: General


Suggested change

title: General

title: General Deployment Setup

lizokm · 2024-10-07T22:15:09Z

docs/platforms/javascript/common/deployment-provider-setup/general.mdx

+---
+title: General
+sidebar_order: 1
+description: "Learn about the general deployment setup when using Sentry."


Suggested change

description: "Learn about the general deployment setup when using Sentry."

description: "Learn how to use a general deployment setup when adding Sentry to a Nuxt project in ESM syntax."

lizokm · 2024-10-07T22:22:06Z

docs/platforms/javascript/common/deployment-provider-setup/general.mdx

+
+<PlatformSection supported={['javascript.nuxt']}>
+  Nuxt compiles all your code for the client and server side to ECMAScript modules (ESM) syntax ([learn more about ESM and Nuxt](https://nuxt.com/docs/guide/concepts/esm)).
+</PlatformSection>
+


Suggested change

<PlatformSection supported={['javascript.nuxt']}>

Nuxt compiles all your code for the client and server side to ECMAScript modules (ESM) syntax ([learn more about ESM and Nuxt](https://nuxt.com/docs/guide/concepts/esm)).

</PlatformSection>

<PlatformSection supported={['javascript.nuxt']}>

Nuxt compiles all your code for the client and server side to ECMAScript modules (ESM) syntax ([learn more about ESM and Nuxt](https://nuxt.com/docs/guide/concepts/esm)).

</PlatformSection>

It would be great if you could add a little more context here. Like a sentence or two explaining why a user would want to use this type of setup. Maybe something as simple as: Use this setup if you want to add Sentry to a Nuxt project in ESM syntax. (As the first line on the page.)

lizokm · 2024-10-07T23:31:11Z

docs/platforms/javascript/common/deployment-provider-setup/netlify.mdx

+
+<Alert level="info">
+  Before approaching the steps below, read the general documentation around <PlatformLink to="/deployment-provider-setup/general/">setting up Sentry on a deployment provider</PlatformLink> to get quick general overview of the process.
+  This page only shows Netlify-specific steps.
+</Alert>


Suggested change

<Alert level="info">

Before approaching the steps below, read the general documentation around <PlatformLink to="/deployment-provider-setup/general/">setting up Sentry on a deployment provider</PlatformLink> to get quick general overview of the process.

This page only shows Netlify-specific steps.

</Alert>

This page only shows Netlify-specific steps. We recommend that you read the general documentation for <PlatformLink to="/deployment-provider-setup/general/">setting up Sentry on a deployment provider</PlatformLink> to get quick general overview of the process before getting started with the steps below.

It's a bit jarring to have 2 different-colored alerts at the very beginning of the page. I think this sentence works better as a regular sentence rather than as an alert.

lizokm · 2024-10-07T23:31:28Z

docs/platforms/javascript/common/deployment-provider-setup/netlify.mdx

+  This page only shows Netlify-specific steps.
+</Alert>
+
+## Approach 1: Adding the `--import` flag


Suggested change

## Approach 1: Adding the `--import` flag

## Approach 1: Adding the `--import` Flag

lizokm · 2024-10-08T02:32:54Z

docs/platforms/javascript/common/deployment-provider-setup/netlify.mdx

+
+<PlatformSection supported={['javascript.nuxt']}>
+  The server-side of Nuxt is deployed as a Netlify Function. So make sure to scope the environment variable `NODE_OPTIONS` to "Functions".
+  The path to the function is depending on your setup. When building the preset locally, the file is available at: `.netlify/functions-internal/server/sentry.server.config.mjs`.
+


Suggested change

<PlatformSection supported={['javascript.nuxt']}>

The server-side of Nuxt is deployed as a Netlify Function. So make sure to scope the environment variable `NODE_OPTIONS` to "Functions".

The path to the function is depending on your setup. When building the preset locally, the file is available at: `.netlify/functions-internal/server/sentry.server.config.mjs`.

<PlatformSection supported={['javascript.nuxt']}>

The server-side of Nuxt is deployed as a Netlify Function, so make sure to scope the environment variable `NODE_OPTIONS` to "Functions".

The path to the function depends on your setup. If you're building the preset locally, you'll find the file at: `.netlify/functions-internal/server/sentry.server.config.mjs`.

lizokm · 2024-10-08T02:35:24Z

docs/platforms/javascript/common/deployment-provider-setup/netlify.mdx

+  The path to the function is depending on your setup. When building the preset locally, the file is available at: `.netlify/functions-internal/server/sentry.server.config.mjs`.
+
+  <Alert level="warning">
+    The docs for this are still vague and we will update them as soon as we know more about which exact path to use for the `--import` flag.


+1 to @mydea. I think it's best not to document it if we know it doesn't work.

lizokm · 2024-10-08T02:38:20Z

docs/platforms/javascript/common/deployment-provider-setup/netlify.mdx

+
+Enabling `experimental_basicServerTracing` can be used when adding the node option `--import` does not work. This however only comes with limited tracing functionality because Sentry server config is not **pre**loaded with `--import`.
+
+<PlatformSection supported={['javascript.nuxt']}>
+  Enabling this option will automatically import the Sentry server config at the top of the server entry file (server entry: `.netlify/functions-internal/server/server.mjs`).
+


Suggested change

Enabling `experimental_basicServerTracing` can be used when adding the node option `--import` does not work. This however only comes with limited tracing functionality because Sentry server config is not **pre**loaded with `--import`.

<PlatformSection supported={['javascript.nuxt']}>

Enabling this option will automatically import the Sentry server config at the top of the server entry file (server entry: `.netlify/functions-internal/server/server.mjs`).

If adding the node option `--import` doesn't work, you can enable `experimental_basicServerTracing` instead. Note, that `experimental_basicServerTracing` only comes with limited tracing functionality because Sentry server config is not **pre**loaded with `--import`.

<PlatformSection supported={['javascript.nuxt']}>

Enabling this option will automatically import the Sentry server config at the top of the server entry file (server entry: `.netlify/functions-internal/server/server.mjs`).

getsantry · 2024-11-13T08:00:14Z

This pull request has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you add the label WIP, I will leave it alone unless WIP is removed ... forever!

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

s1gr1d · 2024-11-18T17:45:41Z

I'll close this as users don't have to include the --import flag anymore and setting Sentry up in Nuxt is much easier now. But those docs could still be added in case a deployment provider setup gets too complicated.

feat(nuxt): Add "Deployment Provider Setup"

d92a13f

s1gr1d requested review from mydea, lforst, lizokm and smeubank October 4, 2024 11:48

s1gr1d self-assigned this Oct 4, 2024

vercel bot deployed to Preview – sentry-docs October 4, 2024 12:02 View deployment

smeubank requested changes Oct 4, 2024

View reviewed changes

change order

0504631

vercel bot deployed to Preview – changelog October 4, 2024 12:47 View deployment

s1gr1d mentioned this pull request Oct 4, 2024

feat(nuxt): Add warning when Netlify or Vercel build is discovered getsentry/sentry-javascript#13868

Merged

vercel bot deployed to Preview – sentry-docs October 4, 2024 13:01 View deployment

add information regarding nft resolution

39bf44b

s1gr1d requested a review from andreiborza October 7, 2024 11:18

vercel bot deployed to Preview – changelog October 7, 2024 11:20 View deployment

vercel bot deployed to Preview – sentry-docs October 7, 2024 11:34 View deployment

mydea reviewed Oct 7, 2024

View reviewed changes

docs/platforms/javascript/common/deployment-provider-setup/general.mdx

Comment on lines +80 to +81

Copy link

Member

mydea Oct 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

extra new lines here

mydea reviewed Oct 7, 2024

View reviewed changes

lizokm approved these changes Oct 8, 2024

View reviewed changes

lforst removed their request for review October 23, 2024 07:31

getsantry bot added Stale and removed Stale labels Nov 13, 2024

s1gr1d closed this Nov 18, 2024

github-actions bot locked and limited conversation to collaborators Dec 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(nuxt): Add "Deployment Provider Setup" #11486

feat(nuxt): Add "Deployment Provider Setup" #11486

s1gr1d commented Oct 4, 2024 •

edited

Loading

vercel bot commented Oct 4, 2024 •

edited

Loading

codecov bot commented Oct 4, 2024 •

edited

Loading

smeubank left a comment

smeubank Oct 4, 2024

smeubank Oct 4, 2024

s1gr1d Oct 4, 2024

mydea Oct 7, 2024

lizokm Oct 7, 2024

mydea Oct 7, 2024

mydea Oct 7, 2024

lizokm Oct 7, 2024

mydea Oct 7, 2024

mydea Oct 7, 2024

mydea Oct 7, 2024 •

edited by lizokm

Loading

mydea Oct 7, 2024

mydea Oct 7, 2024

mydea Oct 7, 2024

mydea Oct 7, 2024 •

edited by lizokm

Loading

mydea Oct 7, 2024

lizokm Oct 8, 2024

lizokm left a comment

lizokm Oct 7, 2024

lizokm Oct 7, 2024

lizokm Oct 7, 2024

lizokm Oct 7, 2024

lizokm Oct 7, 2024

lizokm Oct 7, 2024

lizokm Oct 7, 2024

lizokm Oct 8, 2024

lizokm Oct 8, 2024

lizokm Oct 8, 2024

getsantry bot commented Nov 13, 2024

s1gr1d commented Nov 18, 2024

		Internally, Sentry uses a specific ESM loader hook "[import-in-the-middle/hook.mjs](https://www.npmjs.com/package/import-in-the-middle)" which is
		automatically added when you add the Sentry server-side config file with `--import`. This will automatically instrument all modules in your application.

	2. Knowing the correct path to your Sentry server config file within your deployment environment (to add the path to the `--import` CLI flag).
	2. Knowing the correct path to your Sentry server config file within your deployment environment (as you need to pass it to the `--import` CLI flag).

	4. Running Node.js version 18.19.0 or higher (support for `--import`).
	4. Running Node.js version 18.19.0 or higher

	In case you get a runtime error along the lines `Cannot find module '/node_modules/import-in-the-middle/hook.mjs'`, make sure to add a resolution (yarn) or an override (npm/pnpm) for `@vercel/nft`:
	If you get a runtime error along the lines of `Cannot find module '/node_modules/import-in-the-middle/hook.mjs'`, be sure to add an override (npm/pnpm) or a resolution (yarn) for `@vercel/nft`:

	The docs for this are still vague and we will update them as soon as we know more about which exact path to use for the `--import` flag.
	The docs for this are still a work in progress. We'll update them as soon as we know more about which exact path to use for the `--import` flag.

	description: "Review our alternate installation methods."
	description: "Here are a few other ways to set up Sentry in your application."

	description: "Learn about the general deployment setup when using Sentry."
	description: "Learn how to use a general deployment setup when adding Sentry to a Nuxt project in ESM syntax."

	## Approach 1: Adding the `--import` flag
	## Approach 1: Adding the `--import` Flag

feat(nuxt): Add "Deployment Provider Setup" #11486

feat(nuxt): Add "Deployment Provider Setup" #11486

Conversation

s1gr1d commented Oct 4, 2024 • edited Loading

DESCRIBE YOUR PR

IS YOUR CHANGE URGENT?

SLA

PRE-MERGE CHECKLIST

vercel bot commented Oct 4, 2024 • edited Loading

codecov bot commented Oct 4, 2024 • edited Loading

Bundle Report

smeubank left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mydea Oct 7, 2024 • edited by lizokm Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mydea Oct 7, 2024 • edited by lizokm Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lizokm left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

getsantry bot commented Nov 13, 2024

s1gr1d commented Nov 18, 2024

s1gr1d commented Oct 4, 2024 •

edited

Loading

vercel bot commented Oct 4, 2024 •

edited

Loading

codecov bot commented Oct 4, 2024 •

edited

Loading

mydea Oct 7, 2024 •

edited by lizokm

Loading

mydea Oct 7, 2024 •

edited by lizokm

Loading