express.tsx 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. import ExternalLink from 'sentry/components/links/externalLink';
  2. import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
  3. import type {
  4. Docs,
  5. DocsParams,
  6. OnboardingConfig,
  7. } from 'sentry/components/onboarding/gettingStartedDoc/types';
  8. import {getUploadSourceMapsStep} from 'sentry/components/onboarding/gettingStartedDoc/utils';
  9. import {
  10. getCrashReportJavaScriptInstallStep,
  11. getCrashReportModalConfigDescription,
  12. getCrashReportModalIntroduction,
  13. } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
  14. import {getJSServerMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
  15. import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
  16. import {t, tct} from 'sentry/locale';
  17. import {
  18. getImportInstrumentSnippet,
  19. getInstallConfig,
  20. getSdkInitSnippet,
  21. getSentryImportSnippet,
  22. } from 'sentry/utils/gettingStartedDocs/node';
  23. type Params = DocsParams;
  24. const getSdkSetupSnippet = () => `
  25. ${getImportInstrumentSnippet()}
  26. // All other imports below
  27. ${getSentryImportSnippet('node')}
  28. const express = require("express");
  29. const app = express();
  30. // All your controllers should live here
  31. app.get("/", function rootHandler(req, res) {
  32. res.end("Hello world!");
  33. });
  34. // The error handler must be registered before any other error middleware and after all controllers
  35. Sentry.setupExpressErrorHandler(app);
  36. // Optional fallthrough error handler
  37. app.use(function onError(err, req, res, next) {
  38. // The error id is attached to \`res.sentry\` to be returned
  39. // and optionally displayed to the user for support.
  40. res.statusCode = 500;
  41. res.end(res.sentry + "\\n");
  42. });
  43. app.listen(3000);
  44. `;
  45. const onboarding: OnboardingConfig = {
  46. introduction: () =>
  47. tct(
  48. 'In this quick guide you’ll use [strong:npm], [strong:yarn] or [strong:pnpm] to set up:',
  49. {
  50. strong: <strong />,
  51. }
  52. ),
  53. install: (params: Params) => [
  54. {
  55. type: StepType.INSTALL,
  56. description: t('Add the Sentry Node SDK as a dependency:'),
  57. configurations: getInstallConfig(params),
  58. },
  59. ],
  60. configure: (params: Params) => [
  61. {
  62. type: StepType.CONFIGURE,
  63. description: t(
  64. "Initialize Sentry as early as possible in your application's lifecycle."
  65. ),
  66. configurations: [
  67. {
  68. description: tct(
  69. 'To initialize the SDK before everything else, create an external file called [code:instrument.js/mjs].',
  70. {code: <code />}
  71. ),
  72. code: [
  73. {
  74. label: 'JavaScript',
  75. value: 'javascript',
  76. language: 'javascript',
  77. filename: 'instrument.(js|mjs)',
  78. code: getSdkInitSnippet(params, 'node'),
  79. },
  80. ],
  81. },
  82. {
  83. description: tct(
  84. "Make sure to import [code:instrument.js/mjs] at the top of your file. Set up the error handler after all controllers and before any other error middleware. This setup is typically done in your application's entry point file, which is usually [code:index.(js|ts)]. If you're running your application in ESM mode, or looking for alternative ways to set up Sentry, read about [docs:installation methods in our docs].",
  85. {
  86. code: <code />,
  87. docs: (
  88. <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/express/install/" />
  89. ),
  90. }
  91. ),
  92. code: [
  93. {
  94. label: 'JavaScript',
  95. value: 'javascript',
  96. language: 'javascript',
  97. filename: 'index.(js|mjs)',
  98. code: getSdkSetupSnippet(),
  99. },
  100. ],
  101. },
  102. ],
  103. },
  104. getUploadSourceMapsStep({
  105. guideLink: 'https://docs.sentry.io/platforms/javascript/guides/express/sourcemaps/',
  106. ...params,
  107. }),
  108. ],
  109. verify: () => [
  110. {
  111. type: StepType.VERIFY,
  112. description: t(
  113. "This snippet contains an intentional error and can be used as a test to make sure that everything's working as expected."
  114. ),
  115. configurations: [
  116. {
  117. language: 'javascript',
  118. code: `
  119. app.get("/debug-sentry", function mainHandler(req, res) {
  120. throw new Error("My first Sentry error!");
  121. });
  122. `,
  123. },
  124. ],
  125. },
  126. ],
  127. };
  128. const crashReportOnboarding: OnboardingConfig = {
  129. introduction: () => getCrashReportModalIntroduction(),
  130. install: (params: Params) => getCrashReportJavaScriptInstallStep(params),
  131. configure: () => [
  132. {
  133. type: StepType.CONFIGURE,
  134. description: getCrashReportModalConfigDescription({
  135. link: 'https://docs.sentry.io/platforms/javascript/guides/express/user-feedback/configuration/#crash-report-modal',
  136. }),
  137. },
  138. ],
  139. verify: () => [],
  140. nextSteps: () => [],
  141. };
  142. const docs: Docs = {
  143. onboarding,
  144. replayOnboardingJsLoader,
  145. customMetricsOnboarding: getJSServerMetricsOnboarding(),
  146. crashReportOnboarding,
  147. };
  148. export default docs;