{"componentChunkName":"component---src-templates-platform-tsx","path":"/platforms/javascript/guides/electron/install/cdn/","result":{"data":{"file":{"id":"7e42ff51-e041-561f-acd0-38371ee0a733","relativePath":"javascript/common/install/cdn.mdx","sourceInstanceName":"platforms","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\": \"CDN\",\n  \"sidebar_order\": 5\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 CodeTabs = makeShortcode(\"CodeTabs\");\nvar CodeBlock = makeShortcode(\"CodeBlock\");\nvar Note = makeShortcode(\"Note\");\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, \"Sentry supports loading it's JavaScript SDK via a CDN. Generally we suggest using our npm package (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@sentry/browser\"), \") as utilizing a CDN create scenarios where Sentry is unable to load due to networking issues or common extensions like ad blockers. If you \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"must\"), \" use a CDN, take a look at \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"../lazy-load-sentry/\"\n  }), \"loading Sentry lazily with our JS loader\"), \".\"), mdx(\"div\", {\n    \"className\": \"code-tabs-wrapper\"\n  }, mdx(CodeTabs, {\n    mdxType: \"CodeTabs\"\n  }, mdx(CodeBlock, {\n    language: \"html\",\n    title: \"CDN\",\n    filename: \"\",\n    mdxType: \"CodeBlock\"\n  }, mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }), mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-html\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"script\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"src\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation attr-equals\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"https://browser.sentry-cdn.com/5.25.0/bundle.min.js\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"integrity\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation attr-equals\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"sha384-2p7fXoWSRPG49ZgmmJlTEI/01BY1LgxCNFQFiWpImAERmS/bROOQm+cJMdq/kmWS\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"crossorigin\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation attr-equals\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"anonymous\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token script\"\n  })), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"script\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")))))))), mdx(\"h2\", {\n    \"id\": \"performance-bundle\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#performance-bundle\",\n    \"aria-label\": \"performance bundle 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  })))), \"Performance Bundle\"), mdx(\"p\", null, \"To use Sentry's performance tracing an alternative bundle is needed. This allows us to keep the filesize down for users who only need error monitoring.\"), mdx(\"div\", {\n    \"className\": \"code-tabs-wrapper\"\n  }, mdx(CodeTabs, {\n    mdxType: \"CodeTabs\"\n  }, mdx(CodeBlock, {\n    language: \"html\",\n    title: \"CDN\",\n    filename: \"\",\n    mdxType: \"CodeBlock\"\n  }, mdx(\"div\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"html\"\n  }), mdx(\"pre\", _extends({\n    parentName: \"div\"\n  }, {\n    \"className\": \"language-html\"\n  }), mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"<\"), \"script\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"src\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation attr-equals\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"https://browser.sentry-cdn.com/5.25.0/bundle.tracing.min.js\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"integrity\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation attr-equals\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"sha384-MxPEqyePOMqaz3prq1TexMEXtfnxqvet9uhebPAm5SI4Pz3Ga9HwbmE5FY2Bah20\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-name\"\n  }), \"crossorigin\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token attr-value\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation attr-equals\"\n  }), \"=\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\"), \"anonymous\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"\\\"\")), \"\\n\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token script\"\n  })), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token tag\"\n  }), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"</\"), \"script\"), mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \">\")))))))), mdx(Note, {\n    mdxType: \"Note\"\n  }, mdx(\"markdown\", null, mdx(\"p\", null, \"You only need to load \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bundle.tracing.min.js\"), \", which provides both error and performance monitoring.\"))), mdx(\"p\", null, \"The most important thing to note here is that \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Sentry.Integrations\"), \" has been made available, and can be referenced in your call to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Sentry.init\"), \":\"), mdx(\"div\", {\n    \"className\": \"code-tabs-wrapper\"\n  }, mdx(CodeTabs, {\n    mdxType: \"CodeTabs\"\n  }, mdx(CodeBlock, {\n    language: \"javascript\",\n    title: \"CDN\",\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  }), \"\\\"___PUBLIC_DSN___\\\"\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  release\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token string\"\n  }), \"\\\"my-project-name@\\\"\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \"+\"), \" process\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"env\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"npm_package_version\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n  integrations\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \"[\"), mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token keyword\"\n  }), \"new\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token class-name\"\n  }), \"Sentry\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"Integrations\", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \".\"), \"BrowserTracing\"), 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(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token punctuation\"\n  }), \",\"), \"\\n\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// We recommend adjusting this value in production, or using tracesSampler\"), \"\\n  \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token comment\"\n  }), \"// for finer control\"), \"\\n  tracesSampleRate\", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token operator\"\n  }), \":\"), \" \", mdx(\"span\", _extends({\n    parentName: \"code\"\n  }, {\n    \"className\": \"token number\"\n  }), \"1.0\"), 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\": \"available-bundles\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#available-bundles\",\n    \"aria-label\": \"available bundles 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  })))), \"Available Bundles\"), mdx(\"p\", null, \"A variety of bundles are provided which are optimized for Sentry's various integrations.\"), mdx(JsBundleList, {\n    mdxType: \"JsBundleList\"\n  }), mdx(\"h2\", {\n    \"id\": \"additional-configuration\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#additional-configuration\",\n    \"aria-label\": \"additional configuration 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  })))), \"Additional Configuration\"), mdx(\"h3\", {\n    \"id\": \"using-defer\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"href\": \"#using-defer\",\n    \"aria-label\": \"using defer 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  })))), \"Using defer\"), mdx(\"p\", null, \"If you include \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defer\"), \" in your script your app, to make sure it can monitor everything that follows it. We strongly recommend that if you use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defer\"), \", you both place the script tag for the browser SDK first and also mark it -- and all of your other scripts -- \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defer\"), \" (but not \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"async\"), \"), guaranteeing that it\\u2019s executed before any of the others.\"), mdx(\"p\", null, \"Without doing this you will find that it's possible for errors to occur before Sentry is loaded, which means you'll be flying blind to those issues.\"), mdx(\"h3\", {\n    \"id\": \"content-security-policy\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"href\": \"#content-security-policy\",\n    \"aria-label\": \"content security policy 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  })))), \"Content Security Policy\"), mdx(\"p\", null, \"If you have a Content Security Policy (CSP) set up on your site, you will need to add the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"script-src\"), \" of wherever you're loading the SDK from, and the origin of your DSN. For example:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"script-src: https://browser.sentry-cdn.com\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"connect-src: *.sentry.io\"))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#performance-bundle","title":"Performance Bundle"},{"url":"#available-bundles","title":"Available Bundles"},{"url":"#additional-configuration","title":"Additional Configuration","items":[{"url":"#using-defer","title":"Using defer"},{"url":"#content-security-policy","title":"Content Security Policy"}]}]},"internal":{"type":"Mdx"}}}},"pageContext":{"excerpt":"Sentry supports loading it's JavaScript SDK via a CDN. Generally we suggest using our npm package ( @sentry/browser ) as utilizing a CDN create scenarios where Sentry is unable to load due to networking issues or common extensions like ad blockers. If you  must  use a CDN, take a look at  loading Sentry lazily with our JS loader . Performance Bundle To use Sentry's performance tracing an alternative bundle is needed. This allows us to keep the filesize down for users who only need error monitoring. You only need to load  bundle.tracing.min.js , which provides both error and performance monitoring. The most important thing to note here is that  Sentry.Integrations  has been made available, and can be referenced in your call to  Sentry.init : Available Bundles A variety of bundles are provided which are optimized for Sentry's various integrations. Additional Configuration Using defer If you include  defer  in your script your app, to make sure it can monitor everything that follows it. We strongly recommend that if you use  defer , you both place the script tag for the browser SDK first and also mark it -- and all of your other scripts --  defer  (but not  async ), guaranteeing that it’s executed before any of the others. Without doing this you will find that it's possible for errors to occur before Sentry is loaded, which means you'll be flying blind to those issues. Content Security Policy If you have a Content Security Policy (CSP) set up on your site, you will need to add the  script-src  of wherever you're loading the SDK from, and the origin of your DSN. For example: script-src: https://browser.sentry-cdn.com connect-src: *.sentry.io","title":"CDN","sidebar_order":5,"platform":{"name":"javascript","title":"JavaScript"},"guide":{"name":"electron","title":"Electron"},"noindex":true,"notoc":true,"redirect_from":[],"id":"7e42ff51-e041-561f-acd0-38371ee0a733"}},"staticQueryHashes":["1218203755","1222113826","1222113826","1766336459","2158593473","2404336828","2472290386","2764967025","3818502851","4015007367","4192517163","4264099332","518019976"]}