Skip to content
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

feat(onboarding): Generic copy DSN #83088

Merged
merged 3 commits into from
Jan 8, 2025
Merged

feat(onboarding): Generic copy DSN #83088

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1c55365
feat(onboarding): Generic copy DNS
ArthurKnaus Jan 8, 2025
3836094
fix typo
ArthurKnaus Jan 8, 2025
3fb3c85
fix analytics event
ArthurKnaus Jan 8, 2025
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
39 changes: 39 additions & 0 deletions static/app/components/onboarding/gettingStartedDoc/copyDsnField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import styled from '@emotion/styled';

import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/types';
import TextCopyInput from 'sentry/components/textCopyInput';
import {tct} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import {trackAnalytics} from 'sentry/utils/analytics';

export function CopyDsnField({params}: {params: DocsParams<any>}) {
return (
<Wrapper>
<p>
{tct(
"If you already have the configuration for Sentry in your application, and just need this project's ([projectSlug]) DSN, you can find it below:",
{
projectSlug: <code>{params.projectSlug}</code>,
}
)}
</p>
<TextCopyInput
onCopy={() =>
trackAnalytics('onboarding.nextjs-dsn-copied', {
Copy link
Member

Choose a reason for hiding this comment

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

Is this always supposed to be this analytics string - I suppose when used in e.g. SvelteKit, we don't want to track this as nextjs-dsn-copied, right?

organization: params.organization,
})
}
>
{params.dsn.public}
</TextCopyInput>
</Wrapper>
);
}

const Wrapper = styled('div')`
padding-top: ${space(2)};
border-top: 1px solid ${p => p.theme.border};
display: flex;
flex-direction: column;
gap: ${space(1)};
`;
131 changes: 47 additions & 84 deletions static/app/gettingStartedDocs/javascript/nextjs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import styled from '@emotion/styled';
import ExternalLink from 'sentry/components/links/externalLink';
import List from 'sentry/components/list/';
import ListItem from 'sentry/components/list/listItem';
import {CopyDsnField} from 'sentry/components/onboarding/gettingStartedDoc/copyDsnField';
import crashReportCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/crashReportCallout';
import widgetCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/widgetCallout';
import TracePropagationMessage from 'sentry/components/onboarding/gettingStartedDoc/replay/tracePropagationMessage';
Expand All @@ -26,11 +27,9 @@ import {
getReplaySDKSetupSnippet,
getReplayVerifyStep,
} from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
import TextCopyInput from 'sentry/components/textCopyInput';
import {featureFlagOnboarding} from 'sentry/gettingStartedDocs/javascript/javascript';
import {t, tct} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import {trackAnalytics} from 'sentry/utils/analytics';

type Params = DocsParams;

