Skip to content

Heroku integration content #109611

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

Draft
dcramer wants to merge 3 commits into
base: master
Choose a base branch
from
+34 −1
Draft

Heroku integration content #109611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cc33568
feat(traces): Add OpenTelemetry drains callout to traces empty state
cursoragent Feb 27, 2026
0e64e36
test(traces): Add test for OpenTelemetry drains callout
cursoragent Feb 27, 2026
f4ce73b
refactor(traces): Remove Heroku reference from OpenTelemetry drains c…
cursoragent Feb 27, 2026
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
3 changes: 3 additions & 0 deletions static/app/views/performance/onboarding.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@ describe('Testing new onboarding ui', () => {
render(<Onboarding organization={organization} project={projectMock} />);
expect(await screen.findByText('Query for Traces, Get Answers')).toBeInTheDocument();
expect(await screen.findByText('Preview a Sentry Trace')).toBeInTheDocument();
expect(
await screen.findByText('OpenTelemetry Drains and Forwarders')
).toBeInTheDocument();

expect(
await screen.findByText(
Expand Down
32 changes: 31 additions & 1 deletion static/app/views/performance/onboarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import tourTrace from 'sentry-images/spot/performance-tour-trace.svg';

import {Button, LinkButton} from '@sentry/scraps/button';
import {Grid, type GridProps} from '@sentry/scraps/layout';
import {ExternalLink} from '@sentry/scraps/link';

import {
addErrorMessage,
Expand Down Expand Up @@ -87,6 +88,28 @@ const docsLink = (
</LinkButton>
);

function TraceDrainsLink() {
return (
<TraceDrainsLinkWrapper>
<BodyTitle>{t('OpenTelemetry Drains and Forwarders')}</BodyTitle>
<SubTitle>
{tct(
'You can use [link:OpenTelemetry Drains] to send traces from platforms like [vercelLink:Vercel], or via the [otlpLink:OpenTelemetry Collector].',
{
link: <ExternalLink href="https://docs.sentry.io/product/drains/" />,
vercelLink: (
<ExternalLink href="https://docs.sentry.io/product/drains/integration/vercel/" />
),
otlpLink: (
<ExternalLink href="https://docs.sentry.io/product/drains/integration/opentelemetry-collector/" />
),
}
)}
</SubTitle>
</TraceDrainsLinkWrapper>
);
}

export const PERFORMANCE_TOUR_STEPS: TourStep[] = [
{
title: t('Track Application Metrics'),
Expand Down Expand Up @@ -389,7 +412,10 @@ function OnboardingPanel({
</HeaderWrapper>
<Divider />
<Body>
<Setup>{children}</Setup>
<Setup>
{children}
<TraceDrainsLink />
</Setup>
<Preview>
<BodyTitle>{t('Preview a Sentry Trace')}</BodyTitle>
<Arcade
Expand Down Expand Up @@ -707,6 +733,10 @@ const SubTitle = styled('div')`
margin-bottom: ${space(1)};
`;

const TraceDrainsLinkWrapper = styled('div')`
padding-top: ${space(2)};
`;
Copy link
Contributor

@cursor cursor bot Feb 27, 2026

Choose a reason for hiding this comment

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

New styled component where Container core component suffices

Low Severity

TraceDrainsLinkWrapper is a newly added styled('div') call that only applies padding-top: ${space(2)}. The Container core component from @sentry/scraps/layout supports a paddingTop prop (confirmed by reading its implementation), and space(2) maps to "xl". This could be replaced with <Container paddingTop="xl">, following the project guideline to use core components over Emotion styled components.

Fix in Cursor Fix in Web

Triggered by project rule: Frontend guidelines


const Title = styled('div')`
font-size: 26px;
font-weight: ${p => p.theme.font.weight.sans.medium};
Expand Down
Loading