Initial commit
This commit is contained in:
Linus Miller
commit
3cd6435536
9
.babelrc
Normal file
9
.babelrc
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"presets": [[
|
||||
"@babel/preset-env", {
|
||||
"modules": false,
|
||||
"shippedProposals": true
|
||||
}
|
||||
]],
|
||||
"plugins": ["@babel/transform-react-jsx"]
|
||||
}
|
||||
12
.eslintrc
Normal file
12
.eslintrc
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"extends": "standard",
|
||||
|
||||
"rules": {
|
||||
"comma-dangle": [ 2, "always-multiline" ],
|
||||
"no-unused-vars": [ 2, "all" ]
|
||||
},
|
||||
|
||||
"globals": {
|
||||
"fetch": true
|
||||
}
|
||||
}
|
||||
66
.gitignore
vendored
Normal file
66
.gitignore
vendored
Normal file
@ -0,0 +1,66 @@
|
||||
# from https://github.com/github/gitignore/blob/master/Node.gitignore
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# 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
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (http://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/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
|
||||
# next.js build output
|
||||
.next
|
||||
|
||||
/dump
|
||||
/public
|
||||
9
browserslist
Normal file
9
browserslist
Normal file
@ -0,0 +1,9 @@
|
||||
# Define what browsers we support
|
||||
# https://github.com/ai/browserslist
|
||||
#
|
||||
# This is automatically sourced by babel-preset-env and autoprefixer (postcss)
|
||||
|
||||
> 10%
|
||||
last 2 versions
|
||||
iOS >= 9
|
||||
ie >= 11
|
||||
149
errors.txt
Normal file
149
errors.txt
Normal file
@ -0,0 +1,149 @@
|
||||
GhostingService.js?a92c:221 Uncaught TypeError: Cannot read property 'y' of null
|
||||
at isPlacedInPropping (GhostingService.js?a92c:221)
|
||||
at Array.filter (<anonymous>)
|
||||
at toggleProppingOnCollidingElement (GhostingService.js?a92c:220)
|
||||
at Object.removeGhost (GhostingService.js?a92c:57)
|
||||
at Object.out (DropAreas.js?510e:307)
|
||||
at eval (DnDLib.js?b5c7:55)
|
||||
at fireUntilImmediateStopped (interact.js?f3bb:47)
|
||||
at Eventable.fire (interact.js?f3bb:65)
|
||||
at Interactable.fire (interact.js?f3bb:517)
|
||||
at fireDropEvents (interact.js?f3bb:1833)
|
||||
|
||||
|
||||
margin‒
|
||||
‒border‒
|
||||
‒padding‒
|
||||
‒2533 × 1941.970‒
|
||||
‒‒
|
||||
‒‒
|
||||
‒
|
||||

|
||||
Console
|
||||

|
||||

|
||||

|
||||

|
||||
top
|
||||

|
||||
All levels
|
||||

|
||||
Group similar
|
||||

|
||||
|
||||
angular.js:18104 Uncaught RangeError: Maximum call stack size exceeded
|
||||
at Scope.$apply (angular.js:18104)
|
||||
at Scope.$delegate.$safeApply (safeApply.js?2440:19)
|
||||
at Object.dragEnd [as end] (MoveUnits.js?949c:183)
|
||||
at eval (DnDLib.js?f6dd:104)
|
||||
at fireUntilImmediateStopped (interact.js?f3bb:47)
|
||||
at Eventable.fire (interact.js?f3bb:65)
|
||||
at Interactable.fire (interact.js?f3bb:517)
|
||||
at firePrepared (interact.js?f3bb:1376)
|
||||
at eval (interact.js?f3bb:1368)
|
||||
at Signals.fire (interact.js?f3bb:5768)
|
||||
|
||||
interact.js?f3bb:1177 [Violation] 'pointerup' handler took 617ms
|
||||
|
||||
angular.js:18249 Uncaught RangeError: Maximum call stack size exceeded
|
||||
at Scope.$emit (angular.js:18249)
|
||||
at Scope.$rootScope.(anonymous function) [as $emit] (webpack-internal:///161:338:23)
|
||||
at Object.dragEnd [as end] (MoveUnits.js?949c:181)
|
||||
at eval (DnDLib.js?f6dd:104)
|
||||
at fireUntilImmediateStopped (interact.js?f3bb:47)
|
||||
at Eventable.fire (interact.js?f3bb:65)
|
||||
at Interactable.fire (interact.js?f3bb:517)
|
||||
at firePrepared (interact.js?f3bb:1376)
|
||||
at eval (interact.js?f3bb:1368)
|
||||
at Signals.fire (interact.js?f3bb:5768)
|
||||
|
||||
jquery.js:4544 [Violation] 'mouseup' handler took 392ms
|
||||
|
||||
angular.js:14199 Error: [$rootScope:inprog] $digest already in progress
|
||||
|
||||
http://errors.angularjs.org/1.5.11/$rootScope/inprog?p0=NaNigest
|
||||
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js:68:12
|
||||
at beginPhase (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js:18357:15)
|
||||
at Scope.$apply (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js:18092:11)
|
||||
at HTMLDivElement.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js:26597:23)
|
||||
at HTMLDivElement.dispatch (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js:4737:27)
|
||||
at HTMLDivElement.elemData.handle (https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js:4549:28)
|
||||
angular.js:14199 Error: [$rootScope:inprog] $digest already in progress
|
||||
http://errors.angularjs.org/1.5.11/$rootScope/inprog?p0=NaNigest
|
||||
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js:68:12
|
||||
at beginPhase (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js:18357:15)
|
||||
at Scope.$digest (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.js:17785:9)
|
||||
at Scope.$apply (https://cdnjs.cloudflare.com/ajax/libs/a
|
||||
12
|
||||
[Violation] 'pointermove' handler took <N>ms
|
||||
angular.js:18249 Uncaught RangeError: Maximum call stack size exceeded
|
||||
at Scope.$emit (angular.js:18249)
|
||||
at Scope.$rootScope.(anonymous function) [as $emit] (webpack-internal:///161:338:23)
|
||||
at Object.dragEnd [as end] (MoveUnits.js?949c:181)
|
||||
at eval (DnDLib.js?f6dd:104)
|
||||
at fireUntilImmediateStopped (interact.js?f3bb:47)
|
||||
at Eventable.fire (interact.js?f3bb:65)
|
||||
at Interactable.fire (interact.js?f3bb:517)
|
||||
at firePrepared (interact.js?f3bb:1376)
|
||||
at eval (interact.js?f3bb:1368)
|
||||
at Signals.fire (interact.js?f3bb:5768)
|
||||
6
|
||||
[Violation] 'pointerup' handler took <N>ms
|
||||
angular.js:18249 Uncaught RangeError: Maximum call stack size exceeded
|
||||
at Scope.$emit (angular.js:18249)
|
||||
at Scope.$rootScope.(anonymous function) [as $emit] (webpack-internal:///161:338:23)
|
||||
at Object.dragEnd [as end] (MoveUnits.js?949c:181)
|
||||
at eval (DnDLib.js?f6dd:104)
|
||||
at fireUntilImmediateStopped (interact.js?f3bb:47)
|
||||
at Eventable.fire (interact.js?f3bb:65)
|
||||
at Interactable.fire (interact.js?f3bb:517)
|
||||
at firePrepared (interact.js?f3bb:1376)
|
||||
at eval (interact.js?f3bb:1368)
|
||||
at Signals.fire (interact.js?f3bb:5768)
|
||||
6
|
||||
[Violation] 'mouseup' handler took <N>ms
|
||||
[Violation] Forced reflow while executing JavaScript took 34ms
|
||||
jquery.js:5487 Uncaught RangeError: Maximum call stack size exceeded
|
||||
at HTMLLIElement.<anonymous> (jquery.js:5487)
|
||||
at jquery.js:142
|
||||
at Function.map (jquery.js:452)
|
||||
at jQuery.fn.init.map (jquery.js:141)
|
||||
at jQuery.fn.init.clone (jquery.js:5486)
|
||||
at Object.removeGhost (GhostingService.js?882c:52)
|
||||
at Object.out (DropAreas.js?510e:307)
|
||||
at eval (DnDLib.js?f6dd:50)
|
||||
at fireUntilImmediateStopped (interact.js?f3bb:47)
|
||||
at Eventable.fire (interact.js?f3bb:65)
|
||||
angular.js:18249 Uncaught RangeError: Maximum call stack size exceeded
|
||||
at Scope.$emit (angular.js:18249)
|
||||
at Scope.$rootScope.(anonymous function) [as $emit] (webpack-internal:///161:338:23)
|
||||
at Object.dragEnd [as end] (MoveUnits.js?949c:181)
|
||||
at eval (DnDLib.js?f6dd:104)
|
||||
at fireUntilImmediateStopped (interact.js?f3bb:47)
|
||||
at Eventable.fire (interact.js?f3bb:65)
|
||||
at Interactable.fire (interact.js?f3bb:517)
|
||||
at firePrepared (interact.js?f3bb:1376)
|
||||
at eval (interact.js?f3bb:1368)
|
||||
at Signals.fire (interact.js?f3bb:5768)
|
||||
angular.js:18104 Uncaught RangeError: Maximum call stack size exceeded
|
||||
at Scope.$apply (angular.js:18104)
|
||||
at Scope.$delegate.$safeApply (safeApply.js?2440:19)
|
||||
at Object.dragEnd [as end] (MoveUnits.js?949c:183)
|
||||
at eval (DnDLib.js?f6dd:104)
|
||||
at fireUntilImmediateStopped (interact.js?f3bb:47)
|
||||
at Eventable.fire (interact.js?f3bb:65)
|
||||
at Interactable.fire (interact.js?f3bb:517)
|
||||
at firePrepared (interact.js?f3bb:1376)
|
||||
at eval (interact.js?f3bb:1368)
|
||||
at Signals.fire (interact.js?f3bb:5768)
|
||||
angular.js:18249 Uncaught RangeError: Maximum call stack size exceeded
|
||||
at Scope.$emit (angular.js:18249)
|
||||
at Scope.$rootScope.(anonymous function) [as $emit] (webpack-internal:///161:338:23)
|
||||
at Object.dragEnd [as end] (MoveUnits.js?949c:181)
|
||||
at eval (DnDLib.js?f6dd:104)
|
||||
at fireUntilImmediateStopped (interact.js?f3bb:47)
|
||||
at Eventable.fire (interact.js?f3bb:65)
|
||||
at Interactable.fire (interact.js?f3bb:517)
|
||||
at firePrepared (interact.js?f3bb:1376)
|
||||
at eval (interact.js?f3bb:1368)
|
||||
at Signals.fire (interact.js?f3bb:5768)
|
||||
3
nodemon.json
Normal file
3
nodemon.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"ext": "js,ejs"
|
||||
}
|
||||
14270
package-lock.json
generated
Normal file
14270
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
55
package.json
Normal file
55
package.json
Normal file
@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "stack-trace-mapper",
|
||||
"version": "0.0.1",
|
||||
"description": "",
|
||||
"main": "server/server.js",
|
||||
"scripts": {
|
||||
"lint": "eslint .",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"webpack": "webpack"
|
||||
},
|
||||
"author": "Linus Miller <lohfu@lohfu.io> (https://lohfu.io/)",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@bmp/console": "0.0.5",
|
||||
"@bmp/highlight-stack": "0.0.2",
|
||||
"body-parser": "^1.18.3",
|
||||
"classnames": "^2.2.5",
|
||||
"ejs": "^2.6.1",
|
||||
"express": "^4.16.3",
|
||||
"lowline": "^0.2.2",
|
||||
"morgan": "^1.9.0",
|
||||
"multer": "^1.3.0",
|
||||
"pg": "^7.4.3",
|
||||
"react": "^16.4.0",
|
||||
"react-dom": "^16.4.0",
|
||||
"react-router": "^4.2.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"source-map": "^0.7.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.0.0-beta.49",
|
||||
"@babel/core": "^7.0.0-beta.49",
|
||||
"@babel/plugin-transform-react-jsx": "^7.0.0-beta.49",
|
||||
"@babel/preset-env": "^7.0.0-beta.49",
|
||||
"autoprefixer": "^8.5.1",
|
||||
"babel-loader": "^8.0.0-beta.2",
|
||||
"css-loader": "^0.28.11",
|
||||
"eslint": "^4.19.1",
|
||||
"eslint-config-standard": "^11.0.0",
|
||||
"eslint-config-standard-react": "^6.0.0",
|
||||
"eslint-plugin-import": "^2.12.0",
|
||||
"eslint-plugin-node": "^6.0.1",
|
||||
"eslint-plugin-promise": "^3.8.0",
|
||||
"eslint-plugin-react": "^7.8.2",
|
||||
"eslint-plugin-standard": "^3.1.0",
|
||||
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
||||
"postcss-color-function": "^4.0.1",
|
||||
"postcss-loader": "^2.1.5",
|
||||
"precss": "^3.1.2",
|
||||
"style-loader": "^0.21.0",
|
||||
"webpack": "^4.9.1",
|
||||
"webpack-cli": "^2.1.4",
|
||||
"webpack-dev-middleware": "^3.1.3"
|
||||
}
|
||||
}
|
||||
25
postcss.config.js
Normal file
25
postcss.config.js
Normal file
@ -0,0 +1,25 @@
|
||||
'use strict'
|
||||
|
||||
const env = process.env.NODE_ENV || 'development'
|
||||
|
||||
const config = {
|
||||
development: {
|
||||
plugins: {
|
||||
precss: {},
|
||||
autoprefixer: {},
|
||||
'postcss-color-function': {},
|
||||
},
|
||||
},
|
||||
|
||||
production: {
|
||||
plugins: {
|
||||
precss: {},
|
||||
autoprefixer: {},
|
||||
cssnano: {
|
||||
preset: 'default',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = config[env]
|
||||
13
server/config/postgres.js
Normal file
13
server/config/postgres.js
Normal file
@ -0,0 +1,13 @@
|
||||
'use strict'
|
||||
|
||||
module.exports = {
|
||||
database: 'stack_trace_mapper', // process.env.NODE_ENV var: PGDATABASE
|
||||
user: 'stack_trace_mapper',
|
||||
password: 'thesesourcemapsaregoingtochangetheworld',
|
||||
// host: 'hq.bitmill.co', // Server hosting the postgres database
|
||||
host: 'localhost', // Server hosting the postgres database
|
||||
// port: 6543, // process.env.NODE_ENV var: PGPORT
|
||||
port: 5432, // process.env.NODE_ENV var: PGPORT
|
||||
max: 10, // max number of clients in the pool
|
||||
idleTimeoutMillis: 30000, // how long a client is allowed to remain idle before being closed
|
||||
}
|
||||
12
server/db.js
Normal file
12
server/db.js
Normal file
@ -0,0 +1,12 @@
|
||||
'use strict'
|
||||
|
||||
const { Pool } = require('pg')
|
||||
const config = require('./config/postgres')
|
||||
|
||||
const pool = new Pool(config)
|
||||
|
||||
module.exports = {
|
||||
query: (text, params, callback) => {
|
||||
return pool.query(text, params, callback)
|
||||
},
|
||||
}
|
||||
41
server/handlers/source-maps.js
Normal file
41
server/handlers/source-maps.js
Normal file
@ -0,0 +1,41 @@
|
||||
'use strict'
|
||||
|
||||
const db = require('../db')
|
||||
|
||||
function create (sourceMap) {
|
||||
return db.query(
|
||||
'INSERT INTO source_maps(application, version, ui_platform, content) VALUES($1, $2, $3, $4) RETURNING *;',
|
||||
[ sourceMap.application, sourceMap.version, sourceMap.uiPlatform, sourceMap.content ]
|
||||
).then((result) => result.rows[0])
|
||||
}
|
||||
|
||||
function listAll () {
|
||||
return db
|
||||
.query('SELECT id, application, version, ui_platform as "uiPlatform", created_at as "createdAt" FROM source_maps;')
|
||||
.then((result) => result.rows)
|
||||
}
|
||||
|
||||
function getAll () {
|
||||
return db.query('SELECT * FROM source_maps').then((result) => result.rows)
|
||||
}
|
||||
|
||||
function get (sourceMap) {
|
||||
const values = [ sourceMap.application, sourceMap.version, sourceMap.uiPlatform ]
|
||||
|
||||
return db
|
||||
.query('SELECT * FROM source_maps WHERE application = $1 AND version = $2 AND ui_platform = $3', values)
|
||||
.then((result) => {
|
||||
if (result.rowCount <= 0) {
|
||||
throw new Error('No source map found')
|
||||
}
|
||||
|
||||
return result.rows[0]
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
create,
|
||||
get,
|
||||
getAll,
|
||||
listAll,
|
||||
}
|
||||
9
server/middleware/multer.js
Normal file
9
server/middleware/multer.js
Normal file
@ -0,0 +1,9 @@
|
||||
'use strict'
|
||||
|
||||
const multer = require('multer')
|
||||
|
||||
const memoryStorage = multer.memoryStorage()
|
||||
|
||||
const upload = multer({ storage: memoryStorage })
|
||||
|
||||
module.exports = upload
|
||||
62
server/middleware/source-maps.js
Normal file
62
server/middleware/source-maps.js
Normal file
@ -0,0 +1,62 @@
|
||||
'use strict'
|
||||
|
||||
const _ = require('lodash')
|
||||
const remapper = require('../util/remap')
|
||||
const handlers = require('../handlers/source-maps')
|
||||
|
||||
const { SourceMapConsumer } = require('source-map')
|
||||
|
||||
function create (req, res) {
|
||||
const sourceMap = _.mapKeys(req.body, (val, key) => _.camelCase(key))
|
||||
|
||||
if (!sourceMap.content && req.file) {
|
||||
sourceMap.content = req.file.buffer.toString('utf8')
|
||||
}
|
||||
|
||||
console.log(sourceMap)
|
||||
|
||||
handlers.create(sourceMap).then(() => {
|
||||
res.render('index')
|
||||
})
|
||||
}
|
||||
|
||||
function getOne (req, res, next) {
|
||||
next()
|
||||
}
|
||||
|
||||
function listAll (req, res, next) {
|
||||
handlers.listAll().then((sourceMaps) => {
|
||||
res.locals.sourceMaps = sourceMaps
|
||||
|
||||
res.json(sourceMaps)
|
||||
}).catch(next)
|
||||
}
|
||||
|
||||
function remap (req, res, next) {
|
||||
const body = _.mapKeys(req.body, (val, key) => _.camelCase(key))
|
||||
|
||||
const promise = body.content ? Promise.resolve(body) : handlers.get(body)
|
||||
|
||||
promise
|
||||
.then((sourceMap) => new SourceMapConsumer(sourceMap.content))
|
||||
.then((consumer) => {
|
||||
const remapped = remapper(body.stack, consumer)
|
||||
|
||||
consumer.destroy()
|
||||
|
||||
if (req.accepts([ 'json', 'html' ]) === 'json') {
|
||||
res.json(remapped)
|
||||
} else {
|
||||
res.locals.stack = remapped
|
||||
res.render('remap-result')
|
||||
}
|
||||
})
|
||||
.catch(next)
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
remap,
|
||||
create,
|
||||
getOne,
|
||||
listAll,
|
||||
}
|
||||
24
server/routes.js
Normal file
24
server/routes.js
Normal file
@ -0,0 +1,24 @@
|
||||
'use strict'
|
||||
|
||||
const upload = require('./middleware/multer')
|
||||
const sourceMaps = require('./middleware/source-maps')
|
||||
|
||||
module.exports = (server) => {
|
||||
server.get('/:page?', (req, res) => {
|
||||
res.render('index')
|
||||
})
|
||||
|
||||
// server.get('/upload', sourceMaps.listAll, (req, res) => {
|
||||
// res.render('upload')
|
||||
// })
|
||||
|
||||
// server.get('/remap', sourceMaps.listAll, (req, res) => {
|
||||
// res.render('remap')
|
||||
// })
|
||||
|
||||
server.get('/api/source-maps', sourceMaps.listAll)
|
||||
server.post('/api/source-maps', upload.single('map'), sourceMaps.create)
|
||||
server.get('/api/source-maps/:id', sourceMaps.getOne)
|
||||
|
||||
server.post('/api/remap', sourceMaps.remap)
|
||||
}
|
||||
61
server/server.js
Normal file
61
server/server.js
Normal file
@ -0,0 +1,61 @@
|
||||
'use strict'
|
||||
|
||||
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
|
||||
|
||||
// modules > native
|
||||
const path = require('path')
|
||||
|
||||
// modules > 3rd party
|
||||
const express = require('express')
|
||||
const bodyParser = require('body-parser')
|
||||
const chalk = require('chalk')
|
||||
const highlightStack = require('@bmp/highlight-stack')
|
||||
|
||||
process.on('uncaughtException', (err) => {
|
||||
console.error(chalk.red('UNCAUGHT EXCEPTION'))
|
||||
if (err.stack) {
|
||||
console.error(highlightStack(err.stack))
|
||||
} else {
|
||||
console.error(err)
|
||||
}
|
||||
process.exit(1)
|
||||
})
|
||||
|
||||
const server = express()
|
||||
|
||||
// set template engine
|
||||
server.set('view engine', 'ejs')
|
||||
server.set('views', path.join(__dirname, 'templates'))
|
||||
server.use('/', express.static('public'))
|
||||
|
||||
// set up console logs in dev mode
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
require('@bmp/console')({ log: true, error: true, dir: true })
|
||||
|
||||
const morgan = require('morgan')
|
||||
|
||||
server.use(morgan('dev'))
|
||||
|
||||
const webpackMiddleware = require('webpack-dev-middleware')
|
||||
const webpack = require('webpack')
|
||||
const webpackConfig = require('../webpack.config')
|
||||
|
||||
server.use(webpackMiddleware(webpack(webpackConfig)))
|
||||
}
|
||||
|
||||
server.use(bodyParser.json())
|
||||
server.use(bodyParser.urlencoded({ extended: true }))
|
||||
|
||||
// server.use('/', (req, res, next) => {
|
||||
// console.log('hello')
|
||||
// res.send('<h1>Hello</h1>')
|
||||
// })
|
||||
|
||||
const port = process.env.port || 1337
|
||||
|
||||
console.log(path.resolve(__dirname, '../'))
|
||||
require('./routes')(server)
|
||||
|
||||
server.listen(port, () => {
|
||||
console.info(`[${chalk.cyan('INIT')}] HTTP Server listening on port ${chalk.magenta(port)} (${chalk.yellow(server.get('env'))})`)
|
||||
})
|
||||
4
server/templates/footer.ejs
Normal file
4
server/templates/footer.ejs
Normal file
@ -0,0 +1,4 @@
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
14
server/templates/header.ejs
Normal file
14
server/templates/header.ejs
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Cybercom Sourcemap Magic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/css/main.css" />
|
||||
<!-- <script src="/js/app.mjs" type="module"></script> -->
|
||||
<!-- <script src="/bundle.js" type="module"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
21
server/templates/index.ejs
Normal file
21
server/templates/index.ejs
Normal file
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Cybercom Stack Trace Mapper</title>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="/css/bundle.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id='app'></div>
|
||||
|
||||
<script src='/js/bundle.js'></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
5
server/templates/remap-result.ejs
Normal file
5
server/templates/remap-result.ejs
Normal file
@ -0,0 +1,5 @@
|
||||
<h1>Remapped</h1>
|
||||
|
||||
<pre class='mapped-stack'>
|
||||
<%- stack.join('\n') %>
|
||||
</pre>
|
||||
35
server/templates/remap.ejs
Normal file
35
server/templates/remap.ejs
Normal file
@ -0,0 +1,35 @@
|
||||
<% include header %>
|
||||
|
||||
<div class="remap page">
|
||||
<h1>Remap Stack Trace</h1>
|
||||
|
||||
<h2>Original</h2>
|
||||
|
||||
<form action="/api/remap" method="POST">
|
||||
<div class="row">
|
||||
<label>Application</label>
|
||||
<input type="text" name="application" placeholder="Application" value="algot" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>UI Platform</label>
|
||||
<input type="text" name="ui_platform" placeholder="UI Platform" value="IRW" />
|
||||
</div class="row">
|
||||
<div class="row">
|
||||
<label>Version</label>
|
||||
<input type="text" name="version" placeholder="Version" value="4.3.0-alpha.0" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>Stack</label>
|
||||
<textarea name="stack"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">Apply</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<pre class='original-stack'></pre>
|
||||
|
||||
<h2>Remapped</h2>
|
||||
|
||||
<pre class='remapped-stack'></pre>
|
||||
</div>
|
||||
40
server/templates/upload.ejs
Normal file
40
server/templates/upload.ejs
Normal file
@ -0,0 +1,40 @@
|
||||
<% include header %>
|
||||
|
||||
<h2>Upload a source map</h2>
|
||||
|
||||
<div class="upload page">
|
||||
<form action='/api/upload' method='POST' enctype='multipart/form-data'>
|
||||
<div>
|
||||
<label for='application'>Application</label>
|
||||
<input type='text' name='application' placeholder='Application' value='algot' />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for='application'>UI</label>
|
||||
<input type='text' name='uiPlatform' placeholder='UI' />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for='application'>Version</label>
|
||||
<input type='text' name='version' placeholder='Version' value='4.3.0' />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type='file' name='map' required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type='submit'>Upload</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="source-map-list">
|
||||
<ul>
|
||||
<% for (const sourceMap of sourceMaps) { %>
|
||||
<li><%- sourceMap.application %> <%- sourceMap.version %> <%- sourceMap.uiPlatform %></li>
|
||||
<% } %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/upload.mjs"></script>
|
||||
<% include footer %>
|
||||
62
server/test-convert.js
Normal file
62
server/test-convert.js
Normal file
@ -0,0 +1,62 @@
|
||||
'use strict'
|
||||
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
|
||||
// const sourceMap = require('source-map');
|
||||
const { SourceMapConsumer } = require('source-map')
|
||||
const convert = require('./convert')
|
||||
|
||||
// const map = fs.readFileSync(path.join(__dirname, 'algot-irw/isa.js.map'), 'utf8');
|
||||
const map = fs.readFileSync(path.join(__dirname, 'algot-irw/isa.js.map'), 'utf8')
|
||||
|
||||
// console.log(map);
|
||||
|
||||
const str = `
|
||||
Error
|
||||
at Object._ [as removeGhost] (isa.js:120)
|
||||
at Object.i [as out] (isa.js:120)
|
||||
at isa.js:120
|
||||
at r (isa.js:24)
|
||||
at e.fire (isa.js:24)
|
||||
at e.fire (isa.js:24)
|
||||
at l (isa.js:24)
|
||||
at isa.js:24
|
||||
at e.fire (isa.js:24)
|
||||
at e.doMove (isa.js:24)
|
||||
`
|
||||
|
||||
const chrome = `Error: Testing error
|
||||
at Object.y [as addGhost] (http://localhost:8080/algot/irw/js/isa.js:120:377375)
|
||||
at Object.n [as over] (http://localhost:8080/algot/irw/js/isa.js:120:263605)
|
||||
at http://localhost:8080/algot/irw/js/isa.js:120:373131
|
||||
at r (http://localhost:8080/algot/irw/js/isa.js:24:111023)
|
||||
at e.fire (http://localhost:8080/algot/irw/js/isa.js:24:111215)
|
||||
at e.fire (http://localhost:8080/algot/irw/js/isa.js:24:116563)
|
||||
at l (http://localhost:8080/algot/irw/js/isa.js:24:131058)
|
||||
at http://localhost:8080/algot/irw/js/isa.js:24:132002
|
||||
at e.fire (http://localhost:8080/algot/irw/js/isa.js:24:178230)
|
||||
at e.doMove (http://localhost:8080/algot/irw/js/isa.js:24:123026)
|
||||
`
|
||||
|
||||
const firefox = `
|
||||
y@http://localhost:8080/algot/irw/js/isa.js:120:377375
|
||||
n@http://localhost:8080/algot/irw/js/isa.js:120:263603
|
||||
r/<@http://localhost:8080/algot/irw/js/isa.js:120:373129
|
||||
r@http://localhost:8080/algot/irw/js/isa.js:24:111023
|
||||
[2]</a</e.prototype.fire@http://localhost:8080/algot/irw/js/isa.js:24:111215
|
||||
[4]</M</e.prototype.fire@http://localhost:8080/algot/irw/js/isa.js:24:116551
|
||||
l@http://localhost:8080/algot/irw/js/isa.js:24:131056
|
||||
[8]</<@http://localhost:8080/algot/irw/js/isa.js:24:132002
|
||||
[34]</r</e.prototype.fire@http://localhost:8080/algot/irw/js/isa.js:24:178230
|
||||
[5]</v</e.prototype.doMove@http://localhost:8080/algot/irw/js/isa.js:24:123024
|
||||
[5]</v</e.prototype.pointerMove@http://localhost:8080/algot/irw/js/isa.js:24:122745
|
||||
r/<@http://localhost:8080/algot/irw/js/isa.js:24:120083`
|
||||
|
||||
// const chrome = 'Error: Testing error at Object.y [as addGhost] (http://localhost:8080/algot/irw/js/isa.js:120:377375) at Object.n [as over] (http://localhost:8080/algot/irw/js/isa.js:120:263605) at http://localhost:8080/algot/irw/js/isa.js:120:373131 at r (http://localhost:8080/algot/irw/js/isa.js:24:111023) at e.fire (http://localhost:8080/algot/irw/js/isa.js:24:111215) at e.fire (http://localhost:8080/algot/irw/js/isa.js:24:116563) at l (http://localhost:8080/algot/irw/js/isa.js:24:131058) at http://localhost:8080/algot/irw/js/isa.js:24:132002 at e.fire (http://localhost:8080/algot/irw/js/isa.js:24:178230) at e.doMove (http://localhost:8080/algot/irw/js/isa.js:24:123026)'
|
||||
|
||||
SourceMapConsumer.with(map, null, (consumer) => {
|
||||
console.log(convert(chrome, consumer))
|
||||
console.log('\n\n\n')
|
||||
console.log(convert(firefox, consumer))
|
||||
})
|
||||
84
server/util/remap.js
Normal file
84
server/util/remap.js
Normal file
@ -0,0 +1,84 @@
|
||||
'use strict'
|
||||
|
||||
const { SourceMapConsumer } = require('source-map')
|
||||
|
||||
module.exports = function stackTraceMapper (stack, map) {
|
||||
if (!(map instanceof SourceMapConsumer)) {
|
||||
throw new Error('map is not a consumer')
|
||||
}
|
||||
|
||||
const setups = [
|
||||
{
|
||||
// settings for Chrome, Edge and IE (Plus?)
|
||||
regex: /\s+at(?:\s+([^\s]+))?\s\(?([/a-z0-9:.-]+):([0-9]+):([0-9]+)/,
|
||||
// regex: /\s+at(?:\s+([^)]+))?\s\(?([/a-z0-9:.-]+):([0-9]+):([0-9]+)/,
|
||||
skip: 1,
|
||||
split: /\n?(?= at )/,
|
||||
},
|
||||
|
||||
{
|
||||
// settings for Firefox and Safari
|
||||
regex: /([a-zA-Z0-9]*)@(.*):([0-9]+):([0-9]+)/,
|
||||
skip: 0,
|
||||
split: /\s+/,
|
||||
},
|
||||
]
|
||||
|
||||
const setup = setups.find((setup) => {
|
||||
return setup.regex.test(stack)
|
||||
})
|
||||
|
||||
if (!setup) {
|
||||
throw new Error('Stack trace is not recognised')
|
||||
}
|
||||
|
||||
const split = stack.trim().split(setup.split)
|
||||
// TODO whether the error name and similar preludes the stack varies between browsers perhaps we should create one
|
||||
const pre = split.slice(0, setup.skip)
|
||||
console.log('split', split)
|
||||
console.log('pre', pre)
|
||||
|
||||
const lines = split.slice(setup.skip).map((source) => {
|
||||
// TODO handle lines that have not matched
|
||||
const match = source.match(setup.regex)
|
||||
|
||||
if (!match) {
|
||||
return { source }
|
||||
}
|
||||
|
||||
const [ , fnc, file, line, column ] = match
|
||||
|
||||
return { fnc, file, line: parseInt(line), column: parseInt(column), source }
|
||||
})
|
||||
|
||||
const originalLines = lines.map((obj) => {
|
||||
if (obj.line) {
|
||||
return map.originalPositionFor({ line: obj.line, column: obj.column })
|
||||
}
|
||||
|
||||
return obj
|
||||
})
|
||||
|
||||
// need to do research as to why, but the original line objects returned
|
||||
// contain the function call names are shifted one line compared with
|
||||
// the sourcemapped stack printed in chrome dev tools
|
||||
const adjustedLines = originalLines.map((obj, index, arr) => {
|
||||
if (obj.line) {
|
||||
const prev = arr[index + 1]
|
||||
|
||||
obj.name = (prev && prev.name) || undefined
|
||||
}
|
||||
|
||||
return obj
|
||||
})
|
||||
|
||||
return pre.concat(adjustedLines.map(formatLine))
|
||||
}
|
||||
|
||||
function formatLine ({ source, line, column, name = '(unknown)' }) {
|
||||
if (!line || !column) {
|
||||
return ` ${source}`
|
||||
}
|
||||
|
||||
return ` at ${name} (${source}:${line}:${column})`
|
||||
}
|
||||
12
src/.eslintrc
Normal file
12
src/.eslintrc
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"extends": [
|
||||
"../../.eslintrc",
|
||||
"standard-react"
|
||||
],
|
||||
|
||||
"globals": {
|
||||
"fetch": true,
|
||||
"google": true,
|
||||
"INITIAL_CONTEXT": true
|
||||
}
|
||||
}
|
||||
39
src/components/Layout.jsx
Normal file
39
src/components/Layout.jsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { get } from 'lowline'
|
||||
|
||||
import Navigation from './Navigation'
|
||||
|
||||
class Layout extends React.Component {
|
||||
componentDidUpdate () {
|
||||
console.log('this did update')
|
||||
const { location } = this.props
|
||||
|
||||
const offset = get(window.history, 'state.scrollTop') || 0
|
||||
|
||||
window.scrollTo(0, offset)
|
||||
}
|
||||
|
||||
render () {
|
||||
// const { page, navigation, location, organization, children } = this.props
|
||||
const { routes, children } = this.props
|
||||
|
||||
return (
|
||||
<div className='container'>
|
||||
<header>
|
||||
<h1><a href='/'>Stack Trace Mapper</a></h1>
|
||||
|
||||
<Navigation routes={routes} />
|
||||
</header>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Layout.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
}
|
||||
|
||||
export default Layout
|
||||
88
src/components/Navigation.jsx
Normal file
88
src/components/Navigation.jsx
Normal file
@ -0,0 +1,88 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import classNames from 'classnames'
|
||||
import { bindAll } from 'lowline'
|
||||
|
||||
import NavigationItem from './NavigationItem'
|
||||
|
||||
class Navigation extends React.Component {
|
||||
constructor (options = {}) {
|
||||
super(options)
|
||||
|
||||
this.state = { visible: false }
|
||||
|
||||
bindAll(this, ['hide', 'toggle'])
|
||||
}
|
||||
|
||||
// componentWillReceiveProps ({ location }) {
|
||||
// if (this.props.location.pathname !== location.pathname && this.state.visible) {
|
||||
// this.setState({
|
||||
// visible: false,
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
|
||||
// shouldComponentUpdate ({ location }, nextState) {
|
||||
// return nextState.visible !== this.state.visible || this.props.location.pathname !== location.pathname
|
||||
// }
|
||||
|
||||
// componentDidUpdate ({ location }) {
|
||||
// if (this.props.location !== location) {
|
||||
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
toggle () {
|
||||
if (!this.state.visible) {
|
||||
this.show()
|
||||
} else {
|
||||
this.hide()
|
||||
}
|
||||
}
|
||||
|
||||
show () {
|
||||
if (!this.state.visible) {
|
||||
document.body.classList.add('shift')
|
||||
|
||||
this.setState({
|
||||
visible: true,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
hide () {
|
||||
if (this.state.visible) {
|
||||
document.body.classList.remove('shift')
|
||||
|
||||
this.setState({
|
||||
visible: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { routes, location } = this.props
|
||||
const { visible } = this.state
|
||||
|
||||
return (
|
||||
<nav className={classNames({visible})}>
|
||||
<button onClick={this.toggle}>
|
||||
<div className='bar' />
|
||||
<div className='bar' />
|
||||
<div className='bar' />
|
||||
</button>
|
||||
<ul onClick={this.hide}>
|
||||
{routes && routes.map((route) => <NavigationItem key={route.name} location={location} {...route} />)}
|
||||
</ul>
|
||||
{this.state.visible && <div onClick={this.hide} className='cover' />}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Navigation.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
}
|
||||
|
||||
export default Navigation
|
||||
12
src/components/NavigationItem.jsx
Normal file
12
src/components/NavigationItem.jsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react'
|
||||
import classNames from 'classnames'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
const NavigationItem = ({ location, name, title, path, routes }) => (
|
||||
<li className={classNames({ [name]: true, current: location && (location.pathname === path || (path !== '/' && location.pathname.startsWith(path))) })}>
|
||||
<Link to={path}><span>{title}</span></Link>
|
||||
{routes && <ul>{routes.map((route) => route.nav !== false && <NavigationItem key={route.name} location={location} path={path + route.path} {...route} />)}</ul>}
|
||||
</li>
|
||||
)
|
||||
|
||||
export default NavigationItem
|
||||
10
src/components/Remap.jsx
Normal file
10
src/components/Remap.jsx
Normal file
@ -0,0 +1,10 @@
|
||||
import React from 'react'
|
||||
import RemapForm from './RemapForm'
|
||||
|
||||
export default () => (
|
||||
<div className='remap page'>
|
||||
<h1>Remap Stack Trace</h1>
|
||||
|
||||
<RemapForm />
|
||||
</div>
|
||||
)
|
||||
159
src/components/RemapForm.jsx
Normal file
159
src/components/RemapForm.jsx
Normal file
@ -0,0 +1,159 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { bindAll } from 'lowline'
|
||||
|
||||
const split = /\n?(?= at )/
|
||||
|
||||
const preference = [ 'irw', 'mobile', 'nwp', 'kiosk', 'm2' ]
|
||||
|
||||
export default class RemapForm extends React.Component {
|
||||
constructor () {
|
||||
super()
|
||||
|
||||
this.form = React.createRef()
|
||||
|
||||
bindAll(this, [ 'onSubmit', 'selectApplication', 'selectUiPlatform' ])
|
||||
|
||||
this.state = {
|
||||
error: false,
|
||||
success: false,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
fetch('/api/source-maps')
|
||||
.then((res) => res.json())
|
||||
.then((sourceMaps) => {
|
||||
this.setState({ sourceMaps })
|
||||
|
||||
this.applications = {};
|
||||
|
||||
sourceMaps.forEach((sourceMap) => {
|
||||
if (!this.applications[sourceMap.application]) {
|
||||
this.applications[sourceMap.application] = {};
|
||||
}
|
||||
|
||||
if (!this.applications[sourceMap.application][sourceMap.uiPlatform]) {
|
||||
this.applications[sourceMap.application][sourceMap.uiPlatform] = [];
|
||||
}
|
||||
|
||||
this.applications[sourceMap.application][sourceMap.uiPlatform].push(sourceMap.version)
|
||||
|
||||
})
|
||||
|
||||
const applications = Object.keys(this.applications);
|
||||
|
||||
this.setState({
|
||||
applications,
|
||||
})
|
||||
|
||||
this.selectApplication(applications[0])
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
onSubmit (e) {
|
||||
e.preventDefault()
|
||||
|
||||
const data = {}
|
||||
|
||||
for (let el of this.form.current.elements) {
|
||||
if (el.name) {
|
||||
data[el.name] = el.value
|
||||
}
|
||||
}
|
||||
|
||||
fetch('/api/remap', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
accepts: 'application/json',
|
||||
'content-type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
this.setState({
|
||||
success: true,
|
||||
error: false,
|
||||
original: data.stack.split(split).join('\n'),
|
||||
mapped: res.join('\n'),
|
||||
})
|
||||
})
|
||||
.catch((res) => {
|
||||
this.setState({
|
||||
success: false,
|
||||
error: true,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
selectApplication (value) {
|
||||
if (value.target && value.target.value) {
|
||||
value = value.target.value
|
||||
}
|
||||
|
||||
// const uiPlatforms = Object.keys(this.applications[value])
|
||||
|
||||
const application = this.applications[value]
|
||||
this.setState({
|
||||
application,
|
||||
// uiPlatforms,
|
||||
})
|
||||
|
||||
this.selectUiPlatform(Object.keys(application)[0])
|
||||
}
|
||||
|
||||
selectUiPlatform (value) {
|
||||
if (value.target && value.target.value) {
|
||||
value = value.target.value
|
||||
}
|
||||
|
||||
console.log(this.state.application)
|
||||
|
||||
this.setState({
|
||||
versions: this.state.application[value]
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
const { applications, application, uiPlatform, uiPlatforms, versions, error, success, original, mapped } = this.state
|
||||
|
||||
return (
|
||||
<div className="remap-form">
|
||||
<form ref={this.form} action='/api/remap' method='POST' onSubmit={this.onSubmit}>
|
||||
<div className='row'>
|
||||
<label>Application</label>
|
||||
<select name='application' onChange={this.selectApplication}>
|
||||
{applications && applications.map((application) => <option key={application} value={application}>{application}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className='row'>
|
||||
<label>UI Platform</label>
|
||||
<select name='ui_platform' onChange={this.selectUiPlatform}>
|
||||
{application && Object.keys(application).map((ui) => <option key={ui} value={ui}>{ui}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className='row'>
|
||||
<label>Version</label>
|
||||
<select name='version'>
|
||||
{versions && versions.map((version) => <option key={version} value={version}>{version}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className='row'>
|
||||
<label>Stack</label>
|
||||
<textarea name='stack' />
|
||||
</div>
|
||||
<div>
|
||||
<button type='submit'>Apply</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className='output'>
|
||||
{original && <div class='output-original'><h2>Original</h2><pre>{original}</pre></div>}
|
||||
{mapped && <div class='output-mapped'><h2>Mapped</h2><pre>{mapped}</pre></div>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
9
src/components/Start.jsx
Normal file
9
src/components/Start.jsx
Normal file
@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
export default () => (
|
||||
<div className='start'>
|
||||
<h1>Welcome</h1>
|
||||
|
||||
<p>To the most legit website in the world. Besides mapping stack traces you can also buy totally ok drugs.</p>
|
||||
</div>
|
||||
)
|
||||
26
src/components/Upload.jsx
Normal file
26
src/components/Upload.jsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
import UploadForm from './UploadForm'
|
||||
|
||||
const Upload = ({ sourceMaps }) => (
|
||||
<div className='upload page'>
|
||||
<h2>Upload a source map</h2>
|
||||
|
||||
<div className='content'>
|
||||
<UploadForm />
|
||||
|
||||
<div className='source-map-list'>
|
||||
<ul>
|
||||
{sourceMaps && sourceMaps.map((sourceMap) => <li>{sourceMap.application} {sourceMap.version} {sourceMap.uiPlatform}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Upload.propTypes = {
|
||||
sourceMaps: PropTypes.array,
|
||||
}
|
||||
|
||||
export default Upload
|
||||
80
src/components/UploadForm.jsx
Normal file
80
src/components/UploadForm.jsx
Normal file
@ -0,0 +1,80 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
|
||||
export default class UploadForm extends React.Component {
|
||||
constructor () {
|
||||
super()
|
||||
|
||||
this.form = React.createRef()
|
||||
|
||||
this.onSubmit = this.onSubmit.bind(this)
|
||||
|
||||
this.state = {
|
||||
error: false,
|
||||
success: false,
|
||||
}
|
||||
}
|
||||
|
||||
onSubmit (e) {
|
||||
e.preventDefault()
|
||||
|
||||
const data = new FormData(this.form.current)
|
||||
|
||||
fetch('/api/source-maps', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
accepts: 'application/json',
|
||||
},
|
||||
body: data,
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
this.setState({
|
||||
success: true,
|
||||
error: false,
|
||||
})
|
||||
})
|
||||
.catch((res) => {
|
||||
this.setState({
|
||||
success: false,
|
||||
error: true,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
// const { error, success } = this.state
|
||||
const error = true
|
||||
const success = true
|
||||
|
||||
|
||||
return (
|
||||
<form ref={this.form} action='/api/source-maps' method='POST' encType='multipart/form-data' onSubmit={this.onSubmit}>
|
||||
{success && <div className='success message'>Source Map Uploaded</div>}
|
||||
{error && <div className='error message'>Error Uploading Source Map</div>}
|
||||
<div>
|
||||
<label htmlFor='application'>Application</label>
|
||||
<input type='text' name='application' placeholder='Application' defaultValue='algot' />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor='application'>UI</label>
|
||||
<input type='text' name='uiPlatform' placeholder='UI' />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor='application'>Version</label>
|
||||
<input type='text' name='version' placeholder='Version' defaultValue='4.3.0' />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type='file' name='map' required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type='submit'>Upload</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
}
|
||||
35
src/index.jsx
Normal file
35
src/index.jsx
Normal file
@ -0,0 +1,35 @@
|
||||
import './styles/main.css'
|
||||
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { BrowserRouter as Router, Route } from 'react-router-dom'
|
||||
|
||||
import Layout from './components/Layout'
|
||||
import routes from './routes'
|
||||
import { store } from './util/history'
|
||||
|
||||
ReactDOM.render((
|
||||
<Router>
|
||||
<Layout routes={routes}>
|
||||
{routes.map((route, i) => <Route key={i} exact path={route.path} component={route.component} />)}
|
||||
</Layout>
|
||||
</Router>
|
||||
), document.getElementById('app'))
|
||||
|
||||
let timeout
|
||||
|
||||
function remember (attrs) {
|
||||
console.log('should be storing')
|
||||
|
||||
store({
|
||||
scrollTop: window.pageYOffset,
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (timeout) {
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
|
||||
timeout = setTimeout(remember, 200)
|
||||
}, { passive: false })
|
||||
6
src/module.mjs
Normal file
6
src/module.mjs
Normal file
@ -0,0 +1,6 @@
|
||||
console.log('what up again. this time some thing up.')
|
||||
|
||||
export const aPoo = 'smelly'
|
||||
export const aSmellierPoo = 'super smelly'
|
||||
|
||||
export default 'you just missed a smelly poo'
|
||||
34
src/remap.mjs
Normal file
34
src/remap.mjs
Normal file
@ -0,0 +1,34 @@
|
||||
import mod from './module'
|
||||
|
||||
const form = document.querySelector('form')
|
||||
const pre = document.querySelector('.remapped-stack')
|
||||
|
||||
console.log(mod)
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
const obj = {}
|
||||
|
||||
for (let el of e.target.elements) {
|
||||
if (el.name) {
|
||||
obj[el.name] = el.value
|
||||
}
|
||||
}
|
||||
|
||||
console.log(obj)
|
||||
|
||||
fetch('/api/remap', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
accepts: 'application/json',
|
||||
'content-type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(obj),
|
||||
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
pre.textContent = res.join('\n')
|
||||
})
|
||||
})
|
||||
20
src/routes.js
Normal file
20
src/routes.js
Normal file
@ -0,0 +1,20 @@
|
||||
import Start from './components/Start'
|
||||
import Upload from './components/Upload'
|
||||
import Remap from './components/Remap'
|
||||
|
||||
export default [ {
|
||||
path: '/',
|
||||
component: Start,
|
||||
name: 'start',
|
||||
title: 'Start',
|
||||
}, {
|
||||
path: '/upload',
|
||||
component: Upload,
|
||||
name: 'upload',
|
||||
title: 'Upload',
|
||||
}, {
|
||||
path: '/remap',
|
||||
component: Remap,
|
||||
name: 'remap',
|
||||
title: 'Remap',
|
||||
} ]
|
||||
30
src/styles/content/remap.css
Normal file
30
src/styles/content/remap.css
Normal file
@ -0,0 +1,30 @@
|
||||
.remap.page {
|
||||
.remap-form {
|
||||
display: flex;
|
||||
|
||||
> form {
|
||||
flex: 0 0 500px;
|
||||
max-width: 500px;
|
||||
margin-right: $global-gutter;
|
||||
}
|
||||
|
||||
> div {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
> div {
|
||||
margin: 4px;
|
||||
|
||||
> label {
|
||||
max-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 340px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
0
src/styles/content/upload.css
Normal file
0
src/styles/content/upload.css
Normal file
66
src/styles/layout.css
Normal file
66
src/styles/layout.css
Normal file
@ -0,0 +1,66 @@
|
||||
@import './mixins';
|
||||
|
||||
#app {
|
||||
> .container {
|
||||
@include .container($content-max-width, $global-gutter);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
> h1 {
|
||||
> a {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
nav {
|
||||
> button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
|
||||
> li {
|
||||
display: block;
|
||||
margin: 5px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
> a {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
border: 5px solid black;
|
||||
padding: $button-padding;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
background: black;
|
||||
color:white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
5
src/styles/main.css
Normal file
5
src/styles/main.css
Normal file
@ -0,0 +1,5 @@
|
||||
@import './variables';
|
||||
@import './layout';
|
||||
@import './styles';
|
||||
@import './content/upload';
|
||||
@import './content/remap';
|
||||
57
src/styles/mixins.css
Normal file
57
src/styles/mixins.css
Normal file
@ -0,0 +1,57 @@
|
||||
$content-max-width: 1000px !default;
|
||||
$global-gutter: 30px !default;
|
||||
|
||||
@mixin .container($max-width: $content-max-width, $gutter: $global-gutter) {
|
||||
width: calc(100% - $gutter);
|
||||
max-width: $max-width;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@mixin .grid($direction: row) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: $direction;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@mixin .cell($count: 5, $gutter: $global-gutter) {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / $count ~"-" (($count - 1) * $gutter / $count));
|
||||
margin-right: $gutter;
|
||||
|
||||
&:nth-child($(count)n) {
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin .wipe {
|
||||
/*Reset's every elements apperance*/
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
border: medium none;
|
||||
border-spacing: 0;
|
||||
border-radius: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
text-transform: inherit;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
@mixin .wipe-button {
|
||||
@include .wipe;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
59
src/styles/styles.css
Normal file
59
src/styles/styles.css
Normal file
@ -0,0 +1,59 @@
|
||||
@import './mixins';
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #ffcc33;
|
||||
}
|
||||
|
||||
.grid {
|
||||
@include .grid();
|
||||
}
|
||||
|
||||
button {
|
||||
@include .wipe-button;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
border: 5px solid black;
|
||||
padding: $button-padding;
|
||||
color: white;
|
||||
background: black;
|
||||
font-weight: bold;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.message {
|
||||
border-left: 5px solid transparent;
|
||||
padding: 15px 20px;
|
||||
|
||||
&.error {
|
||||
$color: red;
|
||||
|
||||
color: color($color shade(20%));
|
||||
border-left-color: color($color shade(20%));
|
||||
background: color($color tint(90%));
|
||||
}
|
||||
|
||||
&.success {
|
||||
$color: green;
|
||||
|
||||
color: color($color shade(20%));
|
||||
border-left-color: color($color shade(20%));
|
||||
background: color($color tint(90%));
|
||||
}
|
||||
}
|
||||
|
||||
4
src/styles/variables.css
Normal file
4
src/styles/variables.css
Normal file
@ -0,0 +1,4 @@
|
||||
$content-max-width: 1280px;
|
||||
$global-gutter: 30px;
|
||||
$button-padding: 10px 20px;
|
||||
|
||||
30
src/upload.mjs
Normal file
30
src/upload.mjs
Normal file
@ -0,0 +1,30 @@
|
||||
const form = document.querySelector('form')
|
||||
const pre = document.querySelector('.remapped-stack')
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault()
|
||||
|
||||
console.log(e.target)
|
||||
const data = new FormData(form)
|
||||
console.log('should be appending')
|
||||
data.append('testing', 'what')
|
||||
data.set('setting', 'what')
|
||||
|
||||
for (const p of data) {
|
||||
console.log(p)
|
||||
}
|
||||
// console.log(data.entries())
|
||||
// console.log(data.getAll())
|
||||
|
||||
fetch('/api/upload', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
accepts: 'application/json',
|
||||
},
|
||||
body: data,
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
pre.textContent = res.join('\n')
|
||||
})
|
||||
})
|
||||
15
src/util/history.js
Normal file
15
src/util/history.js
Normal file
@ -0,0 +1,15 @@
|
||||
export function getCurrentUrl () {
|
||||
const url = typeof location !== 'undefined' ? location : EMPTY
|
||||
|
||||
return `${url.pathname || ''}${url.search || ''}`
|
||||
}
|
||||
|
||||
export function setUrl (url, state = null, type = 'push') {
|
||||
if (typeof history !== 'undefined' && history[`${type}State`]) {
|
||||
history[`${type}State`](state, null, url)
|
||||
}
|
||||
}
|
||||
|
||||
export function store (data) {
|
||||
setUrl(getCurrentUrl(), Object.assign({}, window.history.state, data), 'replace')
|
||||
}
|
||||
49
webpack.config.js
Normal file
49
webpack.config.js
Normal file
@ -0,0 +1,49 @@
|
||||
'use strict'
|
||||
|
||||
const path = require('path')
|
||||
// const webpack = require('webpack')
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
|
||||
const outputDir = path.resolve(__dirname, 'public')
|
||||
|
||||
module.exports = {
|
||||
mode: 'development',
|
||||
|
||||
entry: './src/index.jsx',
|
||||
|
||||
resolve: {
|
||||
extensions: ['.js', '.jsx', '.mjs', '.json'],
|
||||
},
|
||||
|
||||
output: {
|
||||
path: outputDir,
|
||||
|
||||
filename: 'js/bundle.js',
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [ {
|
||||
loader: 'css-loader',
|
||||
options: { importLoaders: 1 },
|
||||
}, 'postcss-loader' ],
|
||||
}),
|
||||
}, {
|
||||
test: /\.(mjs|js|jsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
},
|
||||
}],
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new ExtractTextPlugin({
|
||||
filename: 'css/bundle.css',
|
||||
allChunks: true,
|
||||
}),
|
||||
],
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user