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

Wizard only onboarding #55844

Merged
merged 6 commits into from
Sep 8, 2023
Merged

Wizard only onboarding #55844

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
64fbc96
Wizard only onboarding
smeubank Sep 7, 2023
6d83ae0
Update static/app/gettingStartedDocs/javascript/remix.spec.tsx
smeubank Sep 7, 2023
047cb4b
Update static/app/gettingStartedDocs/javascript/nextjs.tsx
smeubank Sep 7, 2023
52a3f33
replace original remix
smeubank Sep 8, 2023
c227ccf
Merge branch 'master' into wizard-onboarding
smeubank Sep 8, 2023
2833663
fix eslint errors
Lms24 Sep 8, 2023
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
30 changes: 3 additions & 27 deletions static/app/gettingStartedDocs/javascript/nextjs.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,12 @@
import {render, screen} from 'sentry-test/reactTestingLibrary';

import {StepTitle} from 'sentry/components/onboarding/gettingStartedDoc/step';
import {ProductSolution} from 'sentry/components/onboarding/productSelection';

import {GettingStartedWithNextJs, nextSteps, steps} from './nextjs';
import {GettingStartedWithNextJs, steps} from './nextjs';

describe('GettingStartedWithNextJs', function () {
it('all products are selected', function () {
const {container} = render(
<GettingStartedWithNextJs
dsn="test-dsn"
activeProductSelection={[
ProductSolution.PERFORMANCE_MONITORING,
ProductSolution.SESSION_REPLAY,
]}
/>
);
it('renders doc correctly', function () {
const {container} = render(<GettingStartedWithNextJs dsn="test-dsn" />);

// Steps
for (const step of steps()) {
Expand All @@ -24,21 +15,6 @@ describe('GettingStartedWithNextJs', function () {
).toBeInTheDocument();
}

// Next Steps
const filteredNextStepsLinks = nextSteps.filter(
nextStep =>
![
ProductSolution.PERFORMANCE_MONITORING,
ProductSolution.SESSION_REPLAY,
].includes(nextStep.id as ProductSolution)
);

for (const filteredNextStepsLink of filteredNextStepsLinks) {
expect(
screen.getByRole('link', {name: filteredNextStepsLink.name})
).toBeInTheDocument();
}

expect(container).toSnapshot();
});
});
183 changes: 28 additions & 155 deletions static/app/gettingStartedDocs/javascript/nextjs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,46 +6,18 @@ import ListItem from 'sentry/components/list/listItem';
import {Layout, LayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/layout';
import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDocumentation';
import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
import {ProductSolution} from 'sentry/components/onboarding/productSelection';
import {t, tct} from 'sentry/locale';

// Configuration Start
const replayIntegration = `
new Sentry.Replay(),
`;

const replayOtherConfig = `
// 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.
`;

const performanceIntegration = `
new Sentry.BrowserTracing(),
`;

const performanceOtherConfig = `
// Performance Monitoring
tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!
`;

export const steps = ({
sentryInitContent,
}: {
sentryInitContent?: string;
} = {}): LayoutProps['steps'] => [
export const steps = (): LayoutProps['steps'] => [
{
type: StepType.INSTALL,
description: (
<p>
{tct(
'Add Sentry automatically to your app with the [wizardLink:Sentry wizard].',
{
wizardLink: (
<ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/nextjs/#install" />
),
}
)}
{tct('Configure your app automatically with the [wizardLink:Sentry wizard].', {
wizardLink: (
<ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/nextjs/#install" />
),
})}
</p>
),
configurations: [
Expand All @@ -59,31 +31,42 @@ export const steps = ({
type: StepType.CONFIGURE,
description: (
<Fragment>
{t('The Sentry wizard will automatically patch your application:')}
{t(
'The Sentry wizard will automatically patch your application to configure the Sentry SDK:'
)}
<List symbol="bullet">
<ListItem>
{tct(
'Create [sentryClientCode:sentry.client.config.js] and [sentryServerCode:sentry.server.config.js] with the default [sentryInitCode:Sentry.init].',
'Create [clientCode:sentry.client.config.js] and [serverCode:sentry.server.config.js] with the default [sentryInitCode:Sentry.init].',
{
sentryClientCode: <code />,
sentryServerCode: <code />,
clientCode: <code />,
serverCode: <code />,
sentryInitCode: <code />,
}
)}
</ListItem>
<ListItem>
{tct('Create [code:next.config.js] with the default configuration.', {
code: <code />,
})}
{tct(
'create or update your Next.js config [nextConfig:next.confg.js] with the default Sentry configuration',
{
nextConfig: <code />,
}
)}
</ListItem>
<ListItem>
{tct(
'Create [code:sentry.properties] with configuration for sentry-cli (which is used when automatically uploading source maps).',
'Create [sentryClircCode:.sentryclirc] and [sentryPropertiesCode:sentry.properties] files with configuration for sentry-cli (which is used when automatically uploading source maps).',
{
code: <code />,
sentryClircCode: <code />,
sentryPropertiesCode: <code />,
}
)}
</ListItem>
<ListItem>
{tct('add an example page to your app to verify your Sentry setup', {
sentryClircCode: <code />,
})}
</ListItem>
</List>
<p>
{tct('Alternatively, you can also [manualSetupLink:set up the SDK manually].', {
Expand All @@ -94,123 +77,13 @@ export const steps = ({
</p>
</Fragment>
),
configurations: [
{
description: (
<Fragment>
<strong>{t('Configure the Sentry SDK:')}</strong>
<p>
{tct(
'Install Sentry’s Next.js SDK using either [yarnCode:yarn] or [npmCode:npm]:',
{
yarnCode: <code />,
npmCode: <code />,
}
)}
</p>
</Fragment>
),
language: 'bash',
code: `
yarn add @sentry/nextjs
# or
npm install --save @sentry/nextjs
`,
},
{
language: 'javascript',
code: `
Sentry.init({
${sentryInitContent}
});
`,
},
],
},
{
type: StepType.VERIFY,
description: t(
"This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected."
),
configurations: [
{
language: 'javascript',
code: `
return <button onClick={() => methodDoesNotExist()}>Break the world</button>;
`,
},
],
},
];

export const nextSteps = [
{
id: 'source-maps',
name: t('Source Maps'),
description: t('Learn how to enable readable stack traces in your Sentry errors.'),
link: 'https://docs.sentry.io/platforms/javascript/guides/nextjs/sourcemaps/',
},
{
id: 'performance-monitoring',
name: t('Performance Monitoring'),
description: t(
'Track down transactions to connect the dots between 10-second page loads and poor-performing API calls or slow database queries.'
),
link: 'https://docs.sentry.io/platforms/javascript/guides/nextjs/performance/',
},
{
id: 'session-replay',
name: t('Session Replay'),
description: t(
'Get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application.'
),
link: 'https://docs.sentry.io/platforms/javascript/guides/nextjs/session-replay/',
},
];
// Configuration End

export function GettingStartedWithNextJs({
dsn,
activeProductSelection = [],
...props
}: ModuleProps) {
const integrations: string[] = [];
const otherConfigs: string[] = [];
let nextStepDocs = [...nextSteps];

if (activeProductSelection.includes(ProductSolution.PERFORMANCE_MONITORING)) {
integrations.push(performanceIntegration.trim());
otherConfigs.push(performanceOtherConfig.trim());
nextStepDocs = nextStepDocs.filter(
step => step.id !== ProductSolution.PERFORMANCE_MONITORING
);
}

if (activeProductSelection.includes(ProductSolution.SESSION_REPLAY)) {
integrations.push(replayIntegration.trim());
otherConfigs.push(replayOtherConfig.trim());
nextStepDocs = nextStepDocs.filter(
step => step.id !== ProductSolution.SESSION_REPLAY
);
}

let sentryInitContent: string[] = [`dsn: "${dsn}",`];

if (integrations.length > 0) {
sentryInitContent = sentryInitContent.concat('integrations: [', integrations, '],');
}

if (otherConfigs.length > 0) {
sentryInitContent = sentryInitContent.concat(otherConfigs);
}

return (
<Layout
steps={steps({sentryInitContent: sentryInitContent.join('\n')})}
nextSteps={nextStepDocs}
{...props}
/>
);
export function GettingStartedWithNextJs({dsn, ...props}: ModuleProps) {
return <Layout steps={steps()} {...props} />;
}

export default GettingStartedWithNextJs;
32 changes: 4 additions & 28 deletions static/app/gettingStartedDocs/javascript/remix.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,12 @@
import {render, screen} from 'sentry-test/reactTestingLibrary';

import {StepTitle} from 'sentry/components/onboarding/gettingStartedDoc/step';
import {ProductSolution} from 'sentry/components/onboarding/productSelection';

import {GettingStartedWithRemix, nextSteps, steps} from './remix';
import {GettingStartedWithSvelteKit, steps} from './sveltekit';

describe('GettingStartedWithRemix', function () {
it('all products are selected', function () {
const {container} = render(
<GettingStartedWithRemix
dsn="test-dsn"
activeProductSelection={[
ProductSolution.PERFORMANCE_MONITORING,
ProductSolution.SESSION_REPLAY,
]}
/>
);
describe('GettingStartedWithSvelteKit', function () {
it('renders doc correctly', function () {
const {container} = render(<GettingStartedWithSvelteKit dsn="test-dsn" />);

// Steps
for (const step of steps()) {
Expand All @@ -24,21 +15,6 @@ describe('GettingStartedWithRemix', function () {
).toBeInTheDocument();
}

// Next Steps
const filteredNextStepsLinks = nextSteps.filter(
nextStep =>
![
ProductSolution.PERFORMANCE_MONITORING,
ProductSolution.SESSION_REPLAY,
].includes(nextStep.id as ProductSolution)
);

for (const filteredNextStepsLink of filteredNextStepsLinks) {
expect(
screen.getByRole('link', {name: filteredNextStepsLink.name})
).toBeInTheDocument();
}

expect(container).toSnapshot();
});
});
Loading