diff --git a/docs/platforms/javascript/guides/nuxt/index.mdx b/docs/platforms/javascript/guides/nuxt/index.mdx index 00839f64cad958..a950a2c6df1abe 100644 --- a/docs/platforms/javascript/guides/nuxt/index.mdx +++ b/docs/platforms/javascript/guides/nuxt/index.mdx @@ -8,13 +8,6 @@ categories: - server --- - - This SDK is currently in **beta**. Beta features are still in progress and may - have bugs. Please reach out on - [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if - you have any feedback or concerns. - - ## Step 1: Install @@ -58,14 +51,35 @@ To test the server side as well, refer to the "Verify" section in the [Manual se -To test Sentry on the server side, you first need to build your project since Sentry's server-side monitoring **doesn't work in development mode**.\ -Then run your project and make sure to load Sentry on the server side by explicitly adding it via [`--import`](/platforms/javascript/guides/nuxt/install/cli-import/): +To test Sentry, you can run your Nuxt application in either production or development mode. +We **recommend testing in production mode** as it most closely resembles your deployed application's environment. + + + By default, the SDK will add the server config as `sentry.server.config.mjs` to the build. + To find the exact path to this file, enable `debug` mode in your Sentry configuration within `nuxt.config.ts`. + Sentry will then print the exact path during the build process. + + +### Run in Production Mode (Recommended) + +After building with `nuxi build`, run your project and make sure to load Sentry on the server side by explicitly adding it via `--import` (read more about this flag in [Installation Methods](/platforms/javascript/guides/nuxt/install)). ``` # Start your app after building your project with `nuxi build` node --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs ``` +### Run in Development Mode + +The server config file is generated in the `.nuxt` directory the first time you run `nuxt dev`. If you delete your `.nuxt` directory, you'll need to run `nuxt dev` once without the `NODE_OPTIONS` variable to regenerate it. + +If you only want to use Sentry on the client-side or only need basic error monitoring on the server side, you can omit the `--import` flag when running your application. + +``` +# Run the dev server with the --import flag after running `nuxt dev` once (without the flag) +NODE_OPTIONS='--import ./.nuxt/dev/sentry.server.config.mjs' nuxt dev +``` + After building and running your project: 1. Open the example page `/sentry-example-page` in your browser. For most Nuxt applications, this will be at localhost. diff --git a/docs/platforms/javascript/guides/nuxt/install/cli-import.mdx b/docs/platforms/javascript/guides/nuxt/install/cli-import.mdx index b5992a562823d1..c36bd401a2362c 100644 --- a/docs/platforms/javascript/guides/nuxt/install/cli-import.mdx +++ b/docs/platforms/javascript/guides/nuxt/install/cli-import.mdx @@ -22,7 +22,11 @@ Check out the guide for using + To find the exact path to the built Sentry server config file, enable `debug` mode in your Sentry configuration within `nuxt.config.ts`. Sentry will then print the exact path during the build process. + ### 1. Adding `--import` to `node` command diff --git a/docs/platforms/javascript/guides/nuxt/install/index.mdx b/docs/platforms/javascript/guides/nuxt/install/index.mdx index 547a8bda34c89f..b9e212e5ae87df 100644 --- a/docs/platforms/javascript/guides/nuxt/install/index.mdx +++ b/docs/platforms/javascript/guides/nuxt/install/index.mdx @@ -4,8 +4,6 @@ sidebar_order: 1.5 description: "Review our alternate installation methods." --- - - Nuxt uses ES Modules for server-side builds, which requires Sentry to register Node [customization hooks](https://nodejs.org/api/module.html#customization-hooks). Those customization hooks need to be registered before the rest of the application. diff --git a/docs/platforms/javascript/guides/nuxt/manual-setup.mdx b/docs/platforms/javascript/guides/nuxt/manual-setup.mdx index 22d0d0ebfd88be..be7f1ede11d2b7 100644 --- a/docs/platforms/javascript/guides/nuxt/manual-setup.mdx +++ b/docs/platforms/javascript/guides/nuxt/manual-setup.mdx @@ -9,13 +9,6 @@ description: "Learn how to manually set up Sentry in your Nuxt app and capture y installer](/platforms/javascript/guides/nuxt). - - This SDK is currently in **beta**. Beta features are still in progress and may - have bugs. Please reach out on - [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if - you have any feedback or concerns. - - ## Step 1: Install @@ -136,6 +129,11 @@ This allows you to access the DSN using `useRuntimeConfig().public.sentry.dsn`. ### Configure Server-side Sentry + + Are you deploying to Cloudflare? Continue with the [Cloudflare-specific + setup](/platforms/javascript/guides/cloudflare/frameworks/nuxt/#setup). + + Add a `sentry.server.config.ts` file to the root of your project and add the following initialization code to it: ```javascript {filename:sentry.server.config.ts} @@ -303,8 +301,34 @@ Then update the test page by including a new button that executes a function to ``` -Once you have your test code in place, you need to build your project since Sentry's server-side monitoring doesn't work in development mode. -Then start your app and make sure to load Sentry on the server side by explicitly adding the Sentry server config in the build output via `--import`. +Once you have your test code in place, you can run your Nuxt application in either production or development mode. +We **recommend testing in production mode** as it most closely resembles your deployed application's environment. + + + By default, the SDK will add the server config as `sentry.server.config.mjs` to the build. + To find the exact path to this file, enable `debug` mode in your Sentry configuration within `nuxt.config.ts`. + Sentry will then print the exact path during the build process. + + +### Run in Production Mode (Recommended) + +After building with `nuxi build`, run your project and make sure to load Sentry on the server side by explicitly adding it via `--import` (read more about this flag in [Installation Methods](/platforms/javascript/guides/nuxt/install)). + +``` +# Start your app after building your project with `nuxi build` +node --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs +``` + +### Run in Development Mode + +The server config file is generated in the `.nuxt` directory the first time you run `nuxt dev`. If you delete your `.nuxt` directory, you'll need to run `nuxt dev` once without the `NODE_OPTIONS` variable to regenerate it. + +If you only want to use Sentry on the client-side or only need basic error monitoring on the server side, you can omit the `--import` flag when running your application. + +``` +# Run the dev server with the --import flag after running `nuxt dev` once (without the flag) +NODE_OPTIONS='--import ./.nuxt/dev/sentry.server.config.mjs' nuxt dev +``` After running your project: