Skip to content

feat(remix): Enable Remix SDK #5327

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
merged 7 commits into from
Jul 1, 2022
Merged

feat(remix): Enable Remix SDK #5327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c2c4a05
feat(remix): Enable Remix SDK
AbhiPrasad Jun 28, 2022
30ee9e1
feat(remix): Rename upload-sourcemaps -> sentry-upload-sourcemaps
AbhiPrasad Jun 29, 2022
bddcab0
docs(remix): Add README for remix
AbhiPrasad Jun 29, 2022
e476973
Apply suggestions from code review
AbhiPrasad Jun 29, 2022
8da97db
Update packages/remix/README.md
AbhiPrasad Jun 30, 2022
0e027e8
readme fixes
AbhiPrasad Jun 30, 2022
a06ae4c
chore(issue template): add sentry/remix
vladanpaunovic Jun 30, 2022
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
2 changes: 0 additions & 2 deletions .craft.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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':
Expand Down
3 changes: 2 additions & 1 deletion .github/ISSUE_TEMPLATE/bug.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:
Expand Down Expand Up @@ -32,6 +32,7 @@ body:
- "@sentry/ember"
- "@sentry/gatsby"
- "@sentry/nextjs"
- "@sentry/remix"
- "@sentry/node"
- "@sentry/react"
- "@sentry/serverless"
Expand Down
126 changes: 125 additions & 1 deletion packages/remix/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Why don't we set these properties for the user inside of remixRouterInstrumentation instead of asking them to do this?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because dependency injection means that we don’t have to deal with importing the functions ourselves, which means we minimize versioning conflicts.

also init is usually only done once, so it’s not like folks have to come back and touch this code again, so just letting them pass in the imports is fine.

we’ve done this for the rest of our routing instrumentation and never gotten negative feedback.

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 (
<ErrorBoundary>
<html>
<head>
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
</ErrorBoundary>
);
}

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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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 the `--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).
3 changes: 1 addition & 2 deletions packages/remix/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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",
Expand Down
0 packages/remix/scripts/upload-sourcemaps.js → ...remix/scripts/sentry-upload-sourcemaps.js
View file
Open in desktop
File renamed without changes.