SDK Tracing between a React javascript app and back-end Flask app. For prod deployment this uses GCP's Cloud Build, and Cloud Run.
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:
- Have an admin set your permissions in GCP
- 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 gcloud auth login
opens browser with Google OAUTH, select your Sentry email.gcloud config set project <project ID>
get your team's Google Cloud Project ID from console.cloud.google.com.gcloud config set run/region us-central1
to set 'us-central1' as default regiongcloud config list
and confirm your email, project and region are correct.- Permit your IP address in GCP Cloud SQL for the database instance.
- install nvm
- Create a
flask/.env
usingflask/.env.default
as an example, and fill in the values. - Create a
react/.env
usingreact/.env.default
as an example, and fill in the values. In theREACT_APP_BACKEND_URL
put yourwhoami
so your React app instance will call the right Flask app instance. - set your SENTRY_PROJECT in both Makefile and react/Makefile
- cd react && npm install
- cd flask && pip install -r requirements.txt
cd ./react && npm run deploylocal
cd ./flask && make deploy
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
// 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