rohitkataria-sentryio / tracing

Tracing between React javascript and back-end REST API's and other microservices

tracing

SDK Tracing between a React javascript app and back-end Flask app. For prod deployment this uses GCP's Cloud Build, and Cloud Run.

Setup

Versions

this was tested on:

dependency	version
sentry_sdk	0.16.1
@sentry/browser	5.15.0
@sentry/apm	5.20.1
@sentry/react 5.20.1
node	v.14.2
redux	4.0.5
react-redux	7.2.1
react-dom	16.13.1
react	16.13.3
Google Cloud SDK	277.0.0
bq	2.0.52
AVD	Nexus 5x API 29 x86
core	2020.01.17
gsutil 4.47	gsutil 4.47
docker	19.03.12

Do the gcloud setup and project env setups here:

gcloud setup

1. Have an admin set your permissions in GCP
2. Download gcloud google cloud sdk https://cloud.google.com/sdk/docs/. This will have you 'initialize' your sdk from command line, and set some defaults. If you get asked for 'zone' select us-central1-a. 'region' is us-central1
3. gcloud auth login opens browser with Google OAUTH, select your Sentry email.
4. gcloud config set project <project ID> get your team's Google Cloud Project ID from console.cloud.google.com.
5. gcloud config set run/region us-central1 to set 'us-central1' as default region
6. gcloud config list and confirm your email, project and region are correct.
7. Permit your IP address in GCP Cloud SQL for the database instance.

project env setup

1. install nvm
2. Create a flask/.env using flask/.env.default as an example, and fill in the values.
3. Create a react/.env using react/.env.default as an example, and fill in the values. In the REACT_APP_BACKEND_URL put your whoami so your React app instance will call the right Flask app instance.
4. set your SENTRY_PROJECT in both Makefile and react/Makefile
5. cd react && npm install
6. cd flask && pip install -r requirements.txt

Run

Development

1. cd ./react && npm run deploylocal
2. cd ./flask && make deploy

Production

1. make all

The above command builds your react app, runs sentry-cli commands for releases, then uploads your source files to GCP where Cloud Build will build an Image and run it as a container in Cloud Run

Troubleshooting

// logout from a specific account then run the following command
gcloud auth revoke <your_account>
// logout from all accounts
gcloud auth revoke --all
// see whatsup
gcloud config list

Build single image in Cloud Build
gcloud builds submit --tag gcr.io/<PROJECT-ID>/<APP_NAME>
Run single container in Cloud Run
gcloud run deploy --image gcr.io/<PROJECT-ID>/<APP_NAME> --platform managed

IF you change your $(GCP_DEPLOY)-react to $(GCP_DEPLOY)-react-feature123 THEN you need to change the URL (REACT_APP_BACKEND) in .env to reflect that

The container must listen for requests on 0.0.0.0 on the port defined by the GCP's $PORT environment variable. It is defaulted to 8080
https://cloud.google.com/run/docs/reference/container-contract#port

If you run npm start then the React app will bring you to a handled error page, instead of seeing User Feedback popup

Warning: It is not recommended to use build-time variables for passing secrets like github keys, user credentials etc. Build-time variable values are visible to any user of the image with the docker history command.
https://docs.docker.com/engine/reference/builder/

docker exec -it <container_ID> bash

see clean.sh for how to quickly remove all dead images and containers

sentry-cli repos list

If you get an error 'nvm is not compatible with the npm_config_prefix" environment variable: currently set to "/usr/local" then run unset npm_config_prefix