Skip to content

docs(nuxt): Remove beta, add dev mode command, add cloudflare link #14651

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 23 additions & 9 deletions docs/platforms/javascript/guides/nuxt/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,6 @@ categories:
- server
---

<Alert level="warning">
Copy link
Collaborator

Choose a reason for hiding this comment

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

This Alert box is also in the manual-setup file

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.
</Alert>

<PlatformContent includePath="getting-started-prerequisites" />

## Step 1: Install
Expand Down Expand Up @@ -58,14 +51,35 @@ To test the server side as well, refer to the "Verify" section in the [Manual se

</Expandable>

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.

<Alert>
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.
</Alert>

### 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.
Expand Down
6 changes: 5 additions & 1 deletion docs/platforms/javascript/guides/nuxt/install/cli-import.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ Check out the guide for using <PlatformLink to="/install/limited-server-tracing"

## Initializing Sentry with `--import`

By default, the SDK will add the Sentry server config to the build output (typically, `.output/server/sentry.server.config.mjs`).
By default, the SDK will add the Sentry server config to the build output (typically, `.output/server/sentry.server.config.mjs` or ` ./.nuxt/dev/sentry.server.config.mjs` during development).

<Alert>
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.
</Alert>
Comment on lines +27 to +29
Copy link
Member Author

Choose a reason for hiding this comment

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

Would it make sense to include this Alert in the "Verify your setup" section?

Copy link
Collaborator

Choose a reason for hiding this comment

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

If you think this is vital information for the quick start guide then go for it!

But I think we need more context, so maybe include parts of the previous sentence in the alert. Something like:

<Alert>
By default, the SDK will add the Sentry server config to the build output. 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.
</Alert>


### 1. Adding `--import` to `node` command

Expand Down
2 changes: 0 additions & 2 deletions docs/platforms/javascript/guides/nuxt/install/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
42 changes: 33 additions & 9 deletions docs/platforms/javascript/guides/nuxt/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,6 @@ description: "Learn how to manually set up Sentry in your Nuxt app and capture y
installer](/platforms/javascript/guides/nuxt).
</Alert>

<Alert level="warning">
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.
</Alert>

<PlatformContent includePath="getting-started-prerequisites" />

## Step 1: Install
Expand Down Expand Up @@ -136,6 +129,11 @@ This allows you to access the DSN using `useRuntimeConfig().public.sentry.dsn`.

### Configure Server-side Sentry

<Alert>
Are you deploying to Cloudflare? Continue with the [Cloudflare-specific
setup](/platforms/javascript/guides/cloudflare/frameworks/nuxt/#setup).
</Alert>

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}
Expand Down Expand Up @@ -303,8 +301,34 @@ Then update the test page by including a new button that executes a function to
</template>
```

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 <PlatformLink to="/install/cli-import">`--import`</PlatformLink>.
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.

<Alert>
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.
</Alert>

### 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:

Expand Down