- Merge client update into test-beta
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
@@ -1,144 +1,141 @@
|
||||
import { Button, Col, Collapse, Result, Row, Space } from "antd";
|
||||
import {Button, Col, Collapse, Result, Row, Space} from "antd";
|
||||
import React from "react";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { logImEXEvent } from "../../firebase/firebase.utils";
|
||||
import {withTranslation} from "react-i18next";
|
||||
import {logImEXEvent} from "../../firebase/firebase.utils";
|
||||
|
||||
import { connect } from "react-redux";
|
||||
import { createStructuredSelector } from "reselect";
|
||||
import {
|
||||
selectBodyshop,
|
||||
selectCurrentUser,
|
||||
} from "../../redux/user/user.selectors";
|
||||
import {connect} from "react-redux";
|
||||
import {createStructuredSelector} from "reselect";
|
||||
import {selectBodyshop, selectCurrentUser,} from "../../redux/user/user.selectors";
|
||||
|
||||
const mapStateToProps = createStructuredSelector({
|
||||
currentUser: selectCurrentUser,
|
||||
bodyshop: selectBodyshop,
|
||||
currentUser: selectCurrentUser,
|
||||
bodyshop: selectBodyshop,
|
||||
});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
//setUserLanguage: language => dispatch(setUserLanguage(language))
|
||||
});
|
||||
|
||||
class ErrorBoundary extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
hasErrored: false,
|
||||
error: null,
|
||||
info: null,
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error) {
|
||||
console.log("ErrorBoundary -> getDerivedStateFromError -> error", error);
|
||||
|
||||
return { hasErrored: true, error: error };
|
||||
}
|
||||
|
||||
componentDidCatch(error, info) {
|
||||
console.log("Exception Caught by Error Boundary.", error, info);
|
||||
this.setState({ ...this.state, error, info });
|
||||
}
|
||||
|
||||
handleErrorSubmit = () => {
|
||||
// window.$crisp.push([
|
||||
// "do",
|
||||
// "message:send",
|
||||
// [
|
||||
// "text",
|
||||
// `I hit the following error: \n\n
|
||||
// ${this.state.error.message}\n\n
|
||||
// ${this.state.error.stack}\n\n
|
||||
// URL:${window.location} as ${this.props.currentUser.email} for ${
|
||||
// this.props.bodyshop && this.props.bodyshop.name
|
||||
// }
|
||||
// `,
|
||||
// ],
|
||||
// ]);
|
||||
|
||||
// window.$crisp.push(["do", "chat:open"]);
|
||||
// const errorDescription = `**Please add relevant details about what you were doing before you encountered this issue**
|
||||
|
||||
// ----
|
||||
// System Generated Log:
|
||||
// ${this.state.error.message}
|
||||
// ${this.state.error.stack}
|
||||
// `;
|
||||
|
||||
// const URL = `https://bodyshop.atlassian.net/servicedesk/customer/portal/3/group/8/create/26?summary=123&description=${encodeURI(
|
||||
// errorDescription
|
||||
// )}&customfield_10049=${window.location}&email=${
|
||||
// this.props.currentUser.email
|
||||
// }`;
|
||||
// console.log(`URL`, URL);
|
||||
// window.open(URL, "_blank");
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
const { error, info } = this.state;
|
||||
if (this.state.hasErrored === true) {
|
||||
logImEXEvent("error_boundary_rendered", { error, info });
|
||||
|
||||
window.$crisp.push([
|
||||
"set",
|
||||
"session:event",
|
||||
[
|
||||
[
|
||||
[
|
||||
"error_boundary",
|
||||
{
|
||||
error: this.state.error.message,
|
||||
stack: this.state.error.stack,
|
||||
},
|
||||
"red",
|
||||
],
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Result
|
||||
status="500"
|
||||
title={t("general.labels.exceptiontitle")}
|
||||
subTitle={t("general.messages.exception")}
|
||||
extra={
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
window.location.reload();
|
||||
}}
|
||||
>
|
||||
{t("general.actions.refresh")}
|
||||
</Button>
|
||||
<Button onClick={this.handleErrorSubmit}>
|
||||
{t("general.actions.senderrortosupport")}
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
/>
|
||||
<Row>
|
||||
<Col offset={6} span={12}>
|
||||
<Collapse bordered={false}>
|
||||
<Collapse.Panel header={t("general.labels.errors")}>
|
||||
<div>
|
||||
<strong>{this.state.error.message}</strong>
|
||||
</div>
|
||||
<div>{this.state.error.stack}</div>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return this.props.children;
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
hasErrored: false,
|
||||
error: null,
|
||||
info: null,
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error) {
|
||||
console.log("ErrorBoundary -> getDerivedStateFromError -> error", error);
|
||||
|
||||
return {hasErrored: true, error: error};
|
||||
}
|
||||
|
||||
componentDidCatch(error, info) {
|
||||
console.log("Exception Caught by Error Boundary.", error, info);
|
||||
this.setState({...this.state, error, info});
|
||||
}
|
||||
|
||||
handleErrorSubmit = () => {
|
||||
// window.$crisp.push([
|
||||
// "do",
|
||||
// "message:send",
|
||||
// [
|
||||
// "text",
|
||||
// `I hit the following error: \n\n
|
||||
// ${this.state.error.message}\n\n
|
||||
// ${this.state.error.stack}\n\n
|
||||
// URL:${window.location} as ${this.props.currentUser.email} for ${
|
||||
// this.props.bodyshop && this.props.bodyshop.name
|
||||
// }
|
||||
// `,
|
||||
// ],
|
||||
// ]);
|
||||
|
||||
// window.$crisp.push(["do", "chat:open"]);
|
||||
// const errorDescription = `**Please add relevant details about what you were doing before you encountered this issue**
|
||||
|
||||
// ----
|
||||
// System Generated Log:
|
||||
// ${this.state.error.message}
|
||||
// ${this.state.error.stack}
|
||||
// `;
|
||||
|
||||
// const URL = `https://bodyshop.atlassian.net/servicedesk/customer/portal/3/group/8/create/26?summary=123&description=${encodeURI(
|
||||
// errorDescription
|
||||
// )}&customfield_10049=${window.location}&email=${
|
||||
// this.props.currentUser.email
|
||||
// }`;
|
||||
// console.log(`URL`, URL);
|
||||
// window.open(URL, "_blank");
|
||||
};
|
||||
|
||||
render() {
|
||||
const {t} = this.props;
|
||||
const {error, info} = this.state;
|
||||
if (this.state.hasErrored === true) {
|
||||
logImEXEvent("error_boundary_rendered", {error, info});
|
||||
|
||||
window.$crisp.push([
|
||||
"set",
|
||||
"session:event",
|
||||
[
|
||||
[
|
||||
[
|
||||
"error_boundary",
|
||||
{
|
||||
error: this.state.error.message,
|
||||
stack: this.state.error.stack,
|
||||
},
|
||||
"red",
|
||||
],
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Result
|
||||
status="500"
|
||||
title={t("general.labels.exceptiontitle")}
|
||||
subTitle={t("general.messages.exception")}
|
||||
extra={
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
window.location.reload();
|
||||
}}
|
||||
>
|
||||
{t("general.actions.refresh")}
|
||||
</Button>
|
||||
<Button onClick={this.handleErrorSubmit}>
|
||||
{t("general.actions.senderrortosupport")}
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
/>
|
||||
<Row>
|
||||
<Col offset={6} span={12}>
|
||||
<Collapse bordered={false}>
|
||||
<Collapse.Panel header={t("general.labels.errors")}>
|
||||
<div>
|
||||
<strong>{this.state.error.message}</strong>
|
||||
</div>
|
||||
<div>{this.state.error.stack}</div>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(withTranslation()(ErrorBoundary));
|
||||
|
||||
Reference in New Issue
Block a user