feat(remix): Add parameterized transaction naming for routes #17951
+3,421
−155
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| /** @type {import('eslint').Linter.Config} */ | ||
| module.exports = { | ||
| extends: ['@remix-run/eslint-config', '@remix-run/eslint-config/node'], | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| node_modules | ||
|
|
||
| /.cache | ||
| /build | ||
| /public/build | ||
| .env |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| @sentry:registry=http://127.0.0.1:4873 | ||
| @sentry-internal:registry=http://127.0.0.1:4873 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /** | ||
| * By default, Remix will handle hydrating your app on the client for you. | ||
| * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨ | ||
| * For more information, see https://remix.run/file-conventions/entry.client | ||
| */ | ||
|
|
||
| // Extend the Window interface to include ENV | ||
| declare global { | ||
| interface Window { | ||
| ENV: { | ||
| SENTRY_DSN: string; | ||
| [key: string]: unknown; | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| import { RemixBrowser, useLocation, useMatches } from '@remix-run/react'; | ||
| import * as Sentry from '@sentry/remix'; | ||
| import { StrictMode, startTransition, useEffect } from 'react'; | ||
| import { hydrateRoot } from 'react-dom/client'; | ||
|
|
||
| Sentry.init({ | ||
| environment: 'qa', // dynamic sampling bias to keep transactions | ||
| dsn: window.ENV.SENTRY_DSN, | ||
| integrations: [ | ||
| Sentry.browserTracingIntegration({ | ||
| useEffect, | ||
| useLocation, | ||
| useMatches, | ||
| }), | ||
| Sentry.replayIntegration(), | ||
| ], | ||
| // Performance Monitoring | ||
| tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! | ||
| // Session Replay | ||
| replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. | ||
| replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur. | ||
| tunnel: 'http://localhost:3032/', // proxy server | ||
| }); | ||
|
|
||
| startTransition(() => { | ||
| hydrateRoot( | ||
| document, | ||
| <StrictMode> | ||
| <RemixBrowser /> | ||
| </StrictMode>, | ||
| ); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| /** | ||
| * By default, Remix will handle generating the HTTP Response for you. | ||
| * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨ | ||
| * For more information, see https://remix.run/file-conventions/entry.server | ||
| */ | ||
|
|
||
| import { PassThrough } from 'node:stream'; | ||
|
|
||
| import type { AppLoadContext, EntryContext } from '@remix-run/node'; | ||
| import { createReadableStreamFromReadable } from '@remix-run/node'; | ||
| import { installGlobals } from '@remix-run/node'; | ||
| import { RemixServer } from '@remix-run/react'; | ||
| import isbot from 'isbot'; | ||
| import { renderToPipeableStream } from 'react-dom/server'; | ||
| import * as Sentry from '@sentry/remix'; | ||
|
|
||
| installGlobals(); | ||
|
|
||
| const ABORT_DELAY = 5_000; | ||
|
|
||
| Sentry.init({ | ||
| environment: 'qa', // dynamic sampling bias to keep transactions | ||
| dsn: process.env.E2E_TEST_DSN, | ||
| tunnel: 'http://localhost:3031/', // proxy server | ||
| tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production! | ||
| }); | ||
|
There was a problem hiding this comment. Bug: Duplicate Sentry Initialization Causes Configuration ConflictsThere are two |
||
|
|
||
| const handleErrorImpl = () => { | ||
| Sentry.setTag('remix-test-tag', 'remix-test-value'); | ||
| }; | ||
|
|
||
| export const handleError = Sentry.wrapHandleErrorWithSentry(handleErrorImpl); | ||
|
|
||
| export default function handleRequest( | ||
| request: Request, | ||
| responseStatusCode: number, | ||
| responseHeaders: Headers, | ||
| remixContext: EntryContext, | ||
| loadContext: AppLoadContext, | ||
| ) { | ||
| return isbot(request.headers.get('user-agent')) | ||
| ? handleBotRequest(request, responseStatusCode, responseHeaders, remixContext) | ||
| : handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext); | ||
| } | ||
|
|
||
| function handleBotRequest( | ||
| request: Request, | ||
| responseStatusCode: number, | ||
| responseHeaders: Headers, | ||
| remixContext: EntryContext, | ||
| ) { | ||
| return new Promise((resolve, reject) => { | ||
| let shellRendered = false; | ||
| const { pipe, abort } = renderToPipeableStream( | ||
| <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />, | ||
| { | ||
| onAllReady() { | ||
| shellRendered = true; | ||
| const body = new PassThrough(); | ||
| const stream = createReadableStreamFromReadable(body); | ||
|
|
||
| responseHeaders.set('Content-Type', 'text/html'); | ||
|
|
||
| resolve( | ||
| new Response(stream, { | ||
| headers: responseHeaders, | ||
| status: responseStatusCode, | ||
| }), | ||
| ); | ||
|
|
||
| pipe(body); | ||
| }, | ||
| onShellError(error: unknown) { | ||
| reject(error); | ||
| }, | ||
| onError(error: unknown) { | ||
| responseStatusCode = 500; | ||
| // Log streaming rendering errors from inside the shell. Don't log | ||
| // errors encountered during initial shell rendering since they'll | ||
| // reject and get logged in handleDocumentRequest. | ||
| if (shellRendered) { | ||
| console.error(error); | ||
| } | ||
| }, | ||
| }, | ||
| ); | ||
|
|
||
| setTimeout(abort, ABORT_DELAY); | ||
| }); | ||
| } | ||
|
|
||
| function handleBrowserRequest( | ||
| request: Request, | ||
| responseStatusCode: number, | ||
| responseHeaders: Headers, | ||
| remixContext: EntryContext, | ||
| ) { | ||
| return new Promise((resolve, reject) => { | ||
| let shellRendered = false; | ||
| const { pipe, abort } = renderToPipeableStream( | ||
| <RemixServer context={remixContext} url={request.url} abortDelay={ABORT_DELAY} />, | ||
| { | ||
| onShellReady() { | ||
| shellRendered = true; | ||
| const body = new PassThrough(); | ||
| const stream = createReadableStreamFromReadable(body); | ||
|
|
||
| responseHeaders.set('Content-Type', 'text/html'); | ||
|
|
||
| resolve( | ||
| new Response(stream, { | ||
| headers: responseHeaders, | ||
| status: responseStatusCode, | ||
| }), | ||
| ); | ||
|
|
||
| pipe(body); | ||
| }, | ||
| onShellError(error: unknown) { | ||
| reject(error); | ||
| }, | ||
| onError(error: unknown) { | ||
| responseStatusCode = 500; | ||
| // Log streaming rendering errors from inside the shell. Don't log | ||
| // errors encountered during initial shell rendering since they'll | ||
| // reject and get logged in handleDocumentRequest. | ||
| if (shellRendered) { | ||
| console.error(error); | ||
| } | ||
| }, | ||
| }, | ||
| ); | ||
|
|
||
| setTimeout(abort, ABORT_DELAY); | ||
| }); | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why did this increase so much?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After adding the new tests, some of them started randomly timing out slightly above the 10-minute threshold on CI. It can be 11-12. I just increased this much to be ready for when we add more tests.