Skip to content

Commit

Permalink
Merge pull request #1 from sentry-demos/kelly/nextjs-demo
Browse files Browse the repository at this point in the history 
Add NextJS Demo
  • Loading branch information
@mikellykels
mikellykels authored May 22, 2020
2 parents 206f4db + 1e64a56 commit ff9b62d
Show file tree
Hide file tree
Showing 23 changed files with 12,379 additions and 98 deletions.
120 changes: 23 additions & 97 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,104 +1,30 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# TypeScript cache
*.tsbuildinfo
# dependencies
/node_modules
/.pnp
.pnp.js

# Optional npm cache directory
.npm
# testing
/coverage

# Optional eslint cache
.eslintcache
# next.js
/.next/
/out/

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# production
/build

# Optional REPL history
.node_repl_history
# misc
.DS_Store

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# Next.js build output
.next

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and *not* Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# TernJS port file
.tern-port
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
18 changes: 18 additions & 0 deletions Makefile
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Must have `sentry-cli` installed globally
# Following variable must be passed in
SENTRY_AUTH_TOKEN=

SENTRY_ORG=testorg-az
SENTRY_PROJECT=next-js
VERSION=`sentry-cli releases propose-version`

setup_release: create_release associate_commits upload_sourcemaps

create_release:
sentry-cli releases -o $(SENTRY_ORG) new -p $(SENTRY_PROJECT) $(VERSION)

associate_commits:
sentry-cli releases -o $(SENTRY_ORG) -p $(SENTRY_PROJECT) set-commits --auto $(VERSION)

upload_sourcemaps:
sentry-cli releases -o $(SENTRY_ORG) -p $(SENTRY_PROJECT) files $(VERSION) upload-sourcemaps .next --rewrite --url-prefix '~/_next'
111 changes: 110 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1 +1,110 @@
# next-js
# NextJS Demo

This app demonstrates how to configure Sentry (both `@sentry/browser` and `@sentry/node`) in a NextJS application to capture:

- Unhandled exceptions
- Handled exception
- Capture message

You'll also be able to do the following:

- Capture the user
- Associate commits (make sure that your GitHub repo is integrated into your Sentry organization)
- Manaully upload source maps using `sentry-cli`
- Automatically upload source maps using the `sentry-webpack-plugin`. (Use with `npm run start`/production. This is an alternative to manually uploading source maps)

Official documentation:
- [Sentry JavaScript](https://docs.sentry.io/platforms/javascript/)
- [Sentry Node](https://docs.sentry.io/platforms/node/)

## Setup

#### Versions

| dependency | version
| ------------- |:-------------:|
| @sentry/browser | ^5.15.4 |
| @sentry/node | ^5.15.4 |
| sentry-cli | 1.53.0 |
| @sentry/webpack-plugin | ^1.10.0 |
| @zeit/next-source-maps | 0.0.4-canary.1 |
| next | 9.3.6
| react | 16.13.1 |
| react-dom | 16.13.1 |
| swr | ^0.2.0 |
| node.js | 13.8.0 |

#### Instructions

1. `git clone git@github.com:sentry-demos/next-js.git`

2. Install dependencies
```
$ npm install
```

3. Create a Sentry project and replace `SENTRY_DSN` with your Sentry DSN in `next.config.js`

4. Include your `SENTRY_AUTH_TOKEN`, `SENTRY_ORG`, and `SENTRY_PROJECT` to the `Makefile`. If you haven't created an Auth Token, you can create one from your Sentry organization on the [API Keys](https://sentry.io/settings/account/api/auth-tokens/) page. Make sure that your GitHub repo is integrated with your Sentry Organization.

## Run Dev

1. Run the dev server and generate souce maps for the dev environment (this will create a `.next` folder)
```
$ npm run dev
```

2. Create a release, associate commits, and upload source maps
```
$ make setup_release
```

## Run Production

1. Build the production app and generate souce maps (this will create a `.next` folder)
```
$ npm run build
```

2. Create a release, associate commits, and upload source maps
```
$ make setup_release
```

3. If you only need to upload source maps

```
make upload_sourcemaps
```

4. If using `sentry-webpack-plugin`, uncomment the configuration in `next.config.js`

5. Run the production app
```
$ npm run start
```

## Updating

1. To upgrade NextJS

```
$ npm i next@latest react@latest react-dom@latest
```

## Additional Documentation

- [Sentry JavaScript](https://docs.sentry.io/platforms/javascript/)
- [Sentry Node](https://docs.sentry.io/platforms/node/)
- [NextJS](https://nextjs.org/)
- This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app)

## GIF

#### Client

![NextJS Demo Client](next-js-demo-client.gif)

#### Server

![NextJS Demo Server](next-js-demo-server.gif)
78 changes: 78 additions & 0 deletions components/ClientErrors.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
const ClientErrors = () => {

function notAFunction() {
let num = 3;
num.toUpperCase();
return <h1>TypeError</h1>
}

function rangeError() {
let bar;

rangeError(() => {
console.log('bar', bar)
})

bar = 1;
return <h1>RangeError</h1>
}

return (
<div className="client">
<h1>Client</h1>
<ul>
<li>
<a href='#' onClick={notAFunction}>TypeError
<p><code>3.toUpperCase is not a function</code></p>
</a>
</li>
<li>
<a href='#' onClick={rangeError}>RangeError
<p><code>Maximum call stack size exceeded
</code></p>
</a>
</li>
</ul>
<style jsx>{`
a {
font: 20px sans-serif;
}
h1 {
text-align: center;
font: 30px sans-serif;
}
.client {
text-align: center;
transition: 100ms ease-in background;
}
.client ul {
padding: 0px;
}
.client li {
list-style-type: none;
margin: 10px auto;
background: #6C5FC7;
padding: 10px;
display: block;
width: 20%;
}
.client a {
text-decoration: none;
color: white;
display: block;
}
.client p{
color: black;
font-size: 15px;
display: block;
}
.client li:hover{
background: #423B87;
cursor: pointer;
}
`}</style>
</div>
)
}

export default ClientErrors
52 changes: 52 additions & 0 deletions components/MainHeader.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import Link from 'next/link'

const MainHeader = () => (
<header className="header">
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/testErrors/clientErr">
<a>Client</a>
</Link>
</li>
<li>
<Link href="/testErrors/serverErr">
<a>Server</a>
</Link>
</li>
</ul>
<style jsx>{`
.header {
font: 20px sans-serif;
padding: 10px;
text-align: center;
}
.header ul {
padding: 0px;
}
.header li {
list-style-type: none;
margin: 10px;
background: #B9B2D0;
padding: 10px;
display: inline-block;
width: 20%;
}
.header a {
text-decoration: none;
color: white;
display: block;
}
.header li:hover{
background: #DBD3E9;
cursor: pointer;
}
`}</style>
</header>
)

export default MainHeader
Loading

0 comments on commit ff9b62d

Please sign in to comment.