From 38891c8d4bfb68109e3153ba50d1cb987abee728 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Fri, 12 Aug 2022 12:29:42 +0200 Subject: [PATCH 1/7] feat: Add Svelte SDK docs --- .../capture-error/javascript.svelte.mdx | 11 ++++ .../javascript.svelte.mdx | 55 +++++++++++++++++++ .../javascript.svelte.mdx | 7 +++ .../javascript.svelte.mdx | 13 +++++ .../javascript.svelte.mdx | 12 ++++ .../sourcemaps/generate/javascript.svelte.mdx | 32 +++++++++++ .../sourcemaps/overview/javascript.svelte.mdx | 15 +++++ .../upload/primer/javascript.svelte.mdx | 6 ++ .../javascript/common/install/index.mdx | 1 + .../javascript/guides/svelte/config.yml | 7 +++ 10 files changed, 159 insertions(+) create mode 100644 src/includes/capture-error/javascript.svelte.mdx create mode 100644 src/includes/getting-started-config/javascript.svelte.mdx create mode 100644 src/includes/getting-started-install/javascript.svelte.mdx create mode 100644 src/includes/getting-started-primer/javascript.svelte.mdx create mode 100644 src/includes/getting-started-verify/javascript.svelte.mdx create mode 100644 src/includes/sourcemaps/generate/javascript.svelte.mdx create mode 100644 src/includes/sourcemaps/overview/javascript.svelte.mdx create mode 100644 src/includes/sourcemaps/upload/primer/javascript.svelte.mdx create mode 100644 src/platforms/javascript/guides/svelte/config.yml diff --git a/src/includes/capture-error/javascript.svelte.mdx b/src/includes/capture-error/javascript.svelte.mdx new file mode 100644 index 0000000000000..092188c9b0ec0 --- /dev/null +++ b/src/includes/capture-error/javascript.svelte.mdx @@ -0,0 +1,11 @@ +You can pass an `Error` object to `captureException()` to have it captured as an event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace. + +```typescript +import * as Sentry from "@sentry/svelte"; + +try { + aFunctionThatMightFail(); +} catch (err) { + Sentry.captureException(err); +} +``` diff --git a/src/includes/getting-started-config/javascript.svelte.mdx b/src/includes/getting-started-config/javascript.svelte.mdx new file mode 100644 index 0000000000000..7f48414033976 --- /dev/null +++ b/src/includes/getting-started-config/javascript.svelte.mdx @@ -0,0 +1,55 @@ +To use the SDK, initialize it in your Svelte entry point before bootstrapping your app. In a typical Svelte project, that is your `main.js` or `main.ts` file. + +```typescript {filename: main.ts} +import "./app.css"; +import App from "./App.svelte"; + +import * as Sentry from "@sentry/svelte"; +import { BrowserTracing } from "@sentry/tracing"; + +// Initialize the Sentry SDK here +Sentry.init({ + dsn: "___PUBLIC_DSN___", + release: "my-project-name@2.3.12", + integrations: [new BrowserTracing()], + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + // We recommend adjusting this value in production + tracesSampleRate: 1.0, +}); + +const app = new App({ + target: document.getElementById("app"), +}); + +export default app; +``` + +```javascript {filename: main.js} +import "./app.css"; +import App from "./App.svelte"; + +import * as Sentry from "@sentry/svelte"; +import { BrowserTracing } from "@sentry/tracing"; + +// Initialize the Sentry SDK here +Sentry.init({ + dsn: "___PUBLIC_DSN___", + release: "my-project-name@2.3.12", + integrations: [new BrowserTracing()], + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + // We recommend adjusting this value in production + tracesSampleRate: 1.0, +}); + +const app = new App({ + target: document.getElementById("app"), +}); + +export default app; +``` + +Once you've done this set up, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client. You can also [manually capture errors](/platforms/javascript/guides/svelte/usage). diff --git a/src/includes/getting-started-install/javascript.svelte.mdx b/src/includes/getting-started-install/javascript.svelte.mdx new file mode 100644 index 0000000000000..ebe41c67152b1 --- /dev/null +++ b/src/includes/getting-started-install/javascript.svelte.mdx @@ -0,0 +1,7 @@ +```bash {tabTitle:npm} +npm install --save @sentry/svelte @sentry/tracing +``` + +```bash {tabTitle:yarn} +yarn add @sentry/svelte @sentry/tracing +``` diff --git a/src/includes/getting-started-primer/javascript.svelte.mdx b/src/includes/getting-started-primer/javascript.svelte.mdx new file mode 100644 index 0000000000000..809492af347ed --- /dev/null +++ b/src/includes/getting-started-primer/javascript.svelte.mdx @@ -0,0 +1,13 @@ + + +Sentry's Svelte SDK enables automatic reporting of errors and exceptions, as well as the performance monitoring for your client-side Svelte apps. + + + + + +This SDK is considered **experimental and in alpha state**. It may experience breaking changes. Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback or concerns. The SDK currently only supports [Svelte](https://svelte.dev/) and is not yet compatible with with [SvelteKit](https://kit.svelte.dev/). + + + +Sentry's Svelte SDK was introduced with version `7.10.0`. diff --git a/src/includes/getting-started-verify/javascript.svelte.mdx b/src/includes/getting-started-verify/javascript.svelte.mdx new file mode 100644 index 0000000000000..78a011eed9359 --- /dev/null +++ b/src/includes/getting-started-verify/javascript.svelte.mdx @@ -0,0 +1,12 @@ +Add a button to a Svelte component that throws an error. + +```jsx {tabTitle:Svelte} {filename:SomeCmponent.svelte} + +``` diff --git a/src/includes/sourcemaps/generate/javascript.svelte.mdx b/src/includes/sourcemaps/generate/javascript.svelte.mdx new file mode 100644 index 0000000000000..91c74c2f8ad42 --- /dev/null +++ b/src/includes/sourcemaps/generate/javascript.svelte.mdx @@ -0,0 +1,32 @@ +To generate source maps with your Svelte project, you need to set the sourcemap [compiler options](https://svelte.dev/docs#compile-time-svelte-compile) in your Svelte config: + +```JavaScript {filename:svelte.config.js} +import sveltePreprocess from "svelte-preprocess"; + +const config = { + compilerOptions: { + enableSourcemap: true, + }, + preprocess: sveltePreprocess({ + sourceMap: true, + }), +}; + +export default config; +``` + +Additionally, you need to enable sourcemap output in your bundler. The following example shows how to do this for Vite: + +```JavaScript {filename:vite.config.js} +import { defineConfig } from "vite"; +import { svelte } from "@sveltejs/vite-plugin-svelte"; + +export default defineConfig({ + plugins: [svelte()], + build: { + sourcemap: true, + }, +}); +``` + +If you are using other bundlers than Vite, please refer to our general guide how to [configure source maps generation](../../../../sourcemaps/generating) with them or to their documentation. diff --git a/src/includes/sourcemaps/overview/javascript.svelte.mdx b/src/includes/sourcemaps/overview/javascript.svelte.mdx new file mode 100644 index 0000000000000..596e82a8cfe4b --- /dev/null +++ b/src/includes/sourcemaps/overview/javascript.svelte.mdx @@ -0,0 +1,15 @@ +Integrate your Svelte project's source maps with Sentry using these steps: + +### 1: Generate Source Maps + +The Svelte compiler and your bunlder (e.g. Vite) need to be configured to output source maps. Learn more about [how to generate source maps with Svelte](./generating/). + +### 2: Provide Source Maps to Sentry + +Source maps can be uploaded to Sentry by creating a release. Learn more about [how to upload source maps](./uploading/). + + + +By default, if Sentry can't find the uploaded files it needs, it will attempt to download them from the URLs in the stack trace. To disable this, turn off "Enable JavaScript source fetching" in either your organization's "Security & Privacy" settings or your project's general settings. + + diff --git a/src/includes/sourcemaps/upload/primer/javascript.svelte.mdx b/src/includes/sourcemaps/upload/primer/javascript.svelte.mdx new file mode 100644 index 0000000000000..07a5ea578ad38 --- /dev/null +++ b/src/includes/sourcemaps/upload/primer/javascript.svelte.mdx @@ -0,0 +1,6 @@ +To upload your Svelte project's sourcemaps to Sentry, you currently have two options: + +- Upload sourcemaps manually using [Sentry-CLI](./cli/). Take a look at this [bash script](https://github.com/getsentry/sentry-javascript/tree/master/packages/svelte#sourcemaps-and-releases) as an example how to configure the CLI for a typical Svelte project. +- If you are using Vite, you can use the [unofficial Sentry Vite plugin](https://github.com/ikenfin/vite-plugin-sentry) to set releases and upload sourcemaps. **Please note that this plugin is not maintained by Sentry and we do not offer support for it.** + +For other bundlers or more advanced configurations, take a look at the following guides and options for uploading sourcemaps: diff --git a/src/platforms/javascript/common/install/index.mdx b/src/platforms/javascript/common/install/index.mdx index 3df2e07d6ac0c..6cd55d545d5a9 100644 --- a/src/platforms/javascript/common/install/index.mdx +++ b/src/platforms/javascript/common/install/index.mdx @@ -14,6 +14,7 @@ notSupported: - javascript.vue - javascript.wasm - javascript.remix + - javascript.svelte --- diff --git a/src/platforms/javascript/guides/svelte/config.yml b/src/platforms/javascript/guides/svelte/config.yml new file mode 100644 index 0000000000000..2367b84d5030f --- /dev/null +++ b/src/platforms/javascript/guides/svelte/config.yml @@ -0,0 +1,7 @@ +title: Svelte +sdk: sentry.javascript.svelte +fallbackPlatform: javascript +caseStyle: camelCase +supportLevel: production +categories: + - browser From 129bbdaea928606715ea06159e8577602c955315 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Fri, 12 Aug 2022 12:51:08 +0200 Subject: [PATCH 2/7] fix linter error --- .../troubleshooting/older-browser-support/javascript.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/includes/troubleshooting/older-browser-support/javascript.mdx b/src/includes/troubleshooting/older-browser-support/javascript.mdx index 066c6022f1df3..d0f6a05f263ba 100644 --- a/src/includes/troubleshooting/older-browser-support/javascript.mdx +++ b/src/includes/troubleshooting/older-browser-support/javascript.mdx @@ -41,6 +41,7 @@ Though the above example is Webpack-specific, similar changes can be made to con "javascript.nextjs", "javascript.react", "javascript.remix", +"javascript.svelte", "javascript.vue", "javascript.wasm", ]}> From 38c1dae4d833ef0e0dd750a59969b0a4c2310a92 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 16 Aug 2022 12:07:21 +0200 Subject: [PATCH 3/7] apply getting started suggestions --- src/includes/getting-started-config/javascript.svelte.mdx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/includes/getting-started-config/javascript.svelte.mdx b/src/includes/getting-started-config/javascript.svelte.mdx index 7f48414033976..db6e2aeb2e3f2 100644 --- a/src/includes/getting-started-config/javascript.svelte.mdx +++ b/src/includes/getting-started-config/javascript.svelte.mdx @@ -10,7 +10,6 @@ import { BrowserTracing } from "@sentry/tracing"; // Initialize the Sentry SDK here Sentry.init({ dsn: "___PUBLIC_DSN___", - release: "my-project-name@2.3.12", integrations: [new BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% @@ -36,7 +35,6 @@ import { BrowserTracing } from "@sentry/tracing"; // Initialize the Sentry SDK here Sentry.init({ dsn: "___PUBLIC_DSN___", - release: "my-project-name@2.3.12", integrations: [new BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% @@ -52,4 +50,4 @@ const app = new App({ export default app; ``` -Once you've done this set up, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client. You can also [manually capture errors](/platforms/javascript/guides/svelte/usage). +Once you've done this, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client. You can also [manually capture errors](/platforms/javascript/guides/svelte/usage). From 8adb57a2b95bfcd77b737ea312b7e96f00556b98 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Tue, 16 Aug 2022 12:14:05 +0200 Subject: [PATCH 4/7] apply verify section suggestions --- src/includes/getting-started-verify/javascript.svelte.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/includes/getting-started-verify/javascript.svelte.mdx b/src/includes/getting-started-verify/javascript.svelte.mdx index 78a011eed9359..31a75b078c0bc 100644 --- a/src/includes/getting-started-verify/javascript.svelte.mdx +++ b/src/includes/getting-started-verify/javascript.svelte.mdx @@ -1,5 +1,3 @@ -Add a button to a Svelte component that throws an error. - ```jsx {tabTitle:Svelte} {filename:SomeCmponent.svelte}