diff --git a/packages/browser/README.md b/packages/browser/README.md index 91f3cde774d9..3d4c16df67dc 100644 --- a/packages/browser/README.md +++ b/packages/browser/README.md @@ -11,48 +11,14 @@ [![npm dm](https://img.shields.io/npm/dm/@sentry/browser.svg)](https://www.npmjs.com/package/@sentry/browser) [![npm dt](https://img.shields.io/npm/dt/@sentry/browser.svg)](https://www.npmjs.com/package/@sentry/browser) -## Links +The official Sentry SDK for monitoring JavaScript applications in the browser. -- [Official SDK Docs](https://docs.sentry.io/quickstart/) +## Documentation -## Usage +- [Getting started](https://docs.sentry.io/platforms/javascript/) +- [Configuration](https://docs.sentry.io/platforms/javascript/configuration/) -To use this SDK, call `Sentry.init(options)` as early as possible after loading the page. This will initialize the SDK -and hook into the environment. Note that you can turn off almost all side effects using the respective options. +## Support -```javascript -import * as Sentry from '@sentry/browser'; - -Sentry.init({ - dsn: '__DSN__', - // ... -}); -``` - -To set context information or send manual events, use the exported functions of `@sentry/browser`. Note that these -functions will not perform any action before you have called `Sentry.init()`: - -```javascript -import * as Sentry from '@sentry/browser'; - -// Set user information, as well as tags and further extras -Sentry.setExtra('battery', 0.7); -Sentry.setTag('user_mode', 'admin'); -Sentry.setUser({ id: '4711' }); - -// Add a breadcrumb for future events -Sentry.addBreadcrumb({ - message: 'My Breadcrumb', - // ... -}); - -// Capture exceptions, messages or manual events -Sentry.captureMessage('Hello, world!'); -Sentry.captureException(new Error('Good bye')); -Sentry.captureEvent({ - message: 'Manual', - stacktrace: [ - // ... - ], -}); -``` +- [Report a bug](https://github.com/getsentry/sentry-javascript/issues/new/choose) +- [Contributing](https://github.com/getsentry/sentry-javascript/blob/develop/CONTRIBUTING.md) diff --git a/packages/gatsby/README.md b/packages/gatsby/README.md index 0473030865da..cd3c63584300 100644 --- a/packages/gatsby/README.md +++ b/packages/gatsby/README.md @@ -6,83 +6,14 @@ # Official Sentry SDK for GatsbyJS -First register the package as a plugin in `gatsby-config.js`: +The official Sentry SDK for monitoring Gatsby applications. -```javascript -module.exports = { - // ... - plugins: [ - { - resolve: '@sentry/gatsby', - options: { - dsn: process.env.SENTRY_DSN, // this is the default - }, - }, - // ... - ], -}; -``` +## Documentation -Then configure your `Sentry.init` call: +- [Getting started](https://docs.sentry.io/platforms/javascript/guides/gatsby/) +- [Configuration](https://docs.sentry.io/platforms/javascript/guides/gatsby/configuration/) -```javascript -import * as Sentry from '@sentry/gatsby'; +## Support -Sentry.init({ - dsn: '__PUBLIC_DSN__', - integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()], - - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for performance monitoring. - // We recommend adjusting this value in production - tracesSampleRate: 1.0, - - // Capture Replay for 10% of all sessions, - // plus for 100% of sessions with an error - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - - // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled - tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/], -}); -``` - -The Gatsby SDK also automatically sets up sourcemaps uploading for you. To disable this functionality, set the -`enableClientWebpackPlugin` option to be `false`. - -```javascript -module.exports = { - // ... - plugins: [ - { - resolve: '@sentry/gatsby', - options: { - enableClientWebpackPlugin: false, - }, - }, - // ... - ], -}; -``` - -Additionally, you can delete source map files after they have been uploaded by setting the `deleteSourcemapsAfterUpload` -option to be `true`. - -```javascript -module.exports = { - // ... - plugins: [ - { - resolve: '@sentry/gatsby', - options: { - deleteSourcemapsAfterUpload: true, - }, - }, - // ... - ], -}; -``` - -## Links - -- [Official SDK Docs](https://docs.sentry.io/quickstart/) +- [Report a bug](https://github.com/getsentry/sentry-javascript/issues/new/choose) +- [Contributing](https://github.com/getsentry/sentry-javascript/blob/develop/CONTRIBUTING.md) diff --git a/packages/react/README.md b/packages/react/README.md index b8d9879aa231..9321952b6708 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -6,112 +6,15 @@ # Official Sentry SDK for ReactJS -## Links +The official Sentry SDK for monitoring React applications. -- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/react/) +## Documentation -## General +- [Getting started](https://docs.sentry.io/platforms/javascript/guides/react/) +- [Configuration](https://docs.sentry.io/platforms/javascript/guides/react/configuration/) +- [React-specific features](https://docs.sentry.io/platforms/javascript/guides/react/features/) -This package is a wrapper around `@sentry/browser`, with added functionality related to React. All methods available in -`@sentry/browser` can be imported from `@sentry/react`. +## Support -To use this SDK, call `Sentry.init(options)` before you mount your React component. - -```javascript -import React from 'react'; -import { createRoot } from 'react-dom/client'; -import * as Sentry from '@sentry/react'; - -Sentry.init({ - dsn: '__DSN__', - // ... -}); - -// ... - -const container = document.getElementById(“app”); -const root = createRoot(container); -root.render(); - -// also works with hydrateRoot -// const domNode = document.getElementById('root'); -// const root = hydrateRoot(domNode, reactNode); -// root.render(); -``` - -### React 19 - -Starting with React 19, the `createRoot` and `hydrateRoot` methods expose error hooks that can be used to capture errors -automatically. Use the `Sentry.reactErrorHandler` function to capture errors in the error hooks you are interested in. - -```js -const container = document.getElementById(“app”); -const root = createRoot(container, { - // Callback called when an error is thrown and not caught by an Error Boundary. - onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => { - console.warn('Uncaught error', error, errorInfo.componentStack); - }), - // Callback called when React catches an error in an Error Boundary. - onCaughtError: Sentry.reactErrorHandler(), - // Callback called when React automatically recovers from errors. - onRecoverableError: Sentry.reactErrorHandler(), -}); -root.render(); -``` - -If you want more finely grained control over error handling, we recommend only adding the `onUncaughtError` and -`onRecoverableError` hooks and using an `ErrorBoundary` component instead of the `onCaughtError` hook. - -### ErrorBoundary - -`@sentry/react` exports an ErrorBoundary component that will automatically send Javascript errors from inside a -component tree to Sentry, and set a fallback UI. - -> app.js - -```javascript -import React from 'react'; -import * as Sentry from '@sentry/react'; - -function FallbackComponent() { - return
An error has occurred
; -} - -class App extends React.Component { - render() { - return ( - - - - ); - } -} - -export default App; -``` - -### Profiler - -`@sentry/react` exports a Profiler component that leverages the tracing features to add React-related spans to -transactions. If tracing is not enabled, the Profiler component will not work. The Profiler tracks component mount, -render duration and updates. - -> app.js - -```javascript -import React from 'react'; -import * as Sentry from '@sentry/react'; - -class App extends React.Component { - render() { - return ( - - - - - ); - } -} - -export default Sentry.withProfiler(App); -``` +- [Report a bug](https://github.com/getsentry/sentry-javascript/issues/new/choose) +- [Contributing](https://github.com/getsentry/sentry-javascript/blob/develop/CONTRIBUTING.md) diff --git a/packages/solid/README.md b/packages/solid/README.md index c1406cf495e8..384501e1887e 100644 --- a/packages/solid/README.md +++ b/packages/solid/README.md @@ -10,112 +10,20 @@ [![npm dm](https://img.shields.io/npm/dm/@sentry/solid.svg)](https://www.npmjs.com/package/@sentry/solid) [![npm dt](https://img.shields.io/npm/dt/@sentry/solid.svg)](https://www.npmjs.com/package/@sentry/solid) -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 [Solid](https://www.solidjs.com/). If you're using [SolidStart](https://start.solidjs.com/) see our -[SolidStart SDK here](https://github.com/getsentry/sentry-javascript/tree/develop/packages/solidstart). - -# Solid Router - -The Solid Router instrumentation uses the Solid Router library to create navigation spans to ensure you collect -meaningful performance data about the health of your page loads and associated requests. - -Add `solidRouterBrowserTracingIntegration` instead of the regular `Sentry.browserTracingIntegration`. - -Make sure `solidRouterBrowserTracingIntegration` is initialized by your `Sentry.init` call. Otherwise, the routing -instrumentation will not work properly. - -Wrap `Router`, `MemoryRouter` or `HashRouter` from `@solidjs/router` using `withSentryRouterRouting`. This creates a -higher order component, which will enable Sentry to reach your router context. - -```js -import * as Sentry from '@sentry/solid'; -import { solidRouterBrowserTracingIntegration, withSentryRouterRouting } from '@sentry/solid/solidrouter'; -import { Route, Router } from '@solidjs/router'; - -Sentry.init({ - dsn: '__PUBLIC_DSN__', - integrations: [solidRouterBrowserTracingIntegration()], - tracesSampleRate: 1.0, // Capture 100% of the transactions -}); - -const SentryRouter = withSentryRouterRouting(Router); - -render( - () => ( - - - ... - - ), - document.getElementById('root'), -); -``` - -### Tanstack Router - -The Tanstack Router instrumentation uses the Tanstack Router library to create navigation spans to ensure you collect -meaningful performance data about the health of your page loads and associated requests. +The official Sentry SDK for monitoring Solid applications. -Add `tanstackRouterBrowserTracingIntegration` instead of the regular `Sentry.browserTracingIntegration`. +For SolidStart applications, use the [SolidStart SDK](https://docs.sentry.io/platforms/javascript/guides/solidstart/). -Make sure `tanstackRouterBrowserTracingIntegration` is initialized by your `Sentry.init` call. Otherwise, the routing -instrumentation will not work properly. - -Pass your router instance from `createRouter` to the integration. - -```js -import * as Sentry from '@sentry/solid'; -import { tanstackRouterBrowserTracingIntegration } from '@sentry/solid/tanstackrouter'; - -const router = createRouter({ - // your router config - // ... -}); - -declare module '@tanstack/solid-router' { - interface Register { - router: typeof router; - } -} - -Sentry.init({ - dsn: '__PUBLIC_DSN__', - integrations: [tanstackRouterBrowserTracingIntegration(router)], - tracesSampleRate: 1.0, // Capture 100% of the transactions -}); - -render(() => , document.getElementById('root')); -``` - -# Solid ErrorBoundary - -To automatically capture exceptions from inside a component tree and render a fallback component, wrap the native Solid -JS `ErrorBoundary` component with `Sentry.withSentryErrorBoundary`. - -```js -import * as Sentry from '@sentry/solid'; -import { ErrorBoundary } from 'solid-js'; - -Sentry.init({ - dsn: '__PUBLIC_DSN__', - tracesSampleRate: 1.0, // Capture 100% of the transactions -}); +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. -const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary); +## Documentation -render( - () => ( -
Error: {err.message}
}> - - - ), - document.getElementById('root'), -); -``` +- [Getting started](https://docs.sentry.io/platforms/javascript/guides/solid/) +- [Configuration](https://docs.sentry.io/platforms/javascript/guides/solid/configuration/) +- [Solid-specific features](https://docs.sentry.io/platforms/javascript/guides/solid/features/) -# Sourcemaps and Releases +## Support -To generate and upload source maps of your Solid JS app bundle, check our guide -[how to configure your bundler](https://docs.sentry.io/platforms/javascript/guides/solid/sourcemaps/#uploading-source-maps) -to emit source maps. +- [Report a bug](https://github.com/getsentry/sentry-javascript/issues/new/choose) +- [Contributing](https://github.com/getsentry/sentry-javascript/blob/develop/CONTRIBUTING.md) diff --git a/packages/svelte/README.md b/packages/svelte/README.md index bccd18a3c744..f46a8f834f07 100644 --- a/packages/svelte/README.md +++ b/packages/svelte/README.md @@ -10,78 +10,17 @@ [![npm dm](https://img.shields.io/npm/dm/@sentry/svelte.svg)](https://www.npmjs.com/package/@sentry/svelte) [![npm dt](https://img.shields.io/npm/dt/@sentry/svelte.svg)](https://www.npmjs.com/package/@sentry/svelte) -This SDK currently only supports [Svelte](https://svelte.dev/) apps in the browser. If you're using SvelteKit, we -recommend using our dedicated -[Sentry SvelteKit SDK](https://github.com/getsentry/sentry-javascript/tree/develop/packages/sveltekit). +The official Sentry SDK for monitoring Svelte applications in the browser. -## General +For SvelteKit applications, use the [SvelteKit SDK](https://docs.sentry.io/platforms/javascript/guides/sveltekit/). -This package is a wrapper around `@sentry/browser`, providing error monitoring and basic performance monitoring features -for [Svelte](https://svelte.dev/). +## Documentation -To use the SDK, initialize Sentry in your Svelte entry point `main.js` before you bootstrap your Svelte app: +- [Getting started](https://docs.sentry.io/platforms/javascript/guides/svelte/) +- [Configuration](https://docs.sentry.io/platforms/javascript/guides/svelte/configuration/) +- [Svelte-specific features](https://docs.sentry.io/platforms/javascript/guides/svelte/features/) -```ts -// main.js / main.ts +## Support -import App from './App.svelte'; - -import * as Sentry from '@sentry/svelte'; - -// Initialize the Sentry SDK here -Sentry.init({ - dsn: '__DSN__', - release: 'my-project-name@2.3.12', - integrations: [Sentry.browserTracingIntegration()], - - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for performance monitoring. - // We recommend adjusting this value in production - tracesSampleRate: 1.0, -}); - -// Then bootstrap your Svelte app -const app = new App({ - target: document.getElementById('app'), -}); - -export default app; -``` - -The Sentry Svelte SDK supports all features from the `@sentry/browser` SDK. Until it becomes more stable, please refer -to the Sentry [Browser SDK documentation](https://docs.sentry.io/platforms/javascript/) for more information and usage -instructions. - -## Sourcemaps and Releases - -To generate source maps of your Svelte app bundle, check our guide -[how to configure your bundler](https://docs.sentry.io/platforms/javascript/guides/svelte/sourcemaps/generating/) to -emit source maps. - -To [create releases and upload source maps](https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/cli/) to -Sentry, we recommend using [`sentry-cli`](https://github.com/getsentry/sentry-cli). You can for instance create a bash -script to take care of creating a release, uploading source maps and finalizing the release: - -```bash -#!/bin/bash - -VERSION= -ORG= -PROJECT= - -SOURCEMAPS_PATH=./dist - -sentry-cli releases new $VERSION --org $ORG --project $PROJECT -sentry-cli releases files $VERSION upload-sourcemaps $SOURCEMAPS_PATH --org $ORG --project $PROJECT -sentry-cli releases finalize $VERSION --org $ORG --project $PROJECT -``` - -Please note that the paths provided in this example work for a typical Svelte project that adheres to the project -structure set by [create-vite](https://www.npmjs.com/package/create-vite) with the `svelte(-ts)` template. If your -project setup differs from this template, your configuration may need adjustments. Please refer to our documentation of -[Advanced `sentry-cli` Sourcemaps Options](https://docs.sentry.io/product/cli/releases/#sentry-cli-sourcemaps) and to -our [Sourcemaps Troubleshooting Guide](https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/). - -Check out our -[Svelte source maps uploading](https://docs.sentry.io/platforms/javascript/guides/svelte/sourcemaps/uploading/) guide -for more information. +- [Report a bug](https://github.com/getsentry/sentry-javascript/issues/new/choose) +- [Contributing](https://github.com/getsentry/sentry-javascript/blob/develop/CONTRIBUTING.md) diff --git a/packages/vue/README.md b/packages/vue/README.md index 7573e61e115c..12c89db9dbee 100644 --- a/packages/vue/README.md +++ b/packages/vue/README.md @@ -6,87 +6,15 @@ # Official Sentry SDK for Vue.js -## Links +The official Sentry SDK for monitoring Vue applications. -- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/vue/) +## Documentation -## General +- [Getting started](https://docs.sentry.io/platforms/javascript/guides/vue/) +- [Configuration](https://docs.sentry.io/platforms/javascript/guides/vue/configuration/) +- [Vue-specific features](https://docs.sentry.io/platforms/javascript/guides/vue/features/) -This package is a wrapper around `@sentry/browser`, with added functionality related to Vue.js. All methods available in -`@sentry/browser` can be imported from `@sentry/vue`. +## Support -To use this SDK, call `Sentry.init(options)` as early in your application as possible. - -### Vue 3 - -```javascript -const app = createApp({ - // ... -}); - -Sentry.init({ - app, - dsn: '__PUBLIC_DSN__', - integrations: [ - // Or omit `router` if you're not using vue-router - Sentry.browserTracingIntegration({ router }), - ], -}); -``` - -### Vue 2 - -```javascript -import Vue from 'vue'; -import App from './App'; -import router from './router'; -import * as Sentry from '@sentry/vue'; - -Sentry.init({ - Vue: Vue, - dsn: '__PUBLIC_DSN__', - integrations: [ - // Or omit `router` if you're not using vue-router - Sentry.browserTracingIntegration({ router }), - ], -}); - -new Vue({ - el: '#app', - router, - components: { App }, - template: '', -}); -``` - -### TanStack Router - -If you use TanStack Router for Vue instead of Vue Router, you can use the TanStack Router instrumentation to create -navigation spans and collect meaningful performance data about the health of your page loads and associated requests. - -Add `tanstackRouterBrowserTracingIntegration` from `@sentry/vue/tanstackrouter` instead of the regular -`Sentry.browserTracingIntegration`. - -Make sure `tanstackRouterBrowserTracingIntegration` is initialized by your `Sentry.init` call. Otherwise, the routing -instrumentation will not work properly. - -Pass your router instance from `createRouter` to the integration. - -```javascript -import { createApp } from 'vue'; -import { createRouter } from '@tanstack/vue-router'; -import * as Sentry from '@sentry/vue'; -import { tanstackRouterBrowserTracingIntegration } from '@sentry/vue/tanstackrouter'; - -const router = createRouter({ - // your router config - // ... -}); - -Sentry.init({ - app, - dsn: '__PUBLIC_DSN__', - integrations: [tanstackRouterBrowserTracingIntegration(router)], - tracesSampleRate: 1.0, // Capture 100% of the transactions -}); -``` +- [Report a bug](https://github.com/getsentry/sentry-javascript/issues/new/choose) +- [Contributing](https://github.com/getsentry/sentry-javascript/blob/develop/CONTRIBUTING.md)