import React from 'react'
import ansiHTML from 'ansi-html'
import Head from './head'
import {applySourcemaps} from '../client/source-map-support'
// On the client side the error can come from multiple places for example react-hot-loader or client/index.js
// `componentDidCatch` doesn't support asynchronous execution, so we have to handle sourcemap support here
export class ClientDebug extends React.Component {
state = {
mappedError: null
}
componentDidMount () {
const {error} = this.props
// If sourcemaps were already applied there is no need to set the state
if (error.sourceMapsApplied) {
return
}
// Since componentDidMount doesn't handle errors we use then/catch here
applySourcemaps(error).then(() => {
this.setState({mappedError: error})
}).catch(console.error)
}
render () {
const {mappedError} = this.state
const {error} = this.props
if (!error.sourceMapsApplied && mappedError === null) {
return
Loading stacktrace...
}
return
}
}
// On the server side the error has sourcemaps already applied, so `ErrorDebug` is rendered directly.
export default function ErrorDebug ({error}) {
const { name, message, module } = error
return (