提交 a35e747e 编写于 作者: L Leandro Ardissone 提交者: Tim Neutkens

Added Sentry.io example (#3215)

* Added Sentry example

* Code style fixes

* Fixes docs + removed demo DSN + send error to comp
上级 b41d1776
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-sentry)
# Sentry example
## How to use
Download the example [or clone the repo](https://github.com/zeit/next.js):
Install it and run:
**npm**
```bash
npm install
npm run dev
```
**yarn**
```bash
npm install
npm run dev
```
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
```bash
now
```
## About example
This example show you how to add Sentry to catch errors in next.js
You will need a Sentry DSN for your project. You can get it from the Settings of your Project, in **Client Keys (DSN)**, and copy the string labeled **DSN (Public)**.
\ No newline at end of file
import React from 'react'
import Raven from 'raven-js'
const SENTRY_DSN = ''
function withSentry (Child) {
return class WrappedComponent extends React.Component {
static getInitialProps (context) {
if (Child.getInitialProps) {
return Child.getInitialProps(context)
}
return {}
}
constructor (props) {
super(props)
this.state = {
error: null
}
Raven.config(
SENTRY_DSN
).install()
}
componentDidCatch (error, errorInfo) {
this.setState({ error })
Raven.captureException(error, { extra: errorInfo })
}
render () {
return <Child {...this.props} error={this.state.error} />
}
}
}
export default withSentry
{
"name": "with-sentry",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "latest",
"raven-js": "^3.19.1",
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"license": "ISC"
}
import React from 'react'
import withSentry from '../components/withSentry'
class Index extends React.Component {
static getInitialProps (context) {
const { isServer } = context
return { isServer }
}
onClickHandler () {
throw new Error('woops')
}
render () {
return (
<div>
<h2>Index page</h2>
<button onClick={this.onClickHandler.bind(this)}>Click to raise error</button>
</div>
)
}
}
export default withSentry(Index)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册