Merge pull request #1442 from 0xProject/feature/website/0x-org-analytics

[website] 0x.org: Allow manual triggering of error, and report newsletter errors to Rollbar

1 files changed, 50 insertions, 15 deletions

diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/@next/components/newsletter_form.tsx
index 6dc4bf678..eef496982 100644
--- a/packages/website/ts/@next/components/newsletter_form.tsx
+++ b/packages/website/ts/@next/components/newsletter_form.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import styled, { withTheme } from 'styled-components';
 
+import { ThemeValuesInterface } from 'ts/@next/components/siteWrap';
 import { colors } from 'ts/style/colors';
-
-import {ThemeValuesInterface} from 'ts/@next/components/siteWrap';
+import { errorReporter } from 'ts/utils/error_reporter';
 
 interface FormProps {
     theme: ThemeValuesInterface;
@@ -27,7 +27,9 @@ const Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputEleme
 
     return (
         <InnerInputWrapper {...props}>
-            <label className="visuallyHidden" htmlFor={id}>{label}</label>
+            <label className="visuallyHidden" htmlFor={id}>
+                {label}
+            </label>
             <StyledInput ref={ref} id={id} placeholder={label} type={type || 'text'} {...props} />
         </InnerInputWrapper>
     );
@@ -39,17 +41,34 @@ class Form extends React.Component<FormProps> {
         isSubmitted: false,
     };
     public render(): React.ReactNode {
-        const {isSubmitted} = this.state;
-        const {theme} = this.props;
+        const { isSubmitted } = this.state;
+        const { theme } = this.props;
 
         return (
             <StyledForm onSubmit={this._onSubmitAsync.bind(this)}>
                 <InputWrapper>
-                    <Input isSubmitted={isSubmitted} name="email" type="email" label="Email Address" ref={this.emailInput} required={true} textColor={theme.textColor} />
+                    <Input
+                        isSubmitted={isSubmitted}
+                        name="email"
+                        type="email"
+                        label="Email Address"
+                        ref={this.emailInput}
+                        required={true}
+                        textColor={theme.textColor}
+                    />
 
                     <SubmitButton>
-                        <Arrow isSubmitted={isSubmitted} width="22" height="17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" fill="#CBCBCB"/>
+                        <Arrow
+                            isSubmitted={isSubmitted}
+                            width="22"
+                            height="17"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z"
+                                fill="#CBCBCB"
+                            />
                         </Arrow>
                     </SubmitButton>
                     <SuccessText isSubmitted={isSubmitted}>🎉 Thank you for signing up!</SuccessText>
@@ -67,6 +86,10 @@ class Form extends React.Component<FormProps> {
 
         this.setState({ isSubmitted: true });
 
+        if (email === 'triggererror@0xproject.org') {
+            throw new Error('Manually triggered error');
+        }
+
         try {
             const response = await fetch('https://website-api.0x.org/newsletter_subscriber/substack', {
                 method: 'post',
@@ -77,7 +100,7 @@ class Form extends React.Component<FormProps> {
                 body: JSON.stringify({ email, referrer }),
             });
         } catch (e) {
-           // dosomething
+            errorReporter.report(e);
         }
     }
 }
@@ -92,7 +115,10 @@ const StyledForm = styled.form`
     margin-top: 27px;
 `;
 
-const StyledInput = styled.input<InputProps>`
+const StyledInput =
+    styled.input <
+    InputProps >
+    `
     appearance: none;
     background-color: transparent;
     border: 0;
@@ -112,7 +138,10 @@ const InputWrapper = styled.div`
     position: relative;
 `;
 
-const InnerInputWrapper = styled.div<ArrowProps>`
+const InnerInputWrapper =
+    styled.div <
+    ArrowProps >
+    `
     opacity: ${props => props.isSubmitted && 0};
     visibility: ${props => props.isSubmitted && 'hidden'};
     transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
@@ -143,7 +172,10 @@ const Text = styled.p`
     margin-top: 15px;
 `;
 
-const SuccessText = styled.p<ArrowProps>`
+const SuccessText =
+    styled.p <
+    ArrowProps >
+    `
     color: #B1B1B1;
     font-size: 1rem;
     font-weight: 300;
@@ -154,13 +186,16 @@ const SuccessText = styled.p<ArrowProps>`
     top: 0;
     text-align: left;
     right: 50px;
-    opacity: ${props => props.isSubmitted ? 1 : 0};
-    visibility: ${props => props.isSubmitted ? 'visible' : 'hidden'};
+    opacity: ${props => (props.isSubmitted ? 1 : 0)};
+    visibility: ${props => (props.isSubmitted ? 'visible' : 'hidden')};
     transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
     transition-delay: 0.55s;
 `;
 
-const Arrow = styled.svg<ArrowProps>`
+const Arrow =
+    styled.svg <
+    ArrowProps >
+    `
     transform: ${props => props.isSubmitted && `translateX(44px)`};
     transition: transform 0.25s ease-in-out;
 `;