feat: Add Svelte SDK docs (#5413)

Add official documentation to the new @sentry/svelte JS SDK which is currently in aplha. It includes

- A disclaimer that this SDK is in alpha and subject to breaking changes
- Instructions for installing and using the SDK in Svelte projects
- Instruction for generating and uploading Sourcemaps in Svelte projects

Co-authored-by: Isabel <[email protected]>

Author: Lms24

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);
+}
+```

src/includes/getting-started-config/javascript.svelte.mdx

@@ -0,0 +1,53 @@
+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___",
+  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___",
+  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, 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).

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
+```

src/includes/getting-started-primer/javascript.svelte.mdx

@@ -0,0 +1,13 @@
+<Note>
+
+Sentry's Svelte SDK enables automatic reporting of errors and exceptions, as well as performance monitoring for your client-side Svelte apps.
+
+</Note>
+
+<Alert level="info" title="Important">
+
+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/).
+
+</Alert>
+
+Sentry's Svelte SDK was introduced with version `7.10.0`.

src/includes/getting-started-verify/javascript.svelte.mdx

@@ -0,0 +1,12 @@
+```jsx {tabTitle:Svelte} {filename:SomeCmponent.svelte}
+<button
+  type="button"
+  on:click={() => {
+    throw new Error("Sentry Frontend Error");
+  }}
+>
+  Throw error
+</button>
+```
+
+This snippet adds a button that throws an error in a Svelte component.

src/includes/sourcemaps/generate/javascript.svelte.mdx

@@ -0,0 +1,32 @@
+To generate source maps with your Svelte project, you need to set the source map [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 source map 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're using bundlers other than Vite, check out our general guide on how to [generate source maps](../../../../sourcemaps/generating) with them, or refer to their documentation.

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 bundler (for example, 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/).
+
+<Note>
+
+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.
+
+</Note>

src/includes/sourcemaps/upload/primer/javascript.svelte.mdx

@@ -0,0 +1,6 @@
+To upload your Svelte project's source maps to Sentry, you currently have two options:
+
+- Upload source maps 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 of how to configure the CLI for a typical Svelte project.
+- Use the [unofficial Sentry Vite plugin](https://github.com/ikenfin/vite-plugin-sentry) to set releases and upload source maps. **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:

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",
 ]}>

src/platforms/javascript/common/install/index.mdx

@@ -14,6 +14,7 @@ notSupported:
   - javascript.vue
   - javascript.wasm
   - javascript.remix
+  - javascript.svelte
 ---
 
 <PageGrid />