Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🪟 🐛 Add DbtCloudErrorBoundary #20616

Conversation

ambirdsall
Copy link
Contributor

@ambirdsall ambirdsall commented Dec 17, 2022

What

Adds an error boundary for the dbt cloud integration. As a follow up, I would like to better test out the error response coming from the server; while I did use the actual JSON structure of a known dbt Cloud error response and code the error parsing defensively (so if it's incorrect it should gracefully fall back to a generic error UI instead of erroring) , all my attempts to actually trigger an error response from dbt Cloud caused downstream errors in the cloud server and thus a 500 response with no forwarding of dbt Cloud's 4XX response payload.

Closes #20441, but not https://github.com/airbytehq/airbyte-cloud/issues/4181

@octavia-squidington-iv octavia-squidington-iv added area/platform issues related to the platform area/frontend Related to the Airbyte webapp labels Dec 17, 2022
@ambirdsall ambirdsall changed the title Add WIP DbtCloudErrorBoundary 🪟 🐛 Add DbtCloudErrorBoundary Dec 17, 2022
@ambirdsall
Copy link
Contributor Author

@mfsiega-airbyte, I tried loading the transformation tab for an account using a deleted access token, but got a 500 response from the list dbt jobs endpoint. This error shouldn't propagate to the point that it crashes a server thread, it should rather be a 4XX status, ideally including the dbt Cloud API payload so the frontend can display something useful to the user. Not urgent: in the short-term, I'll just clean up this code in order to make the generic message ready to merge and in the medium term I'm going to be pretty focused on free connectors.

@mfsiega-airbyte
Copy link
Contributor

@ambirdsall just wanted to check - do we want to try to merge this? We got another similar report today.

@tybernstein
Copy link
Contributor

@mfsiega-airbyte @ambirdsall Just bumping this to see if we can proceed with the related OC issue?

@ambirdsall
Copy link
Contributor Author

@TBernstein4 @mfsiega-airbyte I don't think there's any reason to hold off on getting this merged: it would be nice to iterate a little further on the code to parse out dbt-sourced error messages, but even if it shows the generic fallback message 100% of the time that's a clear improvement over the app's current behavior. I'll resolve all conflicts and pull this PR out of draft status so we can ship it soon.

@ambirdsall ambirdsall force-pushed the alex/add-custom-error-boundary-to-dbt-Cloud-transformation-card branch from b4d5163 to 4dad820 Compare January 24, 2023 18:38
@ambirdsall ambirdsall marked this pull request as ready for review January 24, 2023 18:38
@octavia-squidington-iv octavia-squidington-iv removed the area/platform issues related to the platform label Jan 24, 2023
@mfsiega-airbyte
Copy link
Contributor

Just to check - what did the validation look like here? (Looks reasonable to me, as long as it Works.)

@ambirdsall
Copy link
Contributor Author

ambirdsall commented Jan 25, 2023

Just to check - what did the validation look like here? (Looks reasonable to me, as long as it Works.)

Here's the steps I took. In order, I:

  • generated a new service token with job admin privileges
  • registered it to an airbyte workspace
  • verified everything worked as expected
  • deleted the new token in dbt cloud
  • saw the generic error message in the transformation tab

It certainly could look nicer, but it seems like the first priority should be unbreaking the UX in this scenario, followed by a quick visual iteration with Nico's help:
image

@ambirdsall ambirdsall force-pushed the alex/add-custom-error-boundary-to-dbt-Cloud-transformation-card branch from 4dad820 to a60b8cd Compare January 26, 2023 22:29
@@ -25,6 +25,50 @@ interface DbtJobListValues {
jobs: DbtCloudJob[];
}

const DbtCloudErrorBoundary = class extends React.Component {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is getting really full of components - could we split this into a new file to ease readability & file navigation?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ambirdsall not sure if you intend to address this comment still?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@josephkmh this is what happens when I make a mental note but not a physical one. Great point, totally slipped my mind 🤦 👍

@ambirdsall ambirdsall force-pushed the alex/add-custom-error-boundary-to-dbt-Cloud-transformation-card branch 2 times, most recently from a0ad62c to 6ddd82c Compare January 30, 2023 23:34
@ambirdsall ambirdsall requested a review from josephkmh January 30, 2023 23:34
Copy link
Contributor

@josephkmh josephkmh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code LGTM - just one of my comments is still open: #20616 (comment)

Not sure if you want to address that before merging? OK for me either way 👍

@ambirdsall ambirdsall force-pushed the alex/add-custom-error-boundary-to-dbt-Cloud-transformation-card branch from 6ddd82c to 9634479 Compare February 1, 2023 00:45
@ambirdsall
Copy link
Contributor Author

@josephkmh I split out helper components. The main component has a lot less code to wade through, now.

The scss import lint rule meant I had to restructure the CSS, too, so I recorded a screen capture (using a chrome extension to trigger artificial API errors) to show the actual rendered styles in the different contexts (a 500 response to /get_available_dbt_jobs, an empty jobs list, a nonempty obs list):
dbt-cloud-error-bound-transformation-card

@ambirdsall ambirdsall requested a review from josephkmh February 1, 2023 01:14
Copy link
Contributor

@josephkmh josephkmh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for breaking out those components into separate files! Looks good

It's a bit more efficient and I don't need any of the other things
provided by `useCurrentWorkspace`.
I put a little effort into keeping all of the API interactions within
the top-level component, and a linting rule required me to split out
individual stylesheets for each helper component (plus one non-module
scss file for shared card styles that individual scss modules can
`@forward`)
@ambirdsall ambirdsall force-pushed the alex/add-custom-error-boundary-to-dbt-Cloud-transformation-card branch from 7c038de to f10a7ac Compare February 6, 2023 23:00
@ambirdsall ambirdsall enabled auto-merge (squash) February 6, 2023 23:05
@ambirdsall ambirdsall merged commit 3ef7edf into master Feb 6, 2023
@ambirdsall ambirdsall deleted the alex/add-custom-error-boundary-to-dbt-Cloud-transformation-card branch February 6, 2023 23:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/frontend Related to the Airbyte webapp
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Error statuses from dbt Cloud requests should not crash transformation tab in cloud build
5 participants