diff --git a/.craft.yml b/.craft.yml index a6444038bb8d..c28e4777a220 100644 --- a/.craft.yml +++ b/.craft.yml @@ -25,9 +25,7 @@ targets: cacheControl: 'public, max-age=31536000' - name: github includeNames: /^sentry-.*$/ - excludeNames: /^sentry-remix-.*$/ - name: npm - excludeNames: /^sentry-remix-.*.tgz$/ - name: registry sdks: 'npm:@sentry/browser': diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml index 6ae8a421ae6e..b8b4f9d92804 100644 --- a/.github/ISSUE_TEMPLATE/bug.yml +++ b/.github/ISSUE_TEMPLATE/bug.yml @@ -1,6 +1,6 @@ name: 🐞 Bug Report description: Tell us about something that's not working the way we (probably) intend. -labels: 'Type: Bug' +labels: "Type: Bug" body: - type: checkboxes attributes: @@ -32,6 +32,7 @@ body: - "@sentry/ember" - "@sentry/gatsby" - "@sentry/nextjs" + - "@sentry/remix" - "@sentry/node" - "@sentry/react" - "@sentry/serverless" diff --git a/packages/remix/README.md b/packages/remix/README.md index 68d663bc3906..bf858d5418b1 100644 --- a/packages/remix/README.md +++ b/packages/remix/README.md @@ -6,4 +6,128 @@ # Official Sentry SDK for Remix -This SDK is work in progress, and should not be used before officially released. +[![npm version](https://img.shields.io/npm/v/@sentry/nextjs.svg)](https://www.npmjs.com/package/@sentry/remix) +[![npm dm](https://img.shields.io/npm/dm/@sentry/nextjs.svg)](https://www.npmjs.com/package/@sentry/remix) +[![npm dt](https://img.shields.io/npm/dt/@sentry/nextjs.svg)](https://www.npmjs.com/package/@sentry/remix) +[![typedoc](https://img.shields.io/badge/docs-typedoc-blue.svg)](http://getsentry.github.io/sentry-javascript/) + +This SDK is considering experimental and in an 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/concerns. +## General + +This package is a wrapper around `@sentry/node` for the server and `@sentry/react` for the client, with added functionality related to Remix. + +To use this SDK, initialize Sentry in your Remix entry points for both the client and server. + +```ts +// entry.client.tsx + +import { useLocation, useMatches } from "@remix-run/react"; +import * as Sentry from "@sentry/remix"; +import { useEffect } from "react"; + +Sentry.init({ + dsn: "__DSN__", + tracesSampleRate: 1, + integrations: [ + new Sentry.BrowserTracing({ + routingInstrumentation: Sentry.remixRouterInstrumentation( + useEffect, + useLocation, + useMatches, + ), + }), + ], + // ... +}); +``` + +```ts +// entry.server.tsx + +import { prisma } from "~/db.server"; + +import * as Sentry from "@sentry/remix"; + +Sentry.init({ + dsn: "__DSN__", + tracesSampleRate: 1, + integrations: [new Sentry.Integrations.Prisma({ client: prisma })], + // ... +}); +``` + +Also, wrap your Remix root, with Sentry's `ErrorBoundary` component to catch React component errors, and `withSentryRouteTracing` to get parameterized router transactions. + +```ts +// root.tsx + +import { + Links, + LiveReload, + Meta, + Outlet, + Scripts + ScrollRestoration, +} from "@remix-run/react"; + +import { ErrorBoundary, withSentryRouteTracing } from "@sentry/remix"; + +function App() { + return ( + + + + + + + + + + + + + + + ); +} + +export default withSentryRouteTracing(App); +``` + +To set context information or send manual events, use the exported functions of `@sentry/remix`. + +```ts +import * as Sentry from '@sentry/remix'; + +// Set user information, as well as tags and further extras +Sentry.configureScope(scope => { + scope.setExtra('battery', 0.7); + scope.setTag('user_mode', 'admin'); + scope.setUser({ id: '4711' }); + // scope.clear(); +}); + +// 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: [ + // ... + ], +}); +``` + +## Sourcemaps and Releases + +The Remix SDK provides a script that automatically creates a release and uploads sourcemaps. To generate sourcemaps with Remix, you need to call `remix build` with `--sourcemap` option. + +On release, call `sentry-upload-sourcemaps` to upload source maps and create a release. To see more details on how to use the command, call `sentry-upload-sourcemaps --help`. + +For more advanced configuration, [directly use `sentry-cli` to upload source maps.](https://github.com/getsentry/sentry-cli). diff --git a/packages/remix/package.json b/packages/remix/package.json index 05b0854269a0..11039ddc763c 100644 --- a/packages/remix/package.json +++ b/packages/remix/package.json @@ -7,7 +7,7 @@ "author": "Sentry", "license": "MIT", "bin": { - "upload-sourcemaps": "scripts/upload-sourcemaps.js" + "sentry-upload-sourcemaps": "scripts/sentry-upload-sourcemaps.js" }, "engines": { "node": ">=14" @@ -16,7 +16,6 @@ "module": "build/esm/index.server.js", "browser": "build/esm/index.client.js", "types": "build/types/index.server.d.ts", - "private": true, "dependencies": { "@sentry/cli": "2.2.0", "@sentry/core": "7.3.1", diff --git a/packages/remix/scripts/upload-sourcemaps.js b/packages/remix/scripts/sentry-upload-sourcemaps.js similarity index 100% rename from packages/remix/scripts/upload-sourcemaps.js rename to packages/remix/scripts/sentry-upload-sourcemaps.js