Expand Down Expand Up @@ -83,68 +82,67 @@ const onboarding: OnboardingConfig = {
configurations: getInstallConfig(params),
},
],
configure: () => [
configure: params => [
{
title: t('Manual Configuration'),
collapsible: true,
description: tct(
'Alternatively, you can also [manualSetupLink:set up the SDK manually], by following these steps:',
{
manualSetupLink: (
<ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/" />
),
}
),
configurations: [
{
description: (
<Fragment>
<p>
<List symbol="bullet">
<ListItem>
{tct(
'Create [code:sentry.server.config.js], [code:sentry.client.config.js] and [code:sentry.edge.config.js] with the default [code:Sentry.init].',
{
code: <code />,
}
)}
</ListItem>
<ListItem>
{tct(
'Create or update the Next.js instrumentation file [instrumentationCode:instrumentation.ts] to initialize the SDK with the configuration files added in the previous step.',
{
instrumentationCode: <code />,
}
)}
</ListItem>
<ListItem>
{tct(
'Alternatively, you can also [manualSetupLink:set up the SDK manually], by following these steps:',
'Create or update your Next.js config [nextConfig:next.config.js] with the default Sentry configuration.',
{
manualSetupLink: (
<ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/" />
),
nextConfig: <code />,
}
)}
</p>
<List symbol="bullet">
<ListItem>
{tct(
'Create [code:sentry.server.config.js], [code:sentry.client.config.js] and [code:sentry.edge.config.js] with the default [code:Sentry.init].',
{
code: <code />,
}
)}
</ListItem>
<ListItem>
{tct(
'Create or update the Next.js instrumentation file [instrumentationCode:instrumentation.ts] to initialize the SDK with the configuration files added in the previous step.',
{
instrumentationCode: <code />,
}
)}
</ListItem>
<ListItem>
{tct(
'Create or update your Next.js config [nextConfig:next.config.js] with the default Sentry configuration.',
{
nextConfig: <code />,
}
)}
</ListItem>
<ListItem>
{tct(
'Create a [bundlerPluginsEnv:.env.sentry-build-plugin] with an auth token (which is used to upload source maps when building the application).',
{
bundlerPluginsEnv: <code />,
}
)}
</ListItem>
<ListItem>
{t('Add an example page to your app to verify your Sentry setup.')}
</ListItem>
</List>
</Fragment>
</ListItem>
<ListItem>
{tct(
'Create a [bundlerPluginsEnv:.env.sentry-build-plugin] with an auth token (which is used to upload source maps when building the application).',
{
bundlerPluginsEnv: <code />,
}
)}
</ListItem>
<ListItem>
{t('Add an example page to your app to verify your Sentry setup.')}
</ListItem>
</List>
),
},
{
description: <CopyDsnField params={params} />,
},
],
},
],
verify: (params: Params) => [
verify: () => [
{
type: StepType.VERIFY,
description: (
Expand Down Expand Up @@ -183,28 +181,6 @@ const onboarding: OnboardingConfig = {
'If you see an issue in your Sentry dashboard, you have successfully set up Sentry with Next.js.'
)}
</p>
<Divider />
<DSNText>
<p>
{tct(
"If you already have the configuration for Sentry in your application, and just need this project's ([projectSlug]) DSN, you can find it below:",
{
projectSlug: <code>{params.projectSlug}</code>,
}
)}
</p>
</DSNText>
{params.organization && (
<TextCopyInput
onCopy={() =>
trackAnalytics('onboarding.nextjs-dsn-copied', {
organization: params.organization,
})
}
>
{params.dsn.public}
</TextCopyInput>
)}
</Fragment>
),
},
Expand Down Expand Up @@ -430,21 +406,8 @@ const docs: Docs = {

export default docs;

const DSNText = styled('div')`
margin-bottom: ${space(0.5)};
`;

const AdditionalInfoWrapper = styled('div')`
display: flex;
flex-direction: column;
gap: ${space(2)};
`;

const Divider = styled('hr')`
height: 1px;
width: 100%;
background: ${p => p.theme.border};
border: none;
margin-top: ${space(1)};
margin-bottom: ${space(2)};
`;
6 changes: 5 additions & 1 deletion static/app/gettingStartedDocs/javascript/nuxt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {Fragment} from 'react';
import ExternalLink from 'sentry/components/links/externalLink';
import List from 'sentry/components/list/';
import ListItem from 'sentry/components/list/listItem';
import {CopyDsnField} from 'sentry/components/onboarding/gettingStartedDoc/copyDsnField';
import crashReportCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/crashReportCallout';
import widgetCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/widgetCallout';
import TracePropagationMessage from 'sentry/components/onboarding/gettingStartedDoc/replay/tracePropagationMessage';
Expand Down Expand Up @@ -80,7 +81,7 @@ const onboarding: OnboardingConfig = {
configurations: getConfigStep(params),
},
],
configure: () => [
configure: params => [
{
title: t('Manual Configuration'),
collapsible: true,
Expand Down Expand Up @@ -112,6 +113,9 @@ const onboarding: OnboardingConfig = {
</List>
),
},
{
description: <CopyDsnField params={params} />,
},
],
},
],
Expand Down
6 changes: 5 additions & 1 deletion static/app/gettingStartedDocs/javascript/remix.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {Fragment} from 'react';
import ExternalLink from 'sentry/components/links/externalLink';
import List from 'sentry/components/list';
import ListItem from 'sentry/components/list/listItem';
import {CopyDsnField} from 'sentry/components/onboarding/gettingStartedDoc/copyDsnField';
import crashReportCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/crashReportCallout';
import widgetCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/widgetCallout';
import TracePropagationMessage from 'sentry/components/onboarding/gettingStartedDoc/replay/tracePropagationMessage';
Expand Down Expand Up @@ -73,7 +74,7 @@ const onboarding: OnboardingConfig = {
configurations: getConfigStep(params),
},
],
configure: () => [
configure: params => [
{
collapsible: true,
title: t('Manual Configuration'),
Expand Down Expand Up @@ -124,6 +125,9 @@ const onboarding: OnboardingConfig = {
</List>
),
},
{
description: <CopyDsnField params={params} />,
},
],
},
],
Expand Down
6 changes: 5 additions & 1 deletion static/app/gettingStartedDocs/javascript/sveltekit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {Fragment} from 'react';
import ExternalLink from 'sentry/components/links/externalLink';
import List from 'sentry/components/list/';
import ListItem from 'sentry/components/list/listItem';
import {CopyDsnField} from 'sentry/components/onboarding/gettingStartedDoc/copyDsnField';
import crashReportCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/crashReportCallout';
import widgetCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/widgetCallout';
import TracePropagationMessage from 'sentry/components/onboarding/gettingStartedDoc/replay/tracePropagationMessage';
Expand Down Expand Up @@ -68,7 +69,7 @@ const onboarding: OnboardingConfig = {
configurations: getConfigStep(params),
},
],
configure: () => [
configure: params => [
{
title: t('Manual Configuration'),
collapsible: true,
Expand Down Expand Up @@ -111,6 +112,9 @@ const onboarding: OnboardingConfig = {
</List>
),
},
{
description: <CopyDsnField params={params} />,
},
],
},
],
Expand Down
Loading