[Internal] Research and Set up Firebase for Web

rinej commented 2 months ago

Problem Currently we use react-native-firebase for tracking performance issues on mobile. According to docs https://rnfirebase.io/platforms the lib doesn't support web platform. It would be beneficial to use firebase to track web performance as well.

Solution We need to do some reaserch and check if we are able to use the the firebase SDK to use performance tracking on the web.

We already have Firebase set up for our mobile platforms, and recently we started using it. And with relatively low effort, we can extend this setup to the web platform.

It allows us to monitor default key metrics (e.g. firstContentfulPaint ) and our custom metrics (e.g. trie_initialization )

We can add additional context to the trace, like userId or the number of reports, which can be valuable for diagnosing issues or analyzing performance trends.

In practice, this means that we both can use the dashboard to track any potential performance regressions. While it might feel somewhat similar to Grafana in terms of monitoring capabilities, Firebase is relatively easier to configure—especially since we already have the setup in place for mobile.

Here are some screenshots from firebase console from test project:

Issue Owner

Current Issue Owner: @rinej

melvin-bot[bot] commented 2 months ago

Triggered auto assignment to @luacmartins (AutoAssignerAppLibraryReview), see https://stackoverflowteams.com/c/expensify/questions/17737 for more details.

melvin-bot[bot] commented 2 months ago

New Library Review

Are all the answers in the main description filled out properly and make sense?
Who maintains the library and how well is it maintained?
How viable are the alternatives?
Should we build it ourselves instead?

Once these questions are answered, start a thread in #engineering-chat, ping the @app_deployers group, and call for a vote to accept the new library. Once the vote is complete, update this issue with the outcome and procede accordingly. Here is a sample post:

Hey @app_deployers,

There is a request to add a new library to App that we need to consider. Please look at this GH and then vote :+1: or :-1: on accepting this new library or not.

GH_LINK

luacmartins commented 2 months ago

@rinej could you provide some examples of how we're using react-native-firebase to track mobile performance issues now?

Could you also please fill in this information:

Library size:
GitHub stars:
Last release date:

Thank you!

rinej commented 2 months ago

How we currently use `react-native-firebase` for tracking performance:

Custom Metrics Tracking: We monitor specific custom metrics to gain deeper insights into key functionalities. For example:

chat_render: Tracks the time taken to render the chat interface.
load_search_options: Monitors the duration for loading search options.
switch_report: Measures the time spent switching between reports.

Detailed Trace Logging: We log additional details in each trace, such as accountId, the number of reports, and the length of personalDetails. This helps in identifying performance bottlenecks more easily.

Network Request Timing: We track the time taken for network requests, such as ReconnectApp or OpenApp, to monitor their performance.

Crashlytics Integration: We use the crashlytics module to help identify the root causes of crashes. (Currently, crashlytics is only available on mobile platforms. For web monitoring, we can use other tools like Sentry or Bugsnag.)

Flexibility As this is a relatively new initiative, we have the flexibility to add or modify metrics as our needs evolve.

Url to firebase console -> https://console.firebase.google.com/u/0/project/expensify-chat/performance/app/android:com.expensify.chat/trends?time=last-thirty-days

Additional Info:

New package npm url: https://www.npmjs.com/package/firebase

Library size:

the whole firebase package - 24.7 MB (https://www.npmjs.com/package/firebase)
just the module we need firebase/performance -> 615 kB (https://www.npmjs.com/package/@firebase/performance)

GitHub stars: 4.8k

Last release date: a day ago (22 August)

luacmartins commented 2 months ago

Thanks! I'll bring this to Slack tomorrow

rinej commented 2 months ago

I created the Draft PR with the project configuration: https://github.com/Expensify/App/pull/47795 We will need someone from Exp to create new Web project in firebase console so we can add the proper config:

FB_API_KEY=YOUR_API_KEY
FB_APP_ID=YOUR_APP_ID
FB_PROJECT_ID=YOUR_PROJECT_ID

melvin-bot[bot] commented 2 months ago

@luacmartins Whoops! This issue is 2 days overdue. Let's get this updated quick!

luacmartins commented 2 months ago

We have a draft PR

rinej commented 1 month ago

The PR is ready for review.
We will just need someone from the internal team to create new Firebase Project and set the proper environmental variables so we can take it from ENV. More details in the PR -> https://github.com/Expensify/App/pull/47795

melvin-bot[bot] commented 1 month ago

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

rinej commented 1 month ago

the issue was resolved in the following ticket: https://github.com/Expensify/App/issues/49443#issuecomment-2361239813

luacmartins commented 1 month ago

Closing issue!

Expensify / App