{"componentChunkName":"component---src-templates-doc-tsx","path":"/product/sentry-basics/guides/integrate-frontend/initialize-sentry-sdk/","result":{"data":{"file":{"id":"96c81177-6133-5900-a320-26c0dd4913b1","relativePath":"product/sentry-basics/guides/integrate-frontend/initialize-sentry-sdk.mdx","sourceInstanceName":"docs","childMarkdownRemark":null,"childMdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Introduce Sentry SDK to your Frontend Code\",\n  \"redirect_from\": [\"/guides/integrate-frontend/initialize-sentry-sdk/\"]\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar Note = makeShortcode(\"Note\");\nvar CodeTabs = makeShortcode(\"CodeTabs\");\nvar CodeBlock = makeShortcode(\"CodeBlock\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"In this tutorial, you import the React demo code into your local development environment, add the Sentry SDK, and initialize it.\"), mdx(Note, {\n    mdxType: \"Note\"\n  }, mdx(\"markdown\", null, mdx(\"p\", null, \"If you're using your own source code you can skip this section and instead\"))), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Follow the instructions on \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/platforms/\"\n  }), \"Getting Started\"), \" for your platform. Notice that you can select the desired platform.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Continue with the \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"/guides/integrate-frontend/generate-first-error/\"\n  }), \"Next section\"), \".\")), mdx(\"h2\", {\n    \"id\": \"prerequisites\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#prerequisites\",\n    \"aria-label\": \"prerequisites permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"viewBox\": \"0 0 24 24\",\n    \"xmlns\": \"http://www.w3.org/2000/svg\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"d\": \"M10.879 6.05L15 1.93A5.001 5.001 0 0 1 22.071 9l-4.121 4.121a1 1 0 0 1-1.414-1.414l4.12-4.121a3 3 0 1 0-4.242-4.243l-4.121 4.121a1 1 0 1 1-1.414-1.414zm2.242 11.9L9 22.07A5 5 0 1 1 1.929 15l4.121-4.121a1 1 0 0 1 1.414 1.414l-4.12 4.121a3 3 0 1 0 4.242 4.243l4.121-4.121a1 1 0 1 1 1.414 1.414zm-8.364-.122l13.071-13.07a1 1 0 0 1 1.415 1.414L6.172 19.242a1 1 0 1 1-1.415-1.414z\",\n    \"fill\": \"currentColor\"\n  })))), \"Prerequisites\"), mdx(\"p\", null, \"The demo app source code requires a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"NodeJS\"), \" development environment to install and run the application. Make sure that you have the following in place:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://nodejs.org/en/\"\n  }), \"Node and NPM\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://github.com/nvm-sh/nvm\"\n  }), \"NVM\"))), mdx(\"h2\", {\n    \"id\": \"step-1-get-the-code\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#step-1-get-the-code\",\n    \"aria-label\": \"step 1 get the code permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"viewBox\": \"0 0 24 24\",\n    \"xmlns\": \"http://www.w3.org/2000/svg\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"d\": \"M10.879 6.05L15 1.93A5.001 5.001 0 0 1 22.071 9l-4.121 4.121a1 1 0 0 1-1.414-1.414l4.12-4.121a3 3 0 1 0-4.242-4.243l-4.121 4.121a1 1 0 1 1-1.414-1.414zm2.242 11.9L9 22.07A5 5 0 1 1 1.929 15l4.121-4.121a1 1 0 0 1 1.414 1.414l-4.12 4.121a3 3 0 1 0 4.242 4.243l4.121-4.121a1 1 0 1 1 1.414 1.414zm-8.364-.122l13.071-13.07a1 1 0 0 1 1.415 1.414L6.172 19.242a1 1 0 1 1-1.415-1.414z\",\n    \"fill\": \"currentColor\"\n  })))), \"Step 1: Get the code\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Open the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"frontend-monitoring\"), \" sample \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/sentry-tutorials/frontend-monitoring\"\n  }), \"code repository\"), \" on GitHub\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Click on \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Fork\"), \" and select the target GitHub account you wish this repository to be forked in to\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1200px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/11c56ee9d7c2cafbafc617102ad0192d/912fc/initialize-sentry-sdk-01.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"19.666666666666668%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAIAAAABPYjBAAAACXBIWXMAAAsSAAALEgHS3X78AAAA0ElEQVQI1xWMy27CQAxF81+laiORRUpDFIZSNpW66M8isWcBtAgkZngUQsaedwKeo7O4vracfH3/DEeTkk2LavI2ZGT+PhqUjMq8qIrqo2Sfg3KcZvnTS/85zXqvWS/tp3nBxtPkJnF7kmsBGyFXHH4FrDkcryBBNRKjgBI1P5z24ni5NUKcV9e/GZ8v6mXifPjnu0sNh1qfG62MA+VQWVTGuKANZaOtB2VQW/pCB77tbBt81yUhBJQNAoGEhKiP0Kb1pA/REEcXQ9vd79QYYx+LcL1cf0Uf0wAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Fork Repository\",\n    \"title\": \"Fork Repository\",\n    \"src\": \"/static/11c56ee9d7c2cafbafc617102ad0192d/c1b63/initialize-sentry-sdk-01.png\",\n    \"srcSet\": [\"/static/11c56ee9d7c2cafbafc617102ad0192d/5a46d/initialize-sentry-sdk-01.png 300w\", \"/static/11c56ee9d7c2cafbafc617102ad0192d/0a47e/initialize-sentry-sdk-01.png 600w\", \"/static/11c56ee9d7c2cafbafc617102ad0192d/c1b63/initialize-sentry-sdk-01.png 1200w\", \"/static/11c56ee9d7c2cafbafc617102ad0192d/d61c2/initialize-sentry-sdk-01.png 1800w\", \"/static/11c56ee9d7c2cafbafc617102ad0192d/912fc/initialize-sentry-sdk-01.png 1934w\"],\n    \"sizes\": \"(max-width: 1200px) 100vw, 1200px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Once the fork is complete, click on \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Clone or download\"), \", and copy the repository HTTPS URL\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"802px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/762a1fc772268f4fec2b9575db48c6ec/5a6dd/initialize-sentry-sdk-02.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"51%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsSAAALEgHS3X78AAABu0lEQVQoz02SyY7UMBCG83K8AbdBHJE4gbjwRiAOg2jNwAEx4iGYJJ2tpztpd/bE+5bFVHo4YH0q/S6r7NJf9qydKOOMb3AutLGbZhvXI9gJrsR99HAX/9pFP+/ihx/J7y/+/b7NPExYGKVxeoiSQ5Q+VU3/GMbBPoFkPxI/SvbR4VAVN1/fvfr2/uXt29e7D2++f3zx6ebzn51np3lZHWDsJJWGLqRSXEgh1YgJRDtNcMQkx5JB7CgtMekZV1p72izKzFJDpUEIBWGYZZkfBKc8j+I4SVNKqXNuheW2RdWKhmXgqzHGG7UDBuWItP2Aj0VZtQOQo6ps+3PZFpfmXDY5qtFVF6gcxwFugcc8rJZnBmbyRhxRlxVNktfxqQKipzI+QrwkpyrJGxDHkvopIoQoYz2trTYTQLls6dRRU49qY5AtedYSaK5J1NKOzmleQ7GGtoWQMA1CmRBiWlY9O7s4M/9jWpz9LwNC2XXZDFjBSw8miQnBmEgpwfgA6aw2wONZ+UjpCWxawK+it2FpgKiyNZ0hsxVDWdcPbdfBBjphQgNCasY3FAwE0EYp23T4hOr8XKFL1bQdfKe/UXsmmX/y90QAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Clone Repository\",\n    \"title\": \"Clone Repository\",\n    \"src\": \"/static/762a1fc772268f4fec2b9575db48c6ec/5a6dd/initialize-sentry-sdk-02.png\",\n    \"srcSet\": [\"/static/762a1fc772268f4fec2b9575db48c6ec/5a46d/initialize-sentry-sdk-02.png 300w\", \"/static/762a1fc772268f4fec2b9575db48c6ec/0a47e/initialize-sentry-sdk-02.png 600w\", \"/static/762a1fc772268f4fec2b9575db48c6ec/5a6dd/initialize-sentry-sdk-02.png 802w\"],\n    \"sizes\": \"(max-width: 802px) 100vw, 802px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Clone the forked repository to your local environment\"), mdx(\"div\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"code-tabs-wrapper\"\n  }), mdx(CodeTabs, {\n    mdxType: \"CodeTabs\"\n  }, mdx(CodeBlock, {\n    language: \"bash\",\n    title: \"\",\n    filename: \"\",\n    mdxType: \"CodeBlock\"\n  }, mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"bash\"\n  }), mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-bash\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"git\"), \" clone \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"<\"), \"repository HTTPS url\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\")))))))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Now that the sample code is available locally open the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"frontend-monitoring\"), \" project in your preferred code editor\"))), mdx(\"h2\", {\n    \"id\": \"step-2-install-the-sdk\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#step-2-install-the-sdk\",\n    \"aria-label\": \"step 2 install the sdk permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"viewBox\": \"0 0 24 24\",\n    \"xmlns\": \"http://www.w3.org/2000/svg\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"d\": \"M10.879 6.05L15 1.93A5.001 5.001 0 0 1 22.071 9l-4.121 4.121a1 1 0 0 1-1.414-1.414l4.12-4.121a3 3 0 1 0-4.242-4.243l-4.121 4.121a1 1 0 1 1-1.414-1.414zm2.242 11.9L9 22.07A5 5 0 1 1 1.929 15l4.121-4.121a1 1 0 0 1 1.414 1.414l-4.12 4.121a3 3 0 1 0 4.242 4.243l4.121-4.121a1 1 0 1 1 1.414 1.414zm-8.364-.122l13.071-13.07a1 1 0 0 1 1.415 1.414L6.172 19.242a1 1 0 1 1-1.415-1.414z\",\n    \"fill\": \"currentColor\"\n  })))), \"Step 2: Install the SDK\"), mdx(\"p\", null, \"Sentry captures data by using a platform-specific SDK within your application runtime. To use the SDK, import and configure it in your source code. The demo project uses React and Browser JS. The quickest way to get started is by using the CDN hosted version of the JavaScript browser SDK, however, you can NPM install the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/platforms/javascript/\"\n  }), \"browser SDK\"), \" as well.\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Open the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"index.html\"), \" file (located under \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"./frontend-monitoring/public/\"), \")\"), mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1200px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/362ddf58c53519ebbda0b4c7591971cd/9c701/initialize-sentry-sdk-03.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"21.333333333333336%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAIAAAABPYjBAAAACXBIWXMAAAsSAAALEgHS3X78AAAAuklEQVQI1x3OWW6DMBRAUdZRsB9+g8fY2ESgFjokSqW2+99QIdL5vdLtam1v297aHEIiEmaLI2FjaEhXkZmooMmjucCpPE0AGfSr6dZl/v35W9ctpVJyO1jy+O7GbzEP7x8c7+Q/8fSFcaHUOM0sE+MtdzmXbdvrNFsbDs5FNkJXQ0sOa7EFwekT6z4NL3kYQPVGDUYp6LtS6r5/OHdkwfso4tAQVmPzxfkYBYNwlGOGNGsVNPQa1JOGf9vtJg8ZEGPYAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Import and Configure SDK\",\n    \"title\": \"Import and Configure SDK\",\n    \"src\": \"/static/362ddf58c53519ebbda0b4c7591971cd/c1b63/initialize-sentry-sdk-03.png\",\n    \"srcSet\": [\"/static/362ddf58c53519ebbda0b4c7591971cd/5a46d/initialize-sentry-sdk-03.png 300w\", \"/static/362ddf58c53519ebbda0b4c7591971cd/0a47e/initialize-sentry-sdk-03.png 600w\", \"/static/362ddf58c53519ebbda0b4c7591971cd/c1b63/initialize-sentry-sdk-03.png 1200w\", \"/static/362ddf58c53519ebbda0b4c7591971cd/9c701/initialize-sentry-sdk-03.png 1774w\"],\n    \"sizes\": \"(max-width: 1200px) 100vw, 1200px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"blockquote\", {\n    parentName: \"li\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Notice that we import and initialize the SDK as early as possible in our code. When initializing the SDK, we provide the desired configuration. The only mandatory configuration option is the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"DSN\"), \" key, however, the SDK supports multiple other configuration options. For more information see \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/platforms/javascript/configuration/\"\n  }), \"Configuration\"), \".\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"In the Sentry SDK configuration, enter the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"DSN\"), \" key value you copied from the project created in the previous section.\"), mdx(\"div\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"code-tabs-wrapper\"\n  }), mdx(CodeTabs, {\n    mdxType: \"CodeTabs\"\n  }, mdx(CodeBlock, {\n    language: \"javascript\",\n    title: \"\",\n    filename: \"\",\n    mdxType: \"CodeBlock\"\n  }, mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"javascript\"\n  }), mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"Sentry\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"init\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"(\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"{\"), \"\\n  dsn\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"<PASTE YOUR DSN KEY HERE>\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"}\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \")\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \";\"))))))))), mdx(\"h2\", {\n    \"id\": \"step-3-install--run-the-demo-app\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#step-3-install--run-the-demo-app\",\n    \"aria-label\": \"step 3 install  run the demo app permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"viewBox\": \"0 0 24 24\",\n    \"xmlns\": \"http://www.w3.org/2000/svg\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"d\": \"M10.879 6.05L15 1.93A5.001 5.001 0 0 1 22.071 9l-4.121 4.121a1 1 0 0 1-1.414-1.414l4.12-4.121a3 3 0 1 0-4.242-4.243l-4.121 4.121a1 1 0 1 1-1.414-1.414zm2.242 11.9L9 22.07A5 5 0 1 1 1.929 15l4.121-4.121a1 1 0 0 1 1.414 1.414l-4.12 4.121a3 3 0 1 0 4.242 4.243l4.121-4.121a1 1 0 1 1 1.414 1.414zm-8.364-.122l13.071-13.07a1 1 0 0 1 1.415 1.414L6.172 19.242a1 1 0 1 1-1.415-1.414z\",\n    \"fill\": \"currentColor\"\n  })))), \"Step 3: Install & run the demo app\"), mdx(\"p\", null, \"To build and run the Demo application on your localhost:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Open a shell terminal and change directory to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"frontend-monitoring\"), \" project folder\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".nvmrc\"), \" file to set the Node version compatible with this project. Run:\"), mdx(\"div\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"code-tabs-wrapper\"\n  }), mdx(CodeTabs, {\n    mdxType: \"CodeTabs\"\n  }, mdx(CodeBlock, {\n    language: \"bash\",\n    title: \"\",\n    filename: \"\",\n    mdxType: \"CodeBlock\"\n  }, mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"bash\"\n  }), mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-bash\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\"), \" nvm use\"))))))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Install project dependencies by running:\"), mdx(\"div\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"code-tabs-wrapper\"\n  }), mdx(CodeTabs, {\n    mdxType: \"CodeTabs\"\n  }, mdx(CodeBlock, {\n    language: \"bash\",\n    title: \"\",\n    filename: \"\",\n    mdxType: \"CodeBlock\"\n  }, mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"bash\"\n  }), mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-bash\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"npm\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"install\")))))))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Build, deploy, and run the project on your localhost by running:\"), mdx(\"div\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"code-tabs-wrapper\"\n  }), mdx(CodeTabs, {\n    mdxType: \"CodeTabs\"\n  }, mdx(CodeBlock, {\n    language: \"bash\",\n    title: \"\",\n    filename: \"\",\n    mdxType: \"CodeBlock\"\n  }, mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"bash\"\n  }), mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-bash\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \">\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token function\"\n  }), \"npm\"), \" run deploy\")))))), mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1200px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1eb5f3cebf4e0d3bf4bf48af784b20cd/e4611/initialize-sentry-sdk-04.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"42.66666666666667%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsSAAALEgHS3X78AAABBElEQVQoz3VRW26EMAzMOdoQ23Eg7PKqKFTa8qgQ979TJ9Du1zKyrLGTiWPbqPci4r1XBfUhhDOEB2dmdw3zc+DxeCzrum3b9J2ADDzE1trzXpZlT/LkZp5nKMdxHIahAeqm67q+7z/7/uNA27ZVVcHjEEdnBsDXTN3U8Vbeq7vmgYRF/WmsAvNBWYSI+B/QnARJY72zOb8Hcp5JJROy4iwfJg6hQ/IV0rchKOqy7Cq0Z98sng0a8pADsSgwRKeXMzN4+2sY12Ud0PU4ojGMYF6WeZn3fZ+mCfXpSozK4dhSKhVj2hwLKmNXadSZoyCXlSkql8pRKfo/nizAEFKplKP11+Jf985Nd7A5P3sAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Deploy & Serve\",\n    \"title\": \"Deploy & Serve\",\n    \"src\": \"/static/1eb5f3cebf4e0d3bf4bf48af784b20cd/c1b63/initialize-sentry-sdk-04.png\",\n    \"srcSet\": [\"/static/1eb5f3cebf4e0d3bf4bf48af784b20cd/5a46d/initialize-sentry-sdk-04.png 300w\", \"/static/1eb5f3cebf4e0d3bf4bf48af784b20cd/0a47e/initialize-sentry-sdk-04.png 600w\", \"/static/1eb5f3cebf4e0d3bf4bf48af784b20cd/c1b63/initialize-sentry-sdk-04.png 1200w\", \"/static/1eb5f3cebf4e0d3bf4bf48af784b20cd/e4611/initialize-sentry-sdk-04.png 1298w\"],\n    \"sizes\": \"(max-width: 1200px) 100vw, 1200px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"blockquote\", {\n    parentName: \"li\"\n  }, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Once the deploy finishes successfully, you'll see the confirmation in your terminal.\")))), mdx(\"h2\", {\n    \"id\": \"next\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#next\",\n    \"aria-label\": \"next permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"viewBox\": \"0 0 24 24\",\n    \"xmlns\": \"http://www.w3.org/2000/svg\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"d\": \"M10.879 6.05L15 1.93A5.001 5.001 0 0 1 22.071 9l-4.121 4.121a1 1 0 0 1-1.414-1.414l4.12-4.121a3 3 0 1 0-4.242-4.243l-4.121 4.121a1 1 0 1 1-1.414-1.414zm2.242 11.9L9 22.07A5 5 0 1 1 1.929 15l4.121-4.121a1 1 0 0 1 1.414 1.414l-4.12 4.121a3 3 0 1 0 4.242 4.243l4.121-4.121a1 1 0 1 1 1.414 1.414zm-8.364-.122l13.071-13.07a1 1 0 0 1 1.415 1.414L6.172 19.242a1 1 0 1 1-1.415-1.414z\",\n    \"fill\": \"currentColor\"\n  })))), \"Next\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/guides/integrate-frontend/generate-first-error/\"\n  }), \"Capture your First Error\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#prerequisites","title":"Prerequisites"},{"url":"#step-1-get-the-code","title":"Step 1: Get the code"},{"url":"#step-2-install-the-sdk","title":"Step 2: Install the SDK"},{"url":"#step-3-install--run-the-demo-app","title":"Step 3: Install & run the demo app"},{"url":"#next","title":"Next"}]},"internal":{"type":"Mdx"}}}},"pageContext":{"excerpt":"In this tutorial, you import the React demo code into your local development environment, add the Sentry SDK, and initialize it. If you're using your own source code you can skip this section and instead Follow the instructions on  Getting Started  for your platform. Notice that you can select the desired platform. Continue with the  Next section . Prerequisites The demo app source code requires a  NodeJS  development environment to install and run the application. Make sure that you have the following in place: Node and NPM NVM Step 1: Get the code Open the  frontend-monitoring  sample  code repository  on GitHub Click on  Fork  and select the target GitHub account you wish this repository to be forked in to Once the fork is complete, click on  Clone or download , and copy the repository HTTPS URL Clone the forked repository to your local environment Now that the sample code is available locally open the  frontend-monitoring  project in your preferred code editor Step 2: Install the SDK Sentry captures data by using a platform-specific SDK within your application runtime. To use the SDK, import and configure it in your source code. The demo project uses React and Browser JS. The quickest way to get started is by using the CDN hosted version of the JavaScript browser SDK, however, you can NPM install the  browser SDK  as well. Open the  index.html  file (located under  ./frontend-monitoring/public/ ) Notice that we import and initialize the SDK as early as possible in our code. When initializing the SDK, we provide the desired configuration. The only mandatory configuration option is the  DSN  key, however, the SDK supports multiple other configuration options. For more information see  Configuration . In the Sentry SDK configuration, enter the  DSN  key value you copied from the project created in the previous section. Step 3: Install & run the demo app To build and run the Demo application on your localhost: Open a shell terminal and change directory to the  frontend-monitoring  project folder Use the  .nvmrc  file to set the Node version compatible with this project. Run: Install project dependencies by running: Build, deploy, and run the project on your localhost by running: Once the deploy finishes successfully, you'll see the confirmation in your terminal. Next Capture your First Error","title":"Introduce Sentry SDK to your Frontend Code","description":null,"draft":null,"noindex":null,"notoc":null,"sidebar_order":null,"redirect_from":["/guides/integrate-frontend/initialize-sentry-sdk/"],"keywords":null,"id":"96c81177-6133-5900-a320-26c0dd4913b1","legacy":false}},"staticQueryHashes":["1218203755","1222113826","1222113826","1766336459","2158593473","2764967025","3345802723","3818502851","3990806462","4015007367","4192517163","4264099332","518019976"]}