Uh oh!
There was an error while loading. Please reload this page.
feat(nuxt): Add "Deployment Provider Setup" - #11486
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
Bundle ReportChanges will increase total bundle size by 921 bytes (0.01%) ⬆️. This is within the configured threshold ✅ Detailed changes
|
smeubank
left a comment
There was a problem hiding this comment.
great work! we can add more from here in other PRs. Only wouldn't put it above source maps for now
| @@ -0,0 +1,9 @@ | |||
| --- | |||
| title: Deployment Provider Setup | |||
| sidebar_order: 2 | |||
There was a problem hiding this comment.
| sidebar_order: 2 | |
| sidebar_order: 4 |
There was a problem hiding this comment.
i'd suggest below source maps at least
| 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. |
There was a problem hiding this comment.
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 ?
There was a problem hiding this comment.
I tend to agree. I think wherever possible, we should only give the users the information they need most and avoid going too deep :)
| @@ -0,0 +1,9 @@ | |||
| --- | |||
| title: Deployment Provider Setup | |||
There was a problem hiding this comment.
L: This is very much bike shedding, but what about just calling this Deploying Nuxt with Sentry or something like this?
There was a problem hiding this comment.
Or, if we want to keep it generic, e.g. "Deploying your application" or something like this?
| 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). |
There was a problem hiding this comment.
| 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). |
| 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`). |
There was a problem hiding this comment.
| 4. Running Node.js version 18.19.0 or higher (support for `--import`). | |
| 4. Running Node.js version 18.19.0 or higher |
| 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`: |
There was a problem hiding this comment.
| 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)
| 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} |
There was a problem hiding this comment.
should we flip these around, npm first, then yarn?
There was a problem hiding this comment.
extra new lines here
| --- | ||
| title: Deployment Provider Setup | ||
| sidebar_order: 4 | ||
| description: "Review our alternate installation methods." |
There was a problem hiding this comment.
this is probably left over from copying this file ;)
| 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. |
There was a problem hiding this comment.
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:
| 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. |
There was a problem hiding this comment.
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!
There was a problem hiding this comment.
+1 to @mydea. I think it's best not to document it if we know it doesn't work.
| @@ -0,0 +1,9 @@ | |||
| --- | |||
| title: Deployment Provider Setup | |||
| --- | ||
| title: Deployment Provider Setup | ||
| sidebar_order: 4 | ||
| description: "Review our alternate installation methods." |
There was a problem hiding this comment.
| description: "Review our alternate installation methods." | |
| description: "Here are a few other ways to set up Sentry in your application." |
| @@ -0,0 +1,97 @@ | |||
| --- | |||
| title: General | |||
There was a problem hiding this comment.
| title: General | |
| title: General Deployment Setup |
| --- | ||
| title: General | ||
| sidebar_order: 1 | ||
| description: "Learn about the general deployment setup when using Sentry." |
There was a problem hiding this comment.
| 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." |
| <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> | ||
There was a problem hiding this comment.
| <PlatformSectionsupported={['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> | |
| <PlatformSectionsupported={['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.)
| <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> |
There was a problem hiding this comment.
| <Alertlevel="info"> | |
| Before approaching the steps below, read the general documentation around <PlatformLinkto="/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 <PlatformLinkto="/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.
| This page only shows Netlify-specific steps. | ||
| </Alert> | ||
| ## Approach 1: Adding the `--import` flag |
There was a problem hiding this comment.
| ## Approach 1: Adding the `--import`flag | |
| ## Approach 1: Adding the `--import`Flag |
| <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`. | ||
There was a problem hiding this comment.
| <PlatformSectionsupported={['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`. | |
| <PlatformSectionsupported={['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`. | |
| 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. |
There was a problem hiding this comment.
+1 to @mydea. I think it's best not to document it if we know it doesn't work.
| 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`). | ||
There was a problem hiding this comment.
| 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`. | |
| <PlatformSectionsupported={['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`. | |
| <PlatformSectionsupported={['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`). | |
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 "A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀 |
s1gr1d
commented
Nov 18, 2024
I'll close this as users don't have to include the |
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.
SLA
Thanks in advance for your help!
PRE-MERGE CHECKLIST
Make sure you've checked the following before merging your changes: