Skip to content

docs: Point browser SDK READMEs to documentation #24634

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.

Sign up for GitHub

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
nicohrubec merged 2 commits into from
Sep 23, 2026
Merged

docs: Point browser SDK READMEs to documentation #24634

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
316d997
docs: Point browser SDK READMEs to documentation
nicohrubec Sep 23, 2026
6653c8b
docs: Preserve SDK alpha and beta notices
nicohrubec Sep 23, 2026
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
48 changes: 7 additions & 41 deletions packages/browser/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
83 changes: 7 additions & 76 deletions packages/gatsby/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
113 changes: 8 additions & 105 deletions packages/react/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(<App />);

// also works with hydrateRoot
// const domNode = document.getElementById('root');
// const root = hydrateRoot(domNode, reactNode);
// root.render(<App />);
```

### 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(<App />);
```

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 <div>An error has occurred</div>;
}

class App extends React.Component {
render() {
return (
<Sentry.ErrorBoundary fallback={FallbackComponent} showDialog>
<OtherComponents />
</Sentry.ErrorBoundary>
);
}
}

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 (
<FancyComponent>
<InsideComponent someProp={2} />
<AnotherComponent />
</FancyComponent>
);
}
}

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)
114 changes: 11 additions & 103 deletions packages/solid/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
() => (
<SentryRouter>
<Route path="/" component={App} />
...
</SentryRouter>
),
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(() => <App />, 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(
() => (
<SentryErrorBoundary fallback={err => <div>Error: {err.message}</div>}>
<ProblematicComponent />
</SentryErrorBoundary>
),
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)
Loading
Loading