-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
docs(nuxt): Add beta readme #13979
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
Merged
Merged
docs(nuxt): Add beta readme #13979
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,20 +4,20 @@ | |
</a> | ||
</p> | ||
|
||
# Official Sentry SDK for Nuxt (EXPERIMENTAL) | ||
# Official Sentry SDK for Nuxt (BETA) | ||
|
||
[](https://www.npmjs.com/package/@sentry/nuxt) | ||
[](https://www.npmjs.com/package/@sentry/nuxt) | ||
[](https://www.npmjs.com/package/@sentry/nuxt) | ||
|
||
**This SDK is under active development! Feel free to already try it but expect breaking changes** | ||
This SDK is in **Beta**. The API is stable but updates may include minor changes in behavior. Please reach out on | ||
[GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback or concerns. This | ||
SDK is for [Nuxt](https://nuxt.com/). If you're using [Vue](https://vuejs.org/) see our | ||
[Vue SDK here](https://github.com/getsentry/sentry-javascript/tree/develop/packages/vue). | ||
|
||
## Links | ||
|
||
todo: link official SDK docs | ||
|
||
- [Official Browser SDK Docs](https://docs.sentry.io/platforms/javascript/) | ||
- [Official Node SDK Docs](https://docs.sentry.io/platforms/node/) | ||
- [Official Nuxt SDK Docs](https://docs.sentry.io/platforms/javascript/guides/nuxt/) | ||
|
||
## Compatibility | ||
|
||
|
@@ -28,43 +28,12 @@ The minimum supported version of Nuxt is `3.0.0`. | |
This package is a wrapper around `@sentry/node` for the server and `@sentry/vue` for the client side, with added | ||
functionality related to Nuxt. | ||
|
||
**What is working:** | ||
|
||
- Error Reporting | ||
- Vue | ||
- Node | ||
- Nitro | ||
|
||
**What is partly working:** | ||
|
||
- Source Maps | ||
- Connected Tracing (Frontend & Backend) | ||
- Tracing by setting `tracesSampleRate` | ||
- UI (Vue) traces | ||
- HTTP (Node) traces | ||
|
||
**Known Issues:** | ||
|
||
- When adding `sentry.server.config.(ts/js)`, you get an error like this: | ||
"`Failed to register ESM hook (import-in-the-middle/hook.mjs)`". You can add a resolution for `@vercel/nft` to fix | ||
this. This will add the `hook.mjs` file to your build output | ||
([issue here](https://github.com/unjs/nitro/issues/2703)). | ||
```json | ||
"resolutions": { | ||
"@vercel/nft": "^0.27.4" | ||
} | ||
``` | ||
|
||
## Automatic Setup | ||
**Limitations:** | ||
|
||
todo: add wizard instructions | ||
|
||
Take a look at the sections below if you want to customize your SDK configuration. | ||
- Server monitoring is not available during development mode (`nuxt dev`) | ||
|
||
## Manual Setup | ||
|
||
If the setup through the wizard doesn't work for you, you can also set up the SDK manually. | ||
|
||
### 1. Prerequisites & Installation | ||
|
||
1. Install the Sentry Nuxt SDK: | ||
|
@@ -92,7 +61,7 @@ export default defineNuxtConfig({ | |
|
||
### 3. Client-side setup | ||
|
||
Add a `sentry.client.config.(js|ts)` file to the root of your project: | ||
Add a `sentry.client.config.ts` file to the root of your project: | ||
|
||
```javascript | ||
import { useRuntimeConfig } from '#imports'; | ||
|
@@ -106,7 +75,7 @@ Sentry.init({ | |
|
||
### 4. Server-side setup | ||
|
||
Add an `sentry.client.config.(js|ts)` file to the root of your project: | ||
Add an `sentry.client.config.ts` file to the root of your project: | ||
|
||
```javascript | ||
import * as Sentry from '@sentry/nuxt'; | ||
|
@@ -119,11 +88,12 @@ if (process.env.SENTRY_DSN) { | |
} | ||
``` | ||
|
||
The Nuxt runtime config does not work in the Sentry server to technical reasons (it has to be loaded before Nuxt is | ||
loaded). To be able to use `process.env` you either have to add `--env-file=.env` to your node command | ||
Using `useRuntimeConfig` does not work in the Sentry server config file due to technical reasons (the file has to be | ||
loaded before Nuxt is loaded). To be able to use `process.env` you either have to add `--env-file=.env` to your node | ||
command | ||
|
||
```bash | ||
node --env-file=.env --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs | ||
node --env-file=.env .output/server/index.mjs | ||
``` | ||
|
||
or use the `dotenv` package: | ||
|
@@ -139,17 +109,6 @@ Sentry.init({ | |
}); | ||
``` | ||
|
||
Add an import flag to the Node options of your `node` command (not `nuxt preview`), so the file loads before any other | ||
imports (keep in mind the `.mjs` file ending): | ||
|
||
```json | ||
{ | ||
"scripts": { | ||
"start": "node --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs" | ||
} | ||
} | ||
``` | ||
|
||
## Uploading Source Maps | ||
|
||
To upload source maps, you can use the `sourceMapsUploadOptions` option inside the `sentry` options of your | ||
|
@@ -169,3 +128,24 @@ export default defineNuxtConfig({ | |
}, | ||
}); | ||
``` | ||
|
||
## Troubleshooting | ||
|
||
When adding `sentry.server.config.ts`, you might get an error like this: | ||
"`Failed to register ESM hook (import-in-the-middle/hook.mjs)`". You can add an override (npm/pnpm) or a resolution | ||
(yarn) for `@vercel/nft` to fix this. This will add the `hook.mjs` file to your build output | ||
([Nitro issue here](https://github.com/unjs/nitro/issues/2703)). | ||
|
||
```json | ||
"overrides": { | ||
"@vercel/nft": "^0.27.4" | ||
} | ||
``` | ||
|
||
or | ||
|
||
```json | ||
"resolutions": { | ||
"@vercel/nft": "^0.27.4" | ||
} | ||
``` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The indentations for these blocks is different. |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The sentence continues after the code snippet with an "or", that's why there is an either :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah my bad, again