From c2c4a0596f4011b25b26de8ebfedfc8ad3ed110f Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Tue, 28 Jun 2022 12:04:47 -0400 Subject: [PATCH 1/7] feat(remix): Enable Remix SDK --- .craft.yml | 2 -- packages/remix/package.json | 1 - 2 files changed, 3 deletions(-) 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/packages/remix/package.json b/packages/remix/package.json index 05b0854269a0..ae5400a39138 100644 --- a/packages/remix/package.json +++ b/packages/remix/package.json @@ -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", From 30ee9e18c33f577142e0ade8d0a48fb871e913ae Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Wed, 29 Jun 2022 12:20:53 -0400 Subject: [PATCH 2/7] feat(remix): Rename upload-sourcemaps -> sentry-upload-sourcemaps --- packages/remix/package.json | 2 +- .../{upload-sourcemaps.js => sentry-upload-sourcemaps.js} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/remix/scripts/{upload-sourcemaps.js => sentry-upload-sourcemaps.js} (100%) diff --git a/packages/remix/package.json b/packages/remix/package.json index ae5400a39138..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" 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 From bddcab0b11510e90ee8bc064594e2ee8b24ab19f Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Wed, 29 Jun 2022 12:22:39 -0400 Subject: [PATCH 3/7] docs(remix): Add README for remix --- packages/remix/README.md | 88 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 87 insertions(+), 1 deletion(-) diff --git a/packages/remix/README.md b/packages/remix/README.md index 68d663bc3906..e4c63508be19 100644 --- a/packages/remix/README.md +++ b/packages/remix/README.md @@ -6,4 +6,90 @@ # 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 Next.js. + +To use this SDK, init Sentry in your remix entry points for both the client and server. + +```javascript +// 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, + ), + }), + ], + // ... +}); +``` + +```javascript +// 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 })], + // ... +}); +``` + +To set context information or send manual events, use the exported functions of `@sentry/remix`. + +```javascript +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. + +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). From e476973e88a1a49df5f4eb128df48b1a5181d3b3 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Wed, 29 Jun 2022 15:05:36 -0400 Subject: [PATCH 4/7] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michaël De Boey Co-authored-by: Onur Temizkan --- packages/remix/README.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/remix/README.md b/packages/remix/README.md index e4c63508be19..328a904544bb 100644 --- a/packages/remix/README.md +++ b/packages/remix/README.md @@ -14,11 +14,11 @@ 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 Next.js. +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, init Sentry in your remix entry points for both the client and server. +To use this SDK, init Sentry in your Remix entry points for both the client and server. -```javascript +```typescript // entry.client.tsx import { useLocation, useMatches } from "@remix-run/react"; @@ -41,7 +41,7 @@ Sentry.init({ }); ``` -```javascript +```typescript // entry.server.tsx import { prisma } from "~/db.server"; @@ -89,6 +89,7 @@ Sentry.captureEvent({ ## 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`. From 8da97dba98771f8c67cb52a331f68f4a8b1ee8b6 Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Thu, 30 Jun 2022 13:46:23 -0400 Subject: [PATCH 5/7] Update packages/remix/README.md Co-authored-by: Onur Temizkan --- packages/remix/README.md | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/packages/remix/README.md b/packages/remix/README.md index 328a904544bb..607bbd74f3cb 100644 --- a/packages/remix/README.md +++ b/packages/remix/README.md @@ -41,6 +41,43 @@ Sentry.init({ }); ``` +Also, wrap your Remix root, with `ErrorBoundary` to catch React errors, and `withSentryRouteTracing` to get parameterized router transactions. + +```typescript +// 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); + ```typescript // entry.server.tsx From 0e027e8f01f05741af0cd932b84f2c9c04857d7b Mon Sep 17 00:00:00 2001 From: Abhijeet Prasad Date: Thu, 30 Jun 2022 13:48:34 -0400 Subject: [PATCH 6/7] readme fixes --- packages/remix/README.md | 42 ++++++++++++++++++++-------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/remix/README.md b/packages/remix/README.md index 607bbd74f3cb..bf858d5418b1 100644 --- a/packages/remix/README.md +++ b/packages/remix/README.md @@ -16,9 +16,9 @@ This SDK is considering experimental and in an alpha state. It may experience br 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, init Sentry in your Remix entry points for both the client and server. +To use this SDK, initialize Sentry in your Remix entry points for both the client and server. -```typescript +```ts // entry.client.tsx import { useLocation, useMatches } from "@remix-run/react"; @@ -41,9 +41,24 @@ Sentry.init({ }); ``` -Also, wrap your Remix root, with `ErrorBoundary` to catch React errors, and `withSentryRouteTracing` to get parameterized router transactions. +```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. -```typescript +```ts // root.tsx import { @@ -77,25 +92,11 @@ function App() { } export default withSentryRouteTracing(App); - -```typescript -// 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 })], - // ... -}); ``` To set context information or send manual events, use the exported functions of `@sentry/remix`. -```javascript +```ts import * as Sentry from '@sentry/remix'; // Set user information, as well as tags and further extras @@ -125,8 +126,7 @@ Sentry.captureEvent({ ## 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. +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`. From a06ae4c4f6e4c8fc30db6328e50464a429e46146 Mon Sep 17 00:00:00 2001 From: Vladan Paunovic Date: Thu, 30 Jun 2022 21:02:52 +0200 Subject: [PATCH 7/7] chore(issue template): add sentry/remix --- .github/ISSUE_TEMPLATE/bug.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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"