feat(ui): Throw error on non-json api responses

static/app/api.tsx

@@ -488,18 +488,18 @@ export class Client {
  // GET requests may not have a body
  const body = method !== 'GET' ? data : undefined;
 
- const headers = new Headers(this.headers);
+ const requestHeaders = new Headers({...this.headers, ...options.headers});
 
  // Do not set the X-CSRFToken header when making a request outside of the
  // current domain. Because we use subdomains we loosely compare origins
  if (!csrfSafeMethod(method) && isSimilarOrigin(fullUrl, window.location.origin)) {
- headers.set('X-CSRFToken', getCsrfToken());
+ requestHeaders.set('X-CSRFToken', getCsrfToken());
  }
 
  const fetchRequest = fetch(fullUrl, {
  method,
  body,
- headers,
+ headers: requestHeaders,
  credentials: this.credentials,
  signal: aborter?.signal,
  });
@@ -535,6 +535,8 @@ export class Client {
 
  const responseContentType = response.headers.get('content-type');
  const isResponseJSON = responseContentType?.includes('json');
+ const wasExpectingJson =
+ requestHeaders.get('Accept') === Client.JSON_HEADERS.Accept;
 
  const isStatus3XX = status >= 300 && status < 400;
  if (status !== 204 && !isStatus3XX) {
@@ -550,6 +552,16 @@ export class Client {
  // this should be an error.
  ok = false;
  errorReason = 'JSON parse error';
+ } else if (
+ // Empty responses from POST 201 requests are valid
+ responseText?.length > 0 &&
+ wasExpectingJson &&
+ error instanceof SyntaxError
+ ) {
+ // Was expecting json but was returned something else. Possibly HTML.
+ // Ideally this would not be a 200, but we should reject the promise
+ ok = false;
+ errorReason = 'JSON parse error. Possibly returned HTML';
  }
  }
  }

static/app/components/events/attachmentViewers/jsonViewer.tsx

@@ -13,8 +13,14 @@ type Props = ViewerProps & DeprecatedAsyncComponent['props'];
 type State = DeprecatedAsyncComponent['state'];
 
 export default class JsonViewer extends DeprecatedAsyncComponent<Props, State> {
- getEndpoints(): [string, string][] {
- return [['attachmentJson', getAttachmentUrl(this.props)]];
+ getEndpoints(): ReturnType<DeprecatedAsyncComponent['getEndpoints']> {
+ return [
+ [
+ 'attachmentJson',
+ getAttachmentUrl(this.props),
+ {headers: {Accept: '*/*; charset=utf-8'}},
+ ],
+ ];
  }
 
  renderBody() {

static/app/components/events/attachmentViewers/logFileViewer.tsx

@@ -14,8 +14,14 @@ type Props = ViewerProps & DeprecatedAsyncComponent['props'];
 type State = DeprecatedAsyncComponent['state'];
 
 class LogFileViewer extends DeprecatedAsyncComponent<Props, State> {
- getEndpoints(): [string, string][] {
- return [['attachmentText', getAttachmentUrl(this.props)]];
+ getEndpoints(): ReturnType<DeprecatedAsyncComponent['getEndpoints']> {
+ return [
+ [
+ 'attachmentText',
+ getAttachmentUrl(this.props),
+ {headers: {Accept: '*/*; charset=utf-8'}},
+ ],
+ ];
  }
 
  renderBody() {

static/app/components/events/eventViewHierarchy.tsx

@@ -47,6 +47,11 @@ function EventViewHierarchyContent({event, project}: Props) {
  projectSlug: project.slug,
  })
  : '',
+ {
+ headers: {
+ Accept: '*/*; charset=utf-8',
+ },
+ },
  ],
  {staleTime: Infinity, enabled: defined(hierarchyMeta)}
  );

static/app/components/events/interfaces/crashContent/exception/rawContent.tsx

@@ -139,7 +139,8 @@ class RawContent extends Component<Props, State> {
 
  try {
  const data = await api.requestPromise(
- this.getAppleCrashReportEndpoint(organization)
+ this.getAppleCrashReportEndpoint(organization),
+ {headers: {Accept: '*/*; charset=utf-8'}}
  );
  this.setState({
  error: false,

static/app/utils/queryClient.tsx

@@ -16,6 +16,7 @@ const DEFAULT_QUERY_CLIENT_CONFIG: QueryClientConfig = {
 };
 
 type QueryKeyEndpointOptions = {
+ headers?: Record<string, string>;
  query?: Record<string, any>;
 };
 
@@ -106,6 +107,7 @@ function useApiQuery<TResponseData, TError = RequestError>(
  api.requestPromise(path, {
  method: 'GET',
  query: endpointOptions?.query,
+ headers: endpointOptions?.headers,
  includeAllArgs: true,
  });