{"componentChunkName":"component---src-templates-doc-tsx","path":"/product/sentry-basics/guides/integrate-frontend/","result":{"data":{"file":{"id":"ff1a8f3c-c482-5b5c-834d-c5c97da3574c","relativePath":"product/sentry-basics/guides/integrate-frontend/index.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\": \"Frontend Tutorial\",\n  \"sidebar_order\": 2,\n  \"redirect_from\": [\"/guides/integrate-frontend/\"],\n  \"description\": \"This step-by-step tutorial walks you through the flow of setting up and configuring your Sentry account to monitor errors in a frontend application. You can follow this tutorial as a reference and apply the relevant changes directly to your source code.\"\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 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, \"This step-by-step tutorial walks you through the flow of setting up and configuring your Sentry account to monitor errors in a frontend application. After completing this tutorial, you can:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Receive alerts when errors occur in your code\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Receive a readable stack trace with source code context\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"View suspect commits and suggested assignees based on commit information and stack trace.\")), mdx(Note, {\n    mdxType: \"Note\"\n  }, mdx(\"markdown\", null, mdx(\"p\", null, \"We provided the source code for a sample React application to use along with this guide. This allows us to streamline the steps required to getting the maximum value out of integrating Sentry into your development workflow.\"))), mdx(\"p\", null, \"Alternatively, you can follow this tutorial as a reference and apply the relevant changes directly to your source code.\"), 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(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"A \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://sentry.io\"\n  }), \"Sentry\"), \" account, or \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://sentry.io/signup/\"\n  }), \"sign up\"), \" for one\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"A \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://github.com/\"\n  }), \"GitHub\"), \" account, or \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://github.com/join\"\n  }), \"sign up\"), \" for one\")), 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/create-new-project/\"\n  }), \"Create a Sentry Project\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#prerequisites","title":"Prerequisites"},{"url":"#next","title":"Next"}]},"internal":{"type":"Mdx"}}}},"pageContext":{"excerpt":"This step-by-step tutorial walks you through the flow of setting up and configuring your Sentry account to monitor errors in a frontend application. After completing this tutorial, you can: Receive alerts when errors occur in your code Receive a readable stack trace with source code context View suspect commits and suggested assignees based on commit information and stack trace. We provided the source code for a sample React application to use along with this guide. This allows us to streamline the steps required to getting the maximum value out of integrating Sentry into your development workflow. Alternatively, you can follow this tutorial as a reference and apply the relevant changes directly to your source code. Prerequisites A  Sentry  account, or  sign up  for one A  GitHub  account, or  sign up  for one Next Create a Sentry Project","title":"Frontend Tutorial","description":"This step-by-step tutorial walks you through the flow of setting up and configuring your Sentry account to monitor errors in a frontend application. You can follow this tutorial as a reference and apply the relevant changes directly to your source code.","draft":null,"noindex":null,"notoc":null,"sidebar_order":2,"redirect_from":["/guides/integrate-frontend/"],"keywords":null,"id":"ff1a8f3c-c482-5b5c-834d-c5c97da3574c","legacy":false}},"staticQueryHashes":["1218203755","1222113826","1222113826","1766336459","2158593473","2764967025","3345802723","3818502851","3990806462","4015007367","4192517163","4264099332","518019976"]}