Skip to content
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

add guide to use Sentry with SolidJS #8635

Merged
merged 3 commits into from
Dec 13, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
43 changes: 43 additions & 0 deletions src/platform-includes/getting-started-config/javascript.solid.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
To use the SDK, initialize it in your Solid entry point before bootstrapping your app. (In a typical Solid project that's the render-client.js, or render-client.tsx.)

<SignInNote />

```javascript {filename: render-client.jsx}
import { render } from "solid-js/web";
import App from "./app";
import * as Sentry from "@sentry/browser";
import { DEV } from "solid-js";

// this will only initialize your Sentry client in production builds.
if (!DEV) {
Sentry.init({
dsn: "<Sentry DSN>",
integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],

// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,

// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],

// Capture Replay for 10% of all sessions,
// plus 100% of sessions with an error
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
});
}

const app = document.getElementById("app");

if (!app) throw new Error("No #app element found in the DOM.");

render(() => <App />, app);
```

Once you've done this, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client.

It's also possible to add Client-Side routing to your app with [Solid-Router](https://docs.solidjs.com/guides/how-to-guides/routing-in-solid/solid-router) without changing any additional settings. As long as you use the default HTML History API to handle routing.

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/solid/usage).
34 changes: 34 additions & 0 deletions src/platform-includes/getting-started-verify/javascript.solid.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
```javascript
<button
type="button"
onClick={() => {
throw new Error("Sentry Frontend Error");
}}
>
Throw error
</button>
```

This snippet adds a button that throws an error in any Solid component you choose. It's useful for testing. It's recommended to base wrap your app within an Error Boundary:

```javascript {filename: app.jsx}
import { ErrorBoundary } from "solid-js";
import Routes from "./routes.tsx";
import ErrorFallbackComponent from "./components/error-fallback";
import * as Sentry from "@sentry/browser";

export default function App() {
const Routes = useRoutes(ROUTES);

return (
<ErrorBoundary
fallback={(error) => {
Sentry.captureException(error);
return <ErrorFallbackComponent />;
}}
>
<Routes />
</ErrorBoundary>
);
}
```
7 changes: 7 additions & 0 deletions src/platforms/javascript/guides/solid/config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
title: Solid
sdk: sentry.javascript.browser
fallbackPlatform: javascript
caseStyle: camelCase
supportLevel: production
categories:
- browser
Loading