diff --git a/extension/src/app/api/index.ts b/extension/src/app/api/index.ts
index d10768f5..6015b6b4 100644
--- a/extension/src/app/api/index.ts
+++ b/extension/src/app/api/index.ts
@@ -325,7 +325,7 @@ interface StateMessage<S, A extends Action<unknown>> {
 
 export interface ErrorMessage {
   readonly type: 'ERROR';
-  readonly payload: unknown;
+  readonly payload: string;
   readonly source: typeof source;
   readonly instanceId: number;
 }
@@ -607,7 +607,7 @@ export function connect(preConfig: Config) {
     post(message);
   };
 
-  const error = (payload: unknown) => {
+  const error = (payload: string) => {
     post({ type: 'ERROR', payload, instanceId: id, source });
   };
 
diff --git a/extension/src/app/middlewares/api.ts b/extension/src/app/middlewares/api.ts
index 7e605729..c205d39b 100644
--- a/extension/src/app/middlewares/api.ts
+++ b/extension/src/app/middlewares/api.ts
@@ -157,10 +157,14 @@ type UpdateStateRequest<S, A extends Action<unknown>> =
   | SerializedActionMessage
   | SerializedStateMessage<S, A>;
 
+interface EmptyUpdateStateAction {
+  readonly type: typeof UPDATE_STATE;
+}
+
 interface UpdateStateAction<S, A extends Action<unknown>> {
   readonly type: typeof UPDATE_STATE;
-  readonly request?: UpdateStateRequest<S, A>;
-  readonly id?: string | number;
+  readonly request: UpdateStateRequest<S, A>;
+  readonly id: string | number;
 }
 
 export type TabMessage =
@@ -171,14 +175,11 @@ export type TabMessage =
   | ImportAction
   | ActionAction
   | ExportAction;
-type PanelMessage<S, A extends Action<unknown>> =
-  | NAAction
-  | ErrorMessage
-  | UpdateStateAction<S, A>;
-type MonitorMessage<S, A extends Action<unknown>> =
+export type PanelMessage<S, A extends Action<unknown>> =
   | NAAction
   | ErrorMessage
   | UpdateStateAction<S, A>;
+export type MonitorMessage = NAAction | ErrorMessage | EmptyUpdateStateAction;
 
 type TabPort = Omit<chrome.runtime.Port, 'postMessage'> & {
   postMessage: (message: TabMessage) => void;
@@ -189,9 +190,7 @@ type PanelPort = Omit<chrome.runtime.Port, 'postMessage'> & {
   ) => void;
 };
 type MonitorPort = Omit<chrome.runtime.Port, 'postMessage'> & {
-  postMessage: <S, A extends Action<unknown>>(
-    message: MonitorMessage<S, A>
-  ) => void;
+  postMessage: (message: MonitorMessage) => void;
 };
 
 const CONNECTED = 'socket/CONNECTED';
diff --git a/extension/src/browser/extension/devpanel/index.tsx b/extension/src/browser/extension/devpanel/index.tsx
index acf68e36..dfb24372 100644
--- a/extension/src/browser/extension/devpanel/index.tsx
+++ b/extension/src/browser/extension/devpanel/index.tsx
@@ -7,9 +7,10 @@ import configureStore from '../../../app/stores/panelStore';
 import getPreloadedState from '../background/getPreloadedState';
 
 import '../../views/devpanel.pug';
-import { PreloadedState, Store } from 'redux';
+import { Action, PreloadedState, Store } from 'redux';
 import { StoreState } from '@redux-devtools/app/lib/reducers';
 import { StoreAction } from '@redux-devtools/app/lib/actions';
+import { PanelMessage } from '../../../app/middlewares/api';
 
 const position = location.hash;
 const messageStyle: CSSProperties = {
@@ -96,15 +97,17 @@ function init(id: number) {
   bgConnection = chrome.runtime.connect({
     name: id ? id.toString() : undefined,
   });
-  bgConnection.onMessage.addListener((message) => {
-    if (message.type === 'NA') {
-      if (message.id === id) renderNA();
-      else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });
-    } else {
-      if (!rendered) renderDevTools();
-      store!.dispatch(message);
+  bgConnection.onMessage.addListener(
+    <S, A extends Action<unknown>>(message: PanelMessage<S, A>) => {
+      if (message.type === 'NA') {
+        if (message.id === id) renderNA();
+        else store!.dispatch({ type: REMOVE_INSTANCE, id: message.id });
+      } else {
+        if (!rendered) renderDevTools();
+        store!.dispatch(message);
+      }
     }
-  });
+  );
 }
 
 init(chrome.devtools.inspectedWindow.tabId);