[RFC] Adding Crashlytics Integeration For Members site

[vvaibhavdesai]

Overview

Issue

• We recently faced an outage of our Members page which led to 404 and the root cause wasn't tagged
• When running on the local hosts the page showed some errors which were not clear since they arrived for a smaller period of time & the team was unable to recreate the bug again.

Screenshots

404 page

Local Host

Discussion

• Over discussion we came to the conclusion that although we couldn't tag the bug we need to have some mechanism around the lines which keeps the logs anytime something breaks
• to mitigate this we have decided to integrate crashlytics

Folder Structure

src
    ├───components
    │   ├───designers
    │   │       index.js
    │   │       mock-data.json
    │   │       
    │   ├───footer
    │   │       footer.module.scss
    │   │       index.js
    │   │       
    │   ├───home
    │   │       home.module.scss
    │   │       index.js
    │   │       
    │   ├───layout
    │   │       index.js
    │   │       
    │   ├───loader
    │   │       index.js
    │   │       loader.module.scss
    │   │       
    │   ├───member-card
    │   │   │   card.module.scss
    │   │   │   index.js
    │   │   │   member-card.stories.jsx
    │   │   │   show-skills.js
    │   │   │   super-user-options.js
    │   │   │   
    │   │   └───mock-data
    │   │           skills.js
    │   │           
    │   ├───member-profile
    │   │   │   index.js
    │   │   │   member-profile.module.scss
    │   │   │   
    │   │   ├───active-task
    │   │   │       active-task.module.scss
    │   │   │       index.js
    │   │   │       
    │   │   ├───contribution
    │   │   │   │   contribution.module.scss
    │   │   │   │   index.js
    │   │   │   │   
    │   │   │   └───pr-link
    │   │   │           index.js
    │   │   │           pr-link.module.scss
    │   │   │           
    │   │   ├───contribution-type
    │   │   │       contributions-type.module.scss
    │   │   │       index.js
    │   │   │       
    │   │   └───mock
    │   │           data.json
    │   │           get-badges.js
    │   │           
    │   ├───member-role-update
    │   │       index.js
    │   │       member-role-update.module.scss
    │   │       
    │   ├───members
    │   │       index.js
    │   │       members.module.scss
    │   │       
    │   ├───new-members
    │   │       index.js
    │   │       new-members.module.scss
    │   │       
    │   ├───not-found-page
    │   │       index.js
    │   │       not-found-page.module.scss
    │   │       
    │   ├───preview-container
    │   │   │   index.js
    │   │   │   preview-container.module.scss
    │   │   │   
    │   │   └───preview-member
    │   │           index.js
    │   │           preview-member.module.scss
    │   │           
    │   ├───social-media-icon
    │   │       index.js
    │   │       social-media-icon.module.scss
    │   │       social-media.constant.js
    │   │       
    │   ├───UI
    │   │   ├───backdrop
    │   │   │       backdrop.module.scss
    │   │   │       index.js
    │   │   │       
    │   │   ├───modal
    │   │   │       index.jsx
    │   │   │       modal.module.scss
    │   │   │       
    │   │   ├───navbar
    │   │   │       index.js
    │   │   │       navbar.module.scss
    │   │   │       
    │   │   ├───search-box
    │   │   │       index.js
    │   │   │       search-box.module.scss
    │   │   │       
    │   │   └───spinner
    │   │           index.js
    │   │           spinner.module.scss
    │   │           
    │   └───user-profile
    │           index.js
    │           user-profile.module.scss
    │           
    ├───constants
    │       AppConstants.js
    │       cache-max-age.js
    │       profile-image.js
    │       
    ├───custom-hooks
    │       useFetch.js
    │       
    ├───helper-functions
    │       action-handlers.js
    │       estimated-days.js
    │       fetch.js
    │       progressIndicator.js
    │       search-members.js
    │       taskProgress.js
    │       time-was.js
    │       urls.js
    │       
    ├───pages
    │   │   404.js
    │   │   index.js
    │   │   _app.js
    │   │   _document.js
    │   │   
    │   └───[id]
    │           index.js
    │           
    ├───store
    │   │   index.js
    │   │   
    │   ├───members
    │   │       members-context.js
    │   │       members-reducer.js
    │   │       
    │   ├───search-members
    │   │       searchMembers-context.js
    │   │       
    │   └───user
    │           user-context.js
    │           
    ├───styles
    │   │   global-styles.scss
    │   │   layout-style.module.scss
    │   │   variables.scss
    │   │   
    │   └───constants
    │           _colors.scss
    │           
    └───test
        └───unit
            └───components
                ├───active-task
                │       index.test.js
                │       
                └───member-card
                        index.test.js

Requirements

• Setting up the firebase crashlytics file
• integerating crashlytic logs for all async operations performed by next js and server calls .

[ankushdharkar]

@vvaibhavdesai What other alternatives do you suggest?