diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d5e091dc4..7fe681f53c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,8 @@ release.
   ([#799](https://github.com/open-telemetry/opentelemetry-demo/pull/799))
 * Update frontend JavaScript SDKs to: 1.10.1/0.36.x
   ([#805](https://github.com/open-telemetry/opentelemetry-demo/pull/805))
+* Fix http.status_code on error in frontend
+  ([#810](https://github.com/open-telemetry/opentelemetry-demo/pull/810))
 
 ## v0.1.0
 
diff --git a/src/frontend/utils/telemetry/InstrumentationMiddleware.ts b/src/frontend/utils/telemetry/InstrumentationMiddleware.ts
index 226ff55cd7..52adf9ed60 100644
--- a/src/frontend/utils/telemetry/InstrumentationMiddleware.ts
+++ b/src/frontend/utils/telemetry/InstrumentationMiddleware.ts
@@ -40,7 +40,6 @@ const InstrumentationMiddleware = (handler: NextApiHandler): NextApiHandler => {
         attributes: {
           'app.synthetic_request': true,
           [SemanticAttributes.HTTP_TARGET]: target,
-          [SemanticAttributes.HTTP_STATUS_CODE]: response.statusCode,
           [SemanticAttributes.HTTP_METHOD]: method,
           [SemanticAttributes.HTTP_USER_AGENT]: headers['user-agent'] || '',
           [SemanticAttributes.HTTP_URL]: `${headers.host}${url}`,
@@ -56,30 +55,28 @@ const InstrumentationMiddleware = (handler: NextApiHandler): NextApiHandler => {
       span.setAttribute(AttributeNames.SESSION_ID, request.query['sessionId']);
     }
 
+    let httpStatus = 200;
     try {
       await runWithSpan(span, async () => handler(request, response));
+      httpStatus = response.statusCode;
     } catch (error) {
       span.recordException(error as Exception);
       span.setStatus({ code: SpanStatusCode.ERROR });
+      httpStatus = 500;
       throw error;
     } finally {
-      requestCounter.add(1, { method, target, status: response.statusCode });
-      span.end();
+      requestCounter.add(1, { method, target, status: httpStatus });
+      span.setAttribute(SemanticAttributes.HTTP_STATUS_CODE, httpStatus);
+      if (baggage?.getEntry('synthetic_request')?.value == 'true') {
+        span.end();
+      }
     }
   };
 };
 
 async function runWithSpan(parentSpan: Span, fn: () => Promise<unknown>) {
   const ctx = trace.setSpan(context.active(), parentSpan);
-
-  try {
-    return await context.with(ctx, fn);
-  } catch (error) {
-    parentSpan.recordException(error as Exception);
-    parentSpan.setStatus({ code: SpanStatusCode.ERROR });
-
-    throw error;
-  }
+  return await context.with(ctx, fn);
 }
 
 export default InstrumentationMiddleware